Introduction

If you have not heard of Hugo Static Site Generator then I am happy you are here. Static site generators are the “new black” in web site development. If you are here to read how I did it then you might want to skim over this post and jump into the next one (once I write it). I have been planning on blogging about Hugo SSG for a while (according to the draft date on this post, over 8 months) because I want to share my excitement for a very cool way to create and host a beautiful, modern web site for pennies a month. There are many different approaches to how you build your web site with Hugo. I am going to demonstrate how I put together the site for my “other” company AbleBlue.com, where my personal blog is hosted. (I am no longer consulting through AbleBlue as I currently work for Spanning Cloud Apps in Austin.)

Backstory

My first full featured blog was hosted on SharePoint 2007 when I worked as a consultant for Catapult Systems. It was a labor of love and involved the community of developers who created the Community Kit for SharePoint: Enhanced Blog Edition, lovingly referred to as CKS:EBE. Later, when I went independant I jumped on the Wordpress bandwagon. I never used half of the features like the WYSIWYG editor or any of the thousands of plugins. I only needed image support and syntax highlighting. I did spend time upgrading the blog every time there was a new release. I did run into issues with upgrades but never had the datbase corruption folks have mentioned. I just felt like it was WAY overkill for my blog. Around the same time I was also considering “freshening up” the look and feel. My blog was not mobile friendly. Cost wasn’t really a issue, but, as you will see, it is a fringe benefit.

Guidance

Fast forward to about 18 months ago and while chatting with Andrew Connell about creating a new web site hosted in Azure he told me about Hugo. The whole concept of a static site generator was new to me, I mean, I know that most modern content managed web sites are “generated” from a mix of content, images, and code. The biggest difference is when they are generated. Wordpress pages are built as you browse the site (not withstanding caching etc) essentially, on demand. Hugo, like other SSGs, take a different approach and generate all possible pages in advance. Then you host the pages without a database or anything else to slow down the browsing experience. SSG sites have several advantages:

1. Blog posts are just text files. I use VSCode, but any text editor will do.
2. They are blazing fast. There are no database requests, no page builds, the site is simply serving HTML and images.
3. They don’t require a web server in the traditional sense, they can be served from a Content Delivery Network (CDN).
4. They are incredibly secure, there is not database to hack.
5. There is a true seperation of content and code. They are easy to re-skin because the layout of the site is seperate from the content you create. This also means that content teams and development teams can work in parallel on a site.
6. They are developer and IT Pro friendly. As you will see, storing your blog in a version control system enables you the same (I think better) capability that a database did, and you can add a CI/CD Pipeline for build publication or scheduled posts.

Show Me The Demo

I love to show this simple demo. I’ll post it in the video as well. Once you install Hugo which depends on your operating system. On Windows it’s just one executable file and there is no “installation” beyond making sure the EXE is on the path.

Create a new site using the following command:

hugo new site ruby-photos

There is not much to the site right now, it needs a theme to make it all work. Point your browser at the Hugo Theme Gallery and find one you like. There are a lot of options from single page “brocure” themes to incredibly full featured options like Agency, Hugo creative portfolio, Nederburg, or Creative. Let’s initialize the project and then clone the theme, I like Nederburg.

cd ruby-photos

git init

git submodule add https://github.com/appernetic/hugo-nederburg-theme.git themes/hugo-nederburg-theme

While you may only ever create one or two sites, every time you need to add a page or blog post or portfolio project to the site you are creating new content. Hugo has a terrific templating mechanism called archetypes but I’ll cover that later.

hugo new post/ruby-on-barton-creek.md

Run Hugo Server in draft mode and force the new theme.

hugo server -D -t hugo-nederburg-theme

The output should show pages and other details.

Building sites …
                   | EN
+------------------+----+
  Pages            |  6
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  7
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Browse your new site by pointing your browser at http://localhost:1313.

The next step would be to copy the exampleSite content to make your site look like the demo theme. This step is a little different for every theme. I’ll review it in the video.

Why All The Fuss

Some folks will watch the demo and say “So what!”. I can agree that, for some folks, Wordpress is the way to go. For me, I love to get my hands dirty and own the whole build process. There are real-world, large companies using Hugo (and Jekyll) SSGs to create huge sites at scale. While researching the background for this story I ran across Using A Static Site Generator At Scale: Lessons Learned it is a very interesting read.

The Video