Host Hugo on Netlify

Welcome back to part two of my adventures in building a blog using a static site generator (Hugo), and deploying to Netlify each time I push code to my master branch in Github.

Dependencies

• An account with Github, Gitlab, or Bitbucket
• A custom domain name you have already purchased
• You have completed the exercises in Part One and have a Hugo website ready to deploy

What we will accomplish

• Create a Netlify account
• Configure Netlify deployment
• Configure Netlify to use a custom domain name
• Configure custom Netlify deployment settings

Create a Netlify account

Head on over to https://app.netlify.com and select your preferred option to sign up for an account. In this case, I am going to select Github.

Configure Netlify Deployment

Next, create a new site:

Once you sign up, you will be asked to authorize the Netlify application. Select Authorize application

Authenticate to your Git repository and select the repository containing the blog we worked on back in Step 1:

Next, keep the default settings and select deploy site (if you use a different branch than master for your production blog, change the name of the branch)

Configure Netlify to use a custom domain name

You should now see the overview page for your new application. Once deployed, select Set up a custom domain

Enter your desired domain information, and select Add:

You should now see your domain with a message saying to Check DNS configuration. Click on that, and enter the provided DNS information into whichever service provider manages your DNS records:

Once done, wait a few minutes for DNS settings to propagate, and then select Verify DNS configuration:

Behold, your site is now live!

Configure SSL for Netlify

Automatically provision SSL certificate

Netlify offers the option to use Let’s Encrypt to automatically provision a certificate for your application. To do so, simply select Provision certificate

Note: It can take quite some time for the certificate to be generated, be patient.

Bring your own certificate

To use your own certificate, just select Provide your own certificate and supply the relevant information:

Configure custom Netlify deployment settings

We have one final step before we are truly ready to use Netlify. Unfortunately, the version of Hugo used by Netlify is somewhat outdated by default. However, we can fix this by creating our own configuration for Netlify to follow when deploying our site!

First, create a file called netlify.toml in the root of your repository, and then add the following configuration:

 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.74.3"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

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

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

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

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

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

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

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

There we go! We will now be using the latest version of Hugo (as of this blog post) to deploy via Netlify!