Hosting a Static Site with Hugo
@ Adam Knox | Monday, Sep 23, 2019 | 3 minutes read | Update at Monday, Sep 23, 2019

Dynamic sites are all the rage these days, but static sites have their own advantages. I decided to try out Hugo to generate this one, and this is what I learned.

What is Hugo?

Hugo is an open source static site generator. What’s a static site generator you ask? It’s something that lets you create an easily extensible website (be it changing themes or adding content) without having to deal with any server side scripting.

An example workflow could look like this:

  1. write article using a markup language like markdown (what I’m using here, but others are supported by Hugo)
  2. run the development server to see what it looks like live while making changes
  3. build the website
  4. commit the all changes to git
  5. for github pages, deploy the new article by adding the build output to the root directory of master and pushing

There are other options out there like Jekyll, but I found Hugo to be the better fit for my needs and experience.

Why use a static site generatort?

Static site generators have the big pro of being very easy to host. I’ve quite liked using Google Appengine in the past because of its freemium model and fee model, but the purpose of this site is to host blog posts which shouldn’t require the power and complexity of an Appengine backed site. A static site can easily be hosted on something like Github Pages for next to nothing. Going a route like Wordpress would mean either a monthly fee for a wordpress host, or managing my own backend PHP/MySQL server. The final option I’ve looked into is a headless CMS, In my case ButterCMS (though there are a plethora out there). This could be something to look into in the future since it technically could interact nicely with static site generator for things like comments that can’t be generated statically.

How I set up Hugo

As I have alluded to, I decided to use Github pages for hosting my content. There are a number of different ways to combine Hugo/Github/Github-Pages, but what ultimately has worked best for me so far is to:

  1. Create a Github Pages repo. Create a regular repo, but give it the name <username>.githube.io. Now when you browse to the web address <username>.github.io, you’ll be served with the contents of that repo.
  2. Create the folder _source in the root directory of the repo <username>.github.io. Prepending an underscore means github pages will not serve the file/directory.
  3. Create a Hugo project inside this _source folder
  4. Open _source/config.toml and set this value: publishDir = ".."

Now when you run the command hugo from inside _source, it will build the website and place it inside the root of the repo, and since the source is in a folder prependend with an underscore, only the generated site will be visible on a push of master to github

© 2019 - 2021 Adam Knox

Powered by Hugo with theme Dream.

avatar
Interests
  • Yoga/Somatics ☋ Running ☊ Biking ☋ Health
  • Software Development ☊ Electronics
  • Minecraft ☋ Drumming
  • Photography ☊ Travel
  • Finance ☋ Psychology
  • New Experiences
  • Tea ☊ Coffee
Timeline
  • 2019 🕸 Created Pointer - A Dart/Angular app for pointing stories with a distributed team
  • 2019 🕸 Founded adamknox.ca on Github pages and Hugo
  • 2018 👷 Senior Software Development Engineer in Test at Workiva
  • 2016 👷 Software Development Engineer in Test at Workiva using Docker, Python, Go, Dart, Big Query, and AWS
  • 2014 🕸 Created Stat View - A chrome extension for making devops on appengine easier
  • 2014 🕸 Created Path Analyzer - A tool for tracing function calls through python code
  • 2013 👷 Software Developer at Vendasta using Javascript, Python, Docker, Big Query, GAE, and SASS
  • 2013 🎓 Graduated from University of Saskatchewan - Physics
  • 2013 🕸 Founded quotidion.info - backed by Python on Google Appengine
  • 2012 🎓 Graduated from University of Saskatchewan - Computer Science
  • 2012 👷 IT Summer Job for University of Saskatchewan Facilities Managament - Switch division to thinapps
  • 2011 👷 IS for Saskatoon Public School Division - Update all schools networks & build VB.NET/MySQL chat app
  • 2009 👷 IT Summer Job for City of Swift Current - Update computers and OS for all city service
  • 2007 🎓 Graduated from Swift Current Comprehensive High School
  • 2007 🏆 Won Skills Canada Saskatchewan electronics competition
  • 2006 👷 First commisioned work - PHP/MySQL inventory tracking system
  • 2005 🕸 Created the “VME Panel” Content Management System via PHP/MySQL
  • 2005 🎓 University of Calgary Summer C++ Camp
  • 2004 🎓 University of Calgary Summer Photoshop/DarkBasic Camp
  • 2004 🏆 Participated in Skills Canada Saskatchewan web design competition
  • 2004 🕸 Founded switchskate.net
  • 2003 👷 First Google Adwords Cheque
  • 2003 🕸 Founded skate-world.net
  • 2001 🤦 Discovered building websites with geocities, and how to rack up a large dial-up bill
Me

Hi! I’m Adam and I hope you can get some value out of the collection of information I’m building here. I’m currently a Senior Software Development Engineer in Test with Workiva during the day and during the evenings I’m learning about a variety of subjects, relaxing, or honing some kind of skill. I would like to keep primarily focused on software development, but photography and cooking are going to show up a lot too.