ryanwold.net - Civic Tech, Bitcoin, and Open Government Innovation

Title

Text

This post covers how to create a static website using Ruby Jekyll and host it on Amazon S3 with a Cloudfront distribution (to improve performance & availability). The code is managed in GitHub and when changes are made to the code, the website builds and re-deploys automatically.

Working code that you can start from is available here:
https://github.com/afomi/jekyll-with-tailwind-to-s3-via-github-actions/

And after working through these steps yourself, you'll have a basic [TailwindCSS](https://tailwindui.com/components) styled website that looks like: https://jekyll.afomi.com/, that you can then edit and improve to your heart's content.

---

Create a new Jekyll site locally.

### Locally, create a Jekyll project

* `jekyll new project-name` to create a new Jekyll project
* `jekyll serve` to run the app locally 
* Install tailwind
  * visit http://localhost:4000 to see the changes locally

### In Amazon Web Services (AWS)

* Create Amazon s3 bucket and note the name of the bucket
* Create Amazon Cloudfront distribution and note the ARN of it
* Create Amazon IAM user and permissions
* Create Amazon certificate

### In GitHub

* Create GitHub repo
* Push the code
* Create GitHub action
* Create personal use token

Alright!

### S3 settings

Set your S3 Bucket Policy to this, and update the 3 values. (1 with the IAM account and 2 with the S3 bucket name)

<code>
{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicReadGetObject",
			"Effect": "Allow",
			"Principal": {
				"AWS": "YOUR-IAM-ARN-GOES-HERE"
			},
			"Action": "s3:*",
			"Resource": [
				"arn:aws:s3:::YOUR-S3-BUCKET-NAME",
				"arn:aws:s3:::YOUR-S3-BUCKET-NAME/*"
			]
		}
	]
}
</code>

### IAM Permissions

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "S3",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucketMultipartUploads",
                "s3:AbortMultipartUpload",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:ListMultipartUploadParts"
            ],
            "Resource": [
                "arn:aws:s3:::YOUR-S3-BUCKET-NAME",
                "arn:aws:s3:::YOUR-S3-BUCKET-NAME/*"
            ]
        },
        {
            "Sid": "Cloudfront",
            "Effect": "Allow",
            "Action": "cloudfront:CreateInvalidation",
            "Resource": "YOUR-CLOUDFRONT-ARN"
        }
    ]
}
```

An entry