Quick tutorial on getting Hugo running on Netlify.

My first blog I ran used Greymatter next it was Movable Type. Next I wrote my own blog software and ran that for years finally giving up and moving on to Wordpress.

I’ve been wanting to try a static blog generator for a while and Hugo was exactly what I was looking for.

I didn’t want to host the blog myself so I looked around for other affordable and reasonable options. Time and time again Netlify rose to the top of the list.

From downloading Hugo to having Netlify publish my blog took around 20 minutes.

Installing Hugo

Hugo is written in Go and thus runs on multiple platforms. I’ll be installing Hugo on Windows 10. You can find information on how to install Hugo on your platform here.

I already had Chocolatey installed so it was just a matter of running:

choco install hugo

Verify that Hugo installed correctly:

hugo version
Hugo Static Site Generator v0.36 windows/amd64 BuildDate: 2018-02-05T15:23:01Z

Configuring Hugo

Now you need to create a new Hugo site:

hugo new site blog

This will create a new folder called blog. Change directory to blog.

cd blog

You’ll need to have your blog under git version control to work with Netlify, so lets create a new git repo now.

git init

Next head over and pick a theme from for your blog here. This is required. Hugo won’t know how to display your blog if you haven’t installed a theme first.

Once you’ve found a theme you like change directory to the themes folder and clone the theme to this folder.

For example, I chose the Tranquilpeak theme for my blog.

cd themes
git submodule add https://themes.gohugo.io/hugo-tranquilpeak-theme/ 
git submodule update --init --recursive

Next copy the config.toml file from your theme’s folder to the root of your blog folder. You can fine-tune this file later.

Now create a new git repository to hold your new blog. I’m using Bitbucket but Github and Gitlab work just as well.

After you’ve created your repository commit and push your changes to your remote git repository.

git add .
git commit -m "Initial commit"
git push origin master

Netlify setup

If you don’t have an account with Netlify, head over to their site and sign up for an account - it’s free!

You can signup with Netlify using your Github, Gitlab, Bitbucket credentials or with an email address.

Netlify signup options

I chose to use my Bitbucket credentials.

Once logged in, click on the Netlify new site from Git button.

Netlify new site from Git

Now Netlify is going to ask you which repository would you like to pull from. Select the repository you created earlier.

Netlify select git repository

Now Netlify will ask you which branch you would like to deploy and what commands should Netlify run to build your site and what directory directory to publish your site too.

Netlify deploy settings

Click Deploy Site. Netlify will now pull your blog project, build it and deploy it.

You site will be available on a random url such as minature-wookies.netlify.com.

If you’re not down with minature-wookies, head over to the Domain Management menu and change your subdomain. You may also add a domain name you’ve already registered.

Wrap up

Again, I highly recommend Netlify. I would easily pay for this free service if I could. Great job Netlify!

This blog is now running on Netlify using a domain I registered. I also have SSL running with a free certificate provided by Let’s Encrypt that was provisioned by Netlify.

I’ve also created a custom Netlify build file.

Hope this helps and would love to hear your experiences using Hugo and Netlify.