Home > Deploying Hugo Static Site With AWS CDK Cloudfront & Codepipeline
Deploying Hugo Static Site With AWS CDK Cloudfront & Codepipeline
Deploying static site is very similar to deploying static assets for react app.
I have another blog post that explains how to deploy react app with CDK.
I would love nothing more to create detail guidelines for hugo deployment.
However its very similar to react deployment and google does not like duplicate content on multiple blog posts.
The only difference really is the
buildspec.yml file. So I am only going to explain that file.
To read rest of the article please Purchase Subscription
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
Now let's get on with difference of deploying hugo from react js
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.
Bonus: Deploy hugo without pipeline
- Follow the previous guide without pipeline stack
- Install aws cli
aws configureadd add credentials
- Install task
- Make sure node dependencies are installed with
Then add following
Taskfile.yml at root of hugo project
default task is used for frequent stuff like commit. And you can execute by just typing
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
Free users cannot comment below so if you have questions then tweet me @apoorvmote. I would really like to hear your brutally honest feedback.
If you like this article please consider purchasing paid