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.)
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.
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:
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
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.
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.
Ready to start your next project with us? That’s great! Give us a call or send us an email and we will get back to you as soon as possible!