6 minute read

Review of Hugo for web Development

My experience working with Hugo, the static site generator, which represents a great option in the crowded landscape of web development options

Hugo logo

Overview of Development Landscape

I’ve been involved in web development on and off for almost twenty years. When I first started doing web work, getting a website was a pretty big deal. I worked for a web development firm that had a full-time staff of six or seven people with a fixed office, and at the time there were few existing tools for building websites - HTML and CSS were written by hand, and there was a lot of custom programming to get a website with any functionality. Content management systems (CMS) like WordPress were starting to come into use, but were not nearly as accessible or widely deployed. A typical project, even for a small business, would end up being several thousand dollars of design and programming work. But at the time, setting up a website was way out of reach for most people, so they had to pay the big bucks.

Fast forward twenty years, and the tools for building websites and applications have proliferated explosively. WordPress has taken over the world, with hundreds of millions or billions of sites in existence. There’s a host of CMS options (Wordpress, Joomla, Drupal), tons of packages in all the major programming languages, and on and on. And now there are tools like Weebly and Squarespace that allow you to build a website with no knowledge of HTML, CSS or other languages - just drag and drop. There are so many tools, it can be hard to decide what’s best for the job at hand. The upside, though, is that a person familiar with the right tools can build a beautiful, distinctive, functional website in a matter of days or even hours.

Site Generator overview

Enter another alternative for building modern websites: the static site generator.

Static site generators have a couple of major benefits. The primary one is performance: when pages are rendered to HTML before being uploaded to the server, and all the web server has to do is deliver the html file, sites load much faster and use fewer resources. Invisible to the user, content management systems are making multiple database calls and doing lots of computation to generate the HTML that the users sees. When the web server doesn’t have to do this, it can serve several times as many pages with the same amount of system resources. Another benefit is security: when you don’t have to run a database and other applications to generate content, your web server is much harder to hack.

The Hugo experience

I decided to try Hugo after a period of doing a lot of work on WordPress and Joomla sites. WordPress is a great tool, and there’s a reason why it’s so widely used, but it still won’t meet everyone’s needs. Joomla (which I’m a huge fan of) is more robust and gives the developer a lot more options, but often there is non-trivial programming required to get the site to act the way you want it to. Drupal is incredibly powerful, but way too much for most users. A Systems Science colleague of mine mentioned Hugo in a meeting one day, and I instantly took to the idea of a static site generator. Why run a database and dynamic content generator when you’re just serving a blog site, which is just text and images?

Hugo isn’t for everyone. If you don’t have any experience with websites, or you just want to get something up and going as quickly as possible, there are probably better options for you. GitHub Pages, for example, lets you get a website up and going with literally just a few clicks; there are only a handful of themes to choose from, but they can be customized to make the site look distinctive. Hugo isn’t quite that easy, but once you get familiar with the basic commands and the file structure, you can get a lot done very quickly, with an immense amount of options and control over your look and feel. With WordPress, I often felt like once I chose a theme, there really wasn’t too much room to customize (only the range of options that the theme creator provides). But with Hugo, if you have a bit of familiarity with HTML and CSS, you can modify a theme endlessly to get exactly the look you’re going for. Coders and others comfortable working at a command line will appreciate the experiencing of working with Hugo.

Hugo has a lot of options, but the basic workflow is pretty simple. When in development mode, which is where you’ll spend most of the time, Hugo provides its own fast web server for previewing your site. running

hugo server --buildDrafts

will run a webserver at localhost that will let your preview your website and reload changes on the fly as you make them, which makes for rapid development. Hugo uses markdown, the lightweight formatting language made popular by GitHub - you create your pages as markdown (.md) files, and when you run the hugo command, hugo renders your page content into HTML and css based on your theme and customization. This makes getting new content up pretty quick and easy. You can generate a new post with

hugo new post/my-new-post.md

then type up your content in the new file using markdown, and the next time you run hugo the new content will be detected and rendered automatically, along with an updated sitemap. When you’re ready to deploy, the hugo deploy command gives you a whole range of options for quickly deploying to GCP, AWS, or Azure from the command line. I’m using Dreamhost, so I just upload files via ftp or ssh, which is quick and easy.

I use atom, the text editor created by GitHub, which provides a lightweight but very capable IDE for just about any language. Full git/gitHub integration makes it easy to use version control for your website files. When your web content is stored in flat files instead of in a database, it’s simple to set up version control and easily update your remote repository with a couple of clicks or commands. It’s even possible to integrate git with most hosting providers, so that updating your repo automatically pushes files to your webserver also:

Hugo / atom workflow

So overall my experience with Hugo is very positive. It’s not for everyone, or for everyone project, but that’s true of any tool. I would still use WordPress, Joomla, Django, or some other tool depending on the application, but Hugo definitely has a place in my web toolbox now. Here are a couple of Hugo resources to get you going: