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-nameto create a new Jekyll projectjekyll serveto 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"
}
]
}