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

What we will accomplish

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:

Netlify account creation

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

Connect Netlify to Github

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

Select Github repository

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)

Deploy Netlify app

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

Configure Netlify custom domain

Enter your desired domain information, and select Add:

Specify custom domain

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:

New custom domain added

Required DNS configuration

Cloudflare DNS configuration

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

Verify DNS

Behold, your site is now live!

Live site

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 so, simply select Provision certificate

Provision LetsEncrypt

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:

Provision own certificate

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!


comments powered by Disqus