Deploying this Hugo blog to AWS S3 | Part 1
This blog is built with Hugo — an open-source static site generator. Static websites require no server side processing, which makes them easier to host and opens up new hosting possibilities.
There are many options out there, but I deploy my website to AWS S3, using CloudFront to distribute it globally (aka. make it fast).
Here is the why and the how.
GitHub
I keep the website source code on my private GitHub repository, using AWS CloudBuild to build and AWS CodePipeline deploy it. This is the configuration for my production pipeline:
Source - GitHub:
- Action provider: GitHub
- Branch name: master
- Change detection options: Start the pipeline on source code change
Build - AWS CodeBuild:
version: 0.2
env:
variables:
s3_output: "andreapintus.com"
phases:
install:
runtime-versions:
python: 3.10
commands:
- apt-get update
- echo Installing hugo
- curl -L -o hugo.deb https://github.com/gohugoio/hugo/releases/download/v0.101.0/hugo_extended_0.101.0_Linux-64bit.deb
- dpkg -i hugo.deb
- hugo version
pre_build:
commands:
- echo In pre_build phase..
- echo Current directory is $CODEBUILD_SRC_DIR
- ls -la
- ls themes/
build:
commands:
- hugo -v
- cd public
- aws s3 sync . s3://${s3_output}
So what happens here?
The pipeline is triggered when the master branch on GitHub is updated. It uses Ubuntu as OS to build.
Now for the build steps:
-
Initialize:
- Git submodules are initiated
- Hugo sofware is being downloaded and installed
-
Build:
- Hugo Build with the code downloaded from the source repository (GitHub)
-
S3 Deploy:
- Hugo sync
public
folder to the S3 bucket. Only touch changed or deleted files.
- Hugo sync
Why S3?
So why do I choose S3+CloudFront when there are so many options out there?
Well, I like the simplicity. Now — I realize that may sound counter-intuitive as AWS can be pretty complex… But once you’ve figured out how it fits together, it’s rather simple.
I upload the site on GitHub account, CodeBuild builds the public
folder for me and upload the files to a bucket, which CloudFront delivers.
By specifying different behaviours in CloudFront; I can pull in files from other origins. Like how /video//thumbnail_.jpg comes from a different S3 bucket.
CloudFront is also very performant, as shown by savjee.be
The best all-around performer is AWS CloudFront, followed closely by GitHub Pages. Not only do they have the fastest response times (median), they’re also the most consistent.
Experiences
As you can see below; the performance is consistently good. With a server response time below 70 ms.
Wrapping it up
I’ve considered trying other hosting services, but keep falling back to S3+CloudFront. It’s simple; after the initial setup, works great, and have everything I need. With AWS I just pay for what I use, no freemium. I like that better