Skip to content
Ryan Wold edited this page Feb 2, 2023 · 3 revisions

Host a personal website for a few bucks per month

This repository demonstrates how to host a website built with Ruby Jekyll and Tailwind CSS that is deployed to Amazon S3 with Cloudfront and deployed via GitHub Actions.

Things you'll need to do to get the job done
  • Create a Jekyll site using Tailwind. (clone this repository)
  • Create an Amazon S3 Bucket. - that will hold the website files
  • Create an Amazon IAM Account. - used for user permissions in AWS
  • Create an Amazon Cloudfront distribution. - used to replicate and host the files from S3, for a more 'robust' performant website.
  • Create an SSL/TLS certificate using Amazon ACM (Amazon Certificate Manager) - to ensure https hosting, rather than http
  • Configure a GitHub PAT (Personal Access Token) so GitHub actions can have permissions to run the build and deploy actions.
  • Buy a new website domain, or use an existing domain. - to host the website at a domain of your choosing
Instructions
  • clone or fork this repository to your own GitHub repo
  • Create an Amazon IAM Account.
  • Create an Amazon S3 Bucket.
    • Set the permissions on the bucket; reference the IAM Account and the Cloudfront Distribution
  • Create an SSL/TLS certificate using Amazon ACM (Amazon Certificate Manager)
  • Create an Amazon Cloudfront distribution.
    • Point Cloudfront at the S3 bucket
    • Specify the Certificate created with ACM, for use with the Cloudfront distribution.
  • For the website domain, set a CNAME to the public Cloudfront URL.
    • Set CNAME to verify the domain for use with the Certificate created with ACM.
Finally, to deploy the site, configure GitHub Actions
  • For each of the variables defined in /.github/workflows/build-and-deploy.yml, specify a secret in GitHub Actions
    • AWS_ACCESS_KEY (IAM)
    • AWS_SECRET_ACCESS_KEY (IAM)
    • AWS_S3_BUCKET_NAME (S3)
    • AWS_DEFAULT_REGION (S3)
    • AWS_CLOUDFRONT_DISTRIBUTION_ID (Cloudfront)
    • JEKYLL_PAT (GitHub > Profile > Settings > Developer Settings)