Using Hugo with Netlify

Wednesday, May 24, 2017 2 minute read

Welcome to the newest version of my blog, now using Hugo to generate its pages. Go seems like an interesting language, and I really enjoy picking apart the architecture of SSGs, so this seemed like a nice project to dive into.

One thing I enjoy right off the bat is that everything is a page. I have strugged with SSGs that are entirely focused on blogging, and it's made me really hesitant to attempt to port all of my old blogs into it. This time, it feels right. I can build my portfolio projects using the same architecture as my music projects and blog posts.

On top of all that, I've moved my site from GitHub Pages onto Netlify! I can push my Hugo site to a private repository on GitLab and Netlify's continuous integration service will generate the site in less than 30 seconds. It's pretty easy, but just in-case I'll outline the steps I took below.


Getting Started with Hugo

After struggling to get started with Hugo, I discovered that the main Hugo docs aren't written by a native English speaker. This makes some concepts a little more difficult to grasp than others. Fortunately, there is an effort to re-write them by a technical writer, which you can find at http://hugodocs.info. The only other resource I found valuable was their Discourse forum, but it was mostly a lot of trial and error getting the site to work.

Hugo on Netlify

Since Hugo is still rapidly evolving, I needed a way to set my version number to take advantage of the latest features. You'll have to create yet another .toml file in your repository's root directory called netlify.toml. You can set the Hugo version like this:

[context.production.environment]
  HUGO_VERSION = "0.24"

Also, since I am using syntax highlighting, I need the server to have Pygments installed. To do this, create yet another file in your repository's root, titled requirements.txt, and place the following text:

Pygments==2.1.1

The only build command you need to set is simply hugo.

Setting Up Cloudflare

I use Cloudflare for my domain's DNS, mostly because I enjoy their https rewrite rules. To use Cloudflare with your Netlify server, you'll need to do two things:

  • Set the A record address for '*' to 104.198.14.52
  • Change the CNAME 'www' alias to be <username>.netlify.com

You're All Set

That's it! I use GitLab to host my site's repository, but you could easily do this with one of the many providers Netlify supports.

Comments