Deploy a Hugo site to Netlify

Netlify is a convenient hosting platform for staticly built sites, like those built with Hugo, as it offers fast and cheap delivery of HTML files. In this tutorial, we will quickly run through how you can take your site from your local computer and push it out to the world-wide web.

You’ll need:

  • a Netlify account setup
  • a Github account
  • Hugo installed on your PC with a site ready to go

Step 1) Create a Repo on Github

If you haven’t already, you will need to create a repository on Github and upload your site to it.

Create Repo on Github

Step 2) Add Netlify Settings

Next you’ll need to create a file in the root of your website (alongside your config file) called: netlify.toml

This file is what will control how your project builds, what versions of Hugo are used and where the files are kept.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.92.2"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.92.2"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.92.2"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.92.2"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

Once that’s done, we’ll move onto the Netlify platform.

Step 3) Create your Site on Netlify

Login, then under the ‘Sites’ tab you should find a ‘Add new site’ button.

Under the menu, click ‘Import an existing project’.

netlify: create site

Connect to your Github account by clicking the gray button.

netlify: connect to github

Pick your new repo:

netlify: pick repo

Click ‘Deploy’!

netlify: deploy

Round-up

It should be as simple as that - there will be some more settings to change afterwards I’m sure. Most people will want to add a custom domain of their own and tweak some of the settings - but as basics go, that’s all there is to it.

If you’re after some futher reading, you might be interested in setting up Netlify functions to add dynamic functionality to your site using Go. These can help you process contact forms, search and user management on your website.

Good luck!