Deploying Hugo Static Site With AWS CDK Cloudfront & Codepipeline

Before we get started with difference I would recommend to develop CDK project inside development docker container.

So we no longer have the issue of "this works on my computer". And it will not mess with your existing workflow.

So checkout my blog post for detailed video explanation.

Then checkout CDK development container settings on github

And Hugo development container settings on github

Now let's get on with difference of deploying hugo from react js

View hugo deploy source code on github

I personally like to use PostCSS with hugo with autoprefixer package.

So my css automatically prefixed with all browser prefixes. This is why I am using nodejs runtime.

Unfortunately Hugo is not preinstalled on build container so we need to download and install from github.

Thankfully hugo maintains same url structure with only change in version number.

So in environment variable I keep the latest version number. And download and install Hugo based on that version number.

Finally is the command that runs regardless if the install succeeds or fails.

So if hugo install fails then the hugo version command will fail the build process.

Unfortunately while the build was failing because the git was not configured.

Somehow that is not the issue when building react app. Both react and hugo are versioned with git.

So I had to set global configuration and create a build commit before the build could succeed.

After that its simply deploy the public directory and all of its content.

With react we deployed build directory. So remember to change name of directory.

View backend and hugo website on github.

Bonus: Deploy hugo without pipeline

Prerequisite

1. Follow the previous guide without pipeline stack
2. Install aws cli
3. Run aws configure add add credentials
4. Install task
5. Make sure node dependencies are installed with npm i

Then add following Taskfile.yml at root of hugo project

The default task is used for frequent stuff like commit. And you can execute by just typing task.

The build task first builds production version of website in public folder.

Then you sync public folder with your s3 bucket. And at the end you delete public folder so you can deploy again if you want.

And make sure to add public folder in your .gitignore.