Using Hugo and a theme to relaunch my website
TL;DR: I relaunched my personal website using Hugo, a pre-built theme, and a one-line deployment script to AWS S3. It’s now easy to maintain and includes a blog.
I’ve had a website at the domain www.kristeehan.com for a long time. For most of that time, it has sat there pretty bare. A headline, a link to my LinkedIn Profile, maybe a link to one project. Not much.
This year, I decided I would get my personal website in better shape. Something presentable for someone who has been a frontend developer for so long one of my first job titles was “webmaster”.
Getting a theme
In previous attempts to do this, my vanity compelled me to design and code the entire thing myself. For those efforts, I had a lot of neat inspiration boards, even some designs in Figma, but no results. Now that I’m a busy husband and father of two, I finally accepted that my time is best spent doing things other than designing the site.
I already have a subscription to Envato for video making purposes, and I was happy to discover they had website themes available as well. After some browsing, I found one I liked and downloaded it.
After playing around with the different “skins” this theme came with, I decided on the blue one. I modified the assets to use some of my photos, I took things out I didn’t need, and boom, I had a good starting point.
Hugo
Next, I decided to look into tools that could help me go from this small static site to a static site plus a blog, that would be easy to update. This led me to Hugo, a framework for generating static sites. Hugo would allow me the flexibility to build new parts of my site fast, help me handle assets like images and video, give me an automated build process, and the ability to have a blog complete with an RSS feed. Great.
So I started migrating my plain HTML site to Hugo. It was fairly straightforward, though I had to learn the nuances of Hugo’s layout and content system. Getting the markdown right was tricky, and making it play nice with the theme ran into some small issues. For example, the theme I chose had most of its “pages” on one HTML page and used anchor tags + custom javascript to navigate between “pages”. My new blog was going to be a separate page, so this required some adjustment to how the theme handled links that were meant to go to a separate page.
Automation with AWS CLI
After the migration to Hugo was complete, I committed all the changes to the GitHub repo I have for my personal website. The next step was to get this new, Hugo-generated site up to the AWS S3 bucket that housed my static website.
Up to this point, I had been doing this manually, uploading changes through the S3 UI. Now, however, I decided I wanted to automate this process.
Automation would involve a few key things: installing AWS CLI, configuring AWS CLI, and writing a script that would both build my Hugo site and then sync/upload it to the S3 bucket hosting the site.
Installing AWS CLI via home-brew was pretty simple. Configuring it meant creating a new user, and generating a secret access key ID and name. The script to build and deploy was also pretty straightforward:
hugo && aws s3 sync public/ s3://[bucket-name] --delete
Just one line. hugo builds the static site and puts it in the public directory in the root of the project. aws s3 syncuploads all changed and new files to the appropriate bucket, and the --delete flag will delete any files in the bucket that aren’t present locally.
Put this in a simple script called deploy.sh and bam, I had a workflow. Make changes, commit, run deploy.sh.
Conclusion
All in all, this took me one weekend to complete, coding in between dad and husband duties like fixing breakfast, playing co-op Mario, cuddling and watching a movie, taking out the trash, walking the dog, etc.
And now, here it is, up and live.