Imagine you’re building a house. First, you have to build the foundation. That’s the framework (Hugo). Then you build the house on the framework: you add walls, windows, doors, etc (your blog).

Background

Congratulations! You built your blog using Hugo as the foundation. Now it’s time to connect your blog to a live audience. Let’s do that with Netlify, shall we?

Netlify is a cloud computing company that offers hosting and serverless backend services for web applications and static websites. (If you understand this kindly skip the next two paragraphs.)

If that is a lot of technical mumbo jumbo, think of it this way. After building your house, you need to connect electricity into it. You have two options: You could choose to generate your electricity or just use services by existing power-holding companies. Generating your own electricity is just a daunting task. You would spend a lot of effort, time, space, and money. The overhead is just difficult (well except you’re a masochist). On the other hand, you could just use the services from a power holding company. It saves you the effort of generating your own electricity. Once you pay a monthly fee, you’ll have the exact amount of electricity you need. Easy-peasy.

Netlify is a bit similar to a power holding company. Cloud service providers operate just like power companies. Many companies do not have or do not want to spend the money, resources, or time on building and maintaining their own data centres, so they rent from those that do.

You’ve put in the effort to setup your blog with Hugo, so it’s time to make sure your audience sees your articles.

Assumptions

  • First, I’m assuming you have an account with GitHub.
  • You have Git installed on your computer.
  • You do not have a Netlify account

Configure your Hugo project

Before you deploy your Hugo blog, create a file name netlify.toml in the root of your Hugo project and copy the following contents into the file:

[build]

  command = "hugo --gc --minify -b $URL"

  publish = "public"

[build.environment]

  HUGO_VERSION = "0.70.0"

  HUGO_ENABLEGITINFO = "true"

[context.production.environment]

  HUGO_ENV = "production"

Deploy to GitHub

The scope of this post is on Nelify and not GitHub. However, here is a complete guide on how you can deploy your project to GitHub.

Create a Netlify Account

  • Visit app.netlify.com and create an account. I advise you to create an account using GitHub as your preferred signup method.
  • Once you’re in, click on ‘new site from Git’ and choose GitHub as your Git provider.
  • Next, select your Hugo repository you want to use for continuous deployment.
  • For the purpose of this post, you’ll be deploying from the master branch. Make sure your settings are similar to the image below.

Build, Deploy, and Launch

Now you can click on the “Deploy site” button which will immediately take you to a terminal showing you the build processes.

If all things go well, you will receive a prompt letting you know that the deployment was successful. You’ll be assigned a URL automatically generated by Netlify. Click on the link to view your blog live.

Viola!

Resources

Hosting on Netlify