Hugo on AWS S3

Hosting a static hugo generated site on aws s3 on a route53 domain with cloudfront

Been holding on to this domain for quite awhile now, and have mainly been using it for hosting proof of concepts(POC) projects that is started either out of personal academic interest, or office-work related - doing it on the cloud is so much more productive and faster than going through bureaucratic approval seeking processes for budget,hardware,software,etc

Since am on it, thus decided to start a simple blog, mainly technical focus for now, though might change later on

Hugo

So to start having a couple of faces(pages) to my site, i choose to use a static site generator called Hugo. It has lots of themes options for you to get started and once you have decided on the theme of your choice, simply add it as a submodule via a git command. The rest are simply changes to a config file and a couple of hugo commands to either run the site locally or generating the final static contents for deployment

Static files on AWS S3

AWS S3 already provides the necessary functionality to host a static website. First, create a public bucket, e.g; cwgoh.net. Next, upload your already rendered public/ directory. You can then enable static hosting by going to the properties tab and enable the static website hosting option. See the endpoint URL?

Next, since we’ll need to allow the public to be able to access the static content of the site hosted on S3, we’ll need to tweak our bucket policy to allow that. This effectively allows all resources parked under the bucket to be readable by the public

"Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cwgoh.net/*"
        }

Now when i go the site using the endpoint url earlier, we have our site neatly displayed. At any point where a new blog post needs to be made or changes to the site is done from the config.toml file for example, we can just regenerate the site by running hugo and reuploading the changed public/ directory.

Route53 Custom Domain, CloudFront

At this point, seems that it’s all bed of roses, but not exactly so. Firstly, the endpoint url we’re using earlier is actually a S3 endpoint url, and not cwgoh.net which is the base url you’re viewing this site from.. Cannot make it, not satki with own domain right? Additionally, since all S3 endpoints are served over http and not https, this is a very insecure solution we have right here. Lastly, my bucket also resides on the ap-southeast region, and say someone across the globe in US/UK accesses my site, will result in inefficient and slow loading depending on content and image sizes.

This is where using a Content Delivery Network(CDN) like CloudFront comes in where content can be cached in edge locations across the globe. This not only serves my content faster, but also reduces costs involved since not all requests go all the way back to S3 every single time as content are cached at CloudFront

Will talk more about setting up the custom domain with route53 and cloudfront in the next post