Overengineered Static Site

In the ever-evolving landscape of web development and hosting, deploying a personal website can often traverse through complex and intriguing paths. My recent adventure in launching my own website is a testament to the myriad of possibilities that cloud technologies offer, albeit with an overcomplicated flair that could rival one of Rube Goldberg's contraptions. Let's delve into the intricacies of hosting a static site on AWS, using services such as S3, CloudFront, API Gateway, and a sprinkle of GitHub Actions magic.

The cornerstone of this digital architecture is the AWS S3 bucket, renowned for its simplicity and reliability. I decided to serve the website through CloudFront, AWS's content delivery network, to reduce latency and improve load times for users across the globe. To seamlessly incorporate an RSS feed from cyware.com and mitigate CORS errors, I implemented an AWS HTTP API Gateway to act as a backend proxy. This HTTP endpoint works as a bridge, fetching the RSS feed from a server (as opposed to a client browser) and presenting it as if it were a native component of the site, thereby circumventing any CORS limitations.



The quest for automation and seamless updates led me down the path of integrating GitHub Actions into the workflow. Each push to the master branch triggers a series of actions that programmatically update the contents of the S3 bucket. Furthermore, the CloudFront distribution cache is invalidated, forcing it to fetch and distribute the newest content. Here is the deploy-site.yaml file that runs the CI pipeline:

name: Deploy to AWS S3 and Invalidate CloudFront

on:
    push:
    branches:
        - master

jobs:
    deploy:
    runs-on: ubuntu-latest

    steps:
        - uses: actions/checkout@v2
        
        - name: Sync to S3
        uses: jakejarvis/s3-sync-action@master
        with:
            args: >
            --follow-symlinks 
            --delete
            --exclude '.git/*'
            --exclude '.github/*'
        env:
            AWS_S3_BUCKET: www.xbazzi.com
            AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
            AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
            AWS_REGION: 'us-east-1'
            SOURCE_DIR: './'

        - name: Invalidate CloudFront Distribution
        uses: chetan/invalidate-cloudfront-action@v1
        env:
            DISTRIBUTION: E3VV7PXHG95EM0
            PATHS: '/*'
            AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
            AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
            AWS_REGION: 'us-east-1'

Even though I injected complexity by implementing a cloud-based, declarative, highly-available architecture, I still haven't touched a single JS framework; the whole codebase is simple HTML, CSS and javascript. Maybe one day I'll learn React, Vue, or Svelte... maybe even JQuery... but not today.