A civic-minded citizen seeking the singularity

An entry

Publishing a Ruby Jekyll website on Amazon S3

Series: On Work
Date: 2023-01-22
Status: release
Tags: s3 ruby jekyll github
This Entry is part of the Series On Work.

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

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


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