Deploy Your Very Own Website!

February 2, 2024

2024-02-02

This week in my journey into the cloud, I took a deeper dive into CloudFormation. But before we get to that, I have a treat for you!

Have you ever wanted your very own website? Maybe you already have a website, but you're paying way more than you'd like for some cookie-cutter platform that you don't need? Today is your lucky day! I'll walk you through how to stand up and maintain your own website for only $15/year on AWS.

I spent many hours this week tearing down my website and rebuilding it over and over until I had my whole platform dialed in to a point where anyone could reuse my template to host a website of their very own.

Step 1: Build the Architecture

Website From Scratch

Building the Architecture

  1. Create an AWS Account
  2. Register a domain with Amazon's Route 53
  3. In AWS CloudFormation, create a stack with new resources from a template, and upload the static_website.yml template. Enter the domain you registered as your domain parameter (e.g., strohb.com)
  4. After you initiate the stack build, check your email inbox in 5-15 minutes for a link to approve your domain's certificate. Click the link, then the "Approve" button
  5. To bring your site online, you'll need to repoint your DNS nameservers to match your CloudFront nameservers

Reroute DNS

  1. In the AWS Console, navigate to Route 53
  2. Click on your Domain registration, then your domain name
  3. Under Details, you'll see 4 "Name servers" on the right side
  4. Ensure these match the domain servers in your Route 53 > Hosted zone
  5. In Route 53 > Hosted zones > {your domain}, check the 4 "Name servers"
  6. Update your registered domain's name servers to match the Hosted Zone ones
Step 2: GitHub Actions

Set Up GitHub Actions

This is how you're going to automate content updates to your website.

  1. Fork the repository to your own GitHub account
  2. In your forked repository, go to Settings > Secrets and variables > Actions > New repository secret
  3. In the AWS Console, create an access key: IAM > Users > {stack-name}-MyS3WebsiteFullAccessUser > Security credentials > Access keys
  4. Create a secret named AWS_ACCESS_KEY_ID with the "Access key" value
  5. Create a secret named AWS_SECRET_ACCESS_KEY with the "Secret access key" value
  6. Go to your repository's "Actions" tab to verify the workflow
Slide 1
Step 3: Publish Content

Publishing Content

Setting up your environment

  1. Install Python 3.11 on your computer (recommended for best performance)
  2. Open your favorite IDE, and create a new virtual environment: python -m venv env
  3. Install poetry: pip install poetry
  4. Activate your virtual environment: env/scripts/activate
  5. Install mkdocs: poetry install --only=docs --no-root

Creating your content

This section is tailored to hosting a MkDocs-built site, but you could also use Pelican, Lektor, Jupyter Book or Frozen-Flask.

  1. Clone your forked repository to your computer
  2. Update the AWS_S3_BUCKET in .github/workflows/deploy-mkdocs.yml to match your domain name
  3. Update mkdocs.yml to your liking (at minimum, you'll need the index.md page)
  4. Clear out the docs/assets/ folder, and update index.md for your homepage
  5. To preview your website, run mkdocs serve in a terminal
  6. Once satisfied, commit and push to trigger the GitHub Action!
Troubleshooting

Troubleshooting

If you run into issues, here are some common problems and solutions:

  • Certificate not validating? Check your email (including spam) for the approval link from AWS
  • Site not loading? Double-check that your nameservers match between your domain registration and hosted zone
  • GitHub Action failing? Verify your AWS secrets are correctly configured with no extra whitespace
  • CloudFront not updating? You may need to invalidate the cache or wait a few minutes for propagation

Feel free to message me on LinkedIn if you run into any issues. I'd love to help you get set up with your own website!

That's a Wrap!

I hope this tutorial helps you get your own website up and running. The beauty of this setup is:

  • Cost-effective - Only $15/year for the domain, hosting is essentially free
  • Automated - Push to GitHub and your site updates automatically
  • Scalable - CloudFront handles traffic spikes effortlessly
  • Secure - Free SSL certificates with AWS Certificate Manager

Thanks for reading! Happy deploying!

Anniversary Day

<3

-- Years
-- Days