Some Background Of How This Came To Be


It had been awhile since I refreshed my personal site (screenshot above - circa 2019). Seeing that I’ve been itching to write more code outside of my day-job, I figured I could put to the test how quickly I could build + deploy a static website from start to finish. I had previously used the same system / set of processes to build & deploy Cabeça de Queijo and Toucan Trips.

How much time does this take to setup?

Honestly, getting DNS + AWS setup properly to host the site too ~60 minutes - max. Since I had worked out the kinks in the process w/ Cabeça de Queijo this was relatively painless with only one hiccup (setting up a 404 page in CloudFront and in the codebase).

How long does a build/deploy step take?

image Immediately after code is merged into the main branch, the GitHub Action to deploy the site is kicked off.

In total, it takes whopping 41 seconds - of which GitHub Actions adds 10s and installing npm modules is 18s. You can see that by having specific steps in your GitHub Action, you can really nail down what is taking up time.



Certainly, as with most technology, there are limitations to what this deployment system can / cannot do. This guide is geared around launching an Astro website. And even tho Astro is relatively new, I found their documentation to be fantastic - as well as the various examples that folks in the ecosystem have produced.

Brief Guide on How to Setup AWS CloudFront with as the Domain Registry.

Steps -

name: Deploy Website to Amazon S3

      - main

    runs-on: ubuntu-latest
      - name: Checkout
        uses: actions/checkout@v3
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
      - name: Install modules
        run: npm ci
      - name: Build application
        run: npm run build
      - name: Deploy to S3
        run: aws s3 sync --delete ./dist/ s3://${{ secrets.BUCKET_ID }}
      - name: Create CloudFront invalidation
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"
    "Version": "2012-10-17",
    "Statement": [
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
            "Resource": [

If there are issues with the above, ensure that your DNS has propagated with a tool like this.

Note - If you have a multipage website, be sure to create a CloudFront Function in order to handle redirects properly.