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
Create/host my website instead of using blogging platform
I thought about using Medium and Substack and my blogging platform, but ultimately decided to build my own site.
Site Generator
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.
Choice of Site Generator
After evaluating a few site generators I decided to go with Hugo
Hosting
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 your local desktop/laptiop Mac
- For Mac Install brew and Install hugo
- PC -> Instructions for windows
Githup and access to github account from Mac
- Create a github account
- 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
Getting started with Hugo
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
- git clone git@github.com:sudhirsrinivasan/HugoSite.git
- cd HugoSite
- 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
- git add –all
- git commit -m “your comment here”
- git push
Hosting on Amplify
-
Create an AWS account
-
Followed these directions except for two differences
- I had to do the force amplify to use the newer version of hugo and to do that I followed these directions
- Also I edited the build file on amplify to add hugo as a command and public directory.
- Amplify will give you a URL but you can also register your DNS using route 53 and then assign use that.
Purchasing a DNS using Route 53
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.
Tada
sudhirsrinivasan.net Here is my Son’s website which he setup using srivatsansudhir.net
To get google to start indexing my website
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