Welcome! I decided to make a blog to post articles about all the technology shenanigans I get up to in my spare time. Partly so that I remember what I did, and partly for anyone else to refer to when they are working on similar projects.

Here’s some meta info about this website’s tech stack for starters.

Tech Stack

The site content itself is written in Markdown, which is then converted into static HTML using Hugo.

The theme in use is called fuji and it supports light and dark modes (see button in the far bottom right corner)!

Hosting

The site is hosted in an Amazon S3 bucket, with CloudFront in front of it. This ensures that the site always responds insanely quickly no matter where in the world you are.

Forgive my diagramming abilities.

Workflow

To publish a new post, I just commit a markdown file into the posts/ directory of the source. Bitbucket pipelines then picks it up, runs hugo on it, and then pushes the static HTML to Amazon S3.

The final step is to create a cache invalidation in CloudFront, which causes all the AWS caches to flush out the old version and replace it with the newest one.

Automation

Bitbucket Pipelines and their “pipes” make this whole thing super easy:

image: phybros/docker-hugo-builder:0.83.1

pipelines:
  branches:
    main:
      - step:
          name: Build and minify files
          script:
            - hugo --minify --config phybros.net.toml
          artifacts:
            - public/**

      - step:
          name: Deploy to S3
          deployment: Production
          script:
            - pipe: atlassian/aws-s3-deploy:0.4.1
              variables:
                AWS_DEFAULT_REGION: 'us-east-1'
                S3_BUCKET: 'phybros.net'
                LOCAL_PATH: 'public/'
            - pipe: atlassian/aws-cloudfront-invalidate:0.3.1
              variables:
                AWS_DEFAULT_REGION: 'us-east-1'
                DISTRIBUTION_ID: '<INSERT CF DISTRO ID HERE>'
                PATHS: '/*'

You just need to add AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY to your Repository Variables page, plug in your details (i.e. bucket name, distro id) and it just works! 😎