hugo 0.24

Let's Start from the Basics: Part 6

Hugo and Netlify. How to deploy our new site?

If you followed the entire series “Let’s Start from the Basics”, you’ll have a complete new website. The next step is to make it available online.

An awesome app to deploy our new site is Netlify. You can create a FREE account with them, upload your content to github or bitbucket, and you’ll have your website online for free. No paying for hosting!

You can also create a paying account in Netlify to get even more from them and you’ll probably need a domain name too. You can get a free domain name from dot.tk, but I would only recommend it for testing sites or playground sites, never for a more serious website. You won’t have control over your domain and they can take it again if they want. Popular websites to buy a domain name are NameCheap and GoDaddy.

Uploading the website to GitHub

In my case, I’m using GitHub, but you can use BitBucket too.

Note: Don’t forget to remove git from your theme if is a downloaded theme from github.

First thing, we need to make sure we have git on our project. If you write git status on your console from your project root directory and you get something like:


fatal: Not a git repository (or any of the parent directories): .git

You don’t have Git. So, write:


$ git init
$ git add .
$ git commit -m "First commit"

Now, we are ready to “push” our code to GitHub. Form GitHub website, create a new project and fill out the needed fields.

new project on GitHub

Go back to the console and write:


$ git remote add origin https://github.com/aida-martinez/dg-my-new-site.git

Don’t forget to replace the url (https://github.com/aida-martinez/dg-my-new-site.git) for the one that GitHub gave to your new project.

And push your code:


$ git push -u origin master

You probably will need to write your username and password for the command to make its tasks.

login GitHub

Go to your GitHub repository and your code will be there.

Note: empty files won’t show up.

Netlify App

Create an account in Netlify, if you don’t already have one, and create a new site from Git.

Choose GitHub and Authorize Netlify. Choose the correct repository or do a search.

Last thing we need to fill out is which branch we want to use, in our case “master”, and write the basic build settings. Build command: hugo Publish directory: public

new project on Netlify

Hit “Deploy site”!

Fixing Errors

When I deployed this site I encountered some errors. I fixed them by including a netlify.toml file on the root folder with:


    [context.production.environment]
      HUGO_VERSION = “0.25”

This will say to Netlify that your Hugo version is 0.25 and that is the one they need to use to deploy the site.

Change the name of your site

Netlify will give you a random name for your site and an url. You can customize the name by going to settings and “Change the site name”. The name you pick must be unique, so be original.

From the “Settings” page you can also set up a domain name. If you don’t need one, you can keep the one that Netlify gives you. In my case: https://dg-my-new-site.netlify.com/

Fixing the url issues

If you visit your new site, you’ll notice that is not loading the css properly, amound other things. This is because in our config.toml files we still have the localhost as our base url: baseURL = “http://localhost:1313/"

Change this to the new url and:


$ git add .
$ git commit -m "Fixing broken links"
$ git push origin master

Netlify will pick up your changes and deploy the website automatically. Isn’t it great?!

Visit again your new website and everything will look perfect!

Avatar author

Web developer. Always learning.

Let's share this!