Setting up a blog in a couple of hrs using Hugo and AWS Amplify

Introduction

This is my first post about the construction of this website. I intend to record the development of the building. I hope the explanations are simple as this will be written for my children to use.

Decisions I took

I thought about using Medium and Substack and my blogging platform, but ultimately decided to build my own site.

Having worked in the software industry for years, I have learned to value the ease and simplicity of generating html content over having a backend. My goal is to see how much I can retain the core of a site that is generated html content but add dynamic components to it.

After evaluating a few site generators I decided to go with Hugo

I will be hosting it on AWS and for a start I plan to use AWS Amplify amongst other services.

How I built it

Here is a rough picture of the pieces involved. With this setup you can create html and view it on your laptop/desktop using hugo and then publish the html to a github repository which is then picked up using AWS Amplify to publish it so everyone can see it.

Setup

  1. For Mac Install brew and Install hugo
  2. PC -> Instructions for windows
  1. Create a github account
  2. Follow instructions to setup ssh access to your github account here to setup my access of github from mac. This video also describes the same process but is a bit dated. It uses rsa instead of the newer ed25519 algorithm

For most part you can followed the directions from hugo quickstart with some minor exceptions. Instead of creating a site (hugo new site) and then making it a git directory reverse the order. In my case, I created a repository on github called HugoSite. Then git cloned it and ran ran hugo new site with a –force option since the directory already existed

  1. git clone git@github.com:sudhirsrinivasan/HugoSite.git
  2. cd HugoSite
  3. hugo new site . –force

If you see this warning “found no layout file for” follow directions from here

Once you follow above instructions and are able to see your website on your local you can push changes to github using the commands below

  1. git add –all
  2. git commit -m “your comment here”
  3. git push
  1. Create an AWS account

  2. Followed these directions except for two differences

    1. I had to do the force amplify to use the newer version of hugo and to do that I followed these directions
    2. Also I edited the build file on amplify to add hugo as a command and public directory.
    3. Amplify will give you a URL but you can also register your DNS using route 53 and then assign use that.

Purchase a domain name using Route 53 There are cheaper options than route 53 but weigh the tradeoff between the convenience of having everything in one place vs cheaper cost. Also a lot of times the cost is the same or not much more expensive based on the domain name.

Add the Domain to the amplify app using directions here.

sudhirsrinivasan.net Here is my Son’s website which he setup using srivatsansudhir.net

I verified my ownership of site with google to make sure it starts indexing it https://support.google.com/webmasters/answer/9008080 using directions provided here. https://support.google.com/a/answer/6149686?hl=en