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 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)

{ "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/" ] } ] }

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" } ] }