Software engineer, entrepreneur, photographer and technical marketer.

First we will setup our development environment using Docker and add a new aws service to docker-compose.yml. # aws/Dockerfile FROM node:18-slim # AWS CDK will use the folder name for the modules WORKDIR /site ARG AWS_CDK_VERSION=2.53.0 RUN apt-get update -y &&\ apt-get install -y --no-install-recommends \ ca-certificates \ curl \ groff \ less \ unzip RUN curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o awscli.zip &&\ unzip awscli.zip &&\ ./aws/install RUN npm install -g \ aws-cdk@${AWS_CDK_VERSION} \ esbuild # NOTE: Uncomment these lines after you have ran `cdk init app` # COPY src/package.

We will be building off of the work done in Deploying Hugo to Fly.io and using Github actions to deploy to Fly.io. To get this workon, we just have to add the following to .github/workflows/release.yml, then configure the action’s secrets. # .github/workflows/release.yml name: Release on: push: branches: [ main ] concurrency: group: ${{ github.ref }} cancel-in-progress: ${{ github.ref != 'refs/heads/main' }} env: FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} HUGO_OPENGRAPH_KEY: ${{ secrets.HUGO_OPENGRAPH_KEY }} HUGO_OPENGRAPH_SECRET: ${{ secrets.

Deploying Hugo to Fly.io requires a webserver, for this we will use NGINX. Continuing from Hugo + Alpine.js + TailwindCSS Quickstart and Integrating OpenGraphImage.com we will update the Dockerfile in our project by adding two addition stages, builder and release. The builder stage extends our hugo image and run the npm run build npm script that will trigger the Hugo production release, saving the output to /src/public/. The release stage uses an nginx:alpine docker image and copies in the files in /src/public/ from the builder stage and a custom nginx.

OpenGraphImage.com is a service that will generate images from HTML templates. By leveraging Hugo’s custom output formats we can make quick work of this task and have dynamic opengraph images for each page in our site. First thing we need to do is add the custom outputFormats and outputs to the hugo/src/config.yaml file. # ... outputFormats: OG: path: '/og/' mediaType: 'text/html' permalinkable: false noUgly: true outputs: page: - HTML - OG home: - HTML - RSS - OG section: - HTML - OG taxonomy: - HTML - OG term: - HTML - OG This tells Hugo that we want to generate an additional HTML file per page of our site in the /og/.

Using my development environment setup I’m going to generate a new hugo site. The first time we access the hugo container we need to ensure the hugo/src folder exists: mkdir hugo/src We will start by opening a bash terminal to our hugo container: ./run.sh hugo bash Then we can verify our Hugo version: hugo version # => hugo v0.107.0-2221b5b30a285d01220a26a82305906ad3291880 linux/amd64 BuildDate=2022-11-24T13:59:45Z VendorInfo=gohugoio From here, we can refer to the official Hugo quick start and initialize Hugo:

I like to use Docker to manage my development environment for all of my projects. This allows me to pickup where I left off on a project without haing to spend the time getting my local machine back into the state it was when I was last working on the project. Docker also acts as documentation of the setup involved for my development environment. I also start out with a monorepo with my Hugo project in a subfolder instead of the root.