Host Your Web Made in Hugo on Netlify for FREE

You know that I am in love with Hugo to make simple websites that do not require dynamic content.

And one of the features that I like the most is that there are a lot of services that offer us to host the websites made in Hugo for free.

Today I come to talk about one of these services: netlify

If you want to learn more about Hugo, in the Premium Zone you have a Complete Course

Don't let that fool you netlify Hugo let us host our website for free.

Netlify is a professional and quality service.

Table of Contents

I tell you in video

Subscribe to my channel:

So why do they let us host our website for free?

Very simple: They are Evangelizing 🙂

How many people do you know who do not make their website in WordPress? Very few right?

Services like Netlify, Cloudflare, DigitalOcean, are offering to host your static website for free to get market share and when they get it I'm sure it won't be free.

The fact is that now we can create our website and host it on the best servers and all for free 😉

What do you need to host your website on Netlify

In this tutorial I will not explain how to install hugo nor anything that we have already explained in the Hugo course to make Static Webs.

In this tutorial we are going to see how to create a website in two minutes and how we can host it on Netlify.

So I'm going to assume that:

You have Hugo installed on your computer
Do you have an account of Github
Do you have a code editor like Visual Studio Code

Creating my website in Hugo

I enter the terminal of my computer, go to the directory where I am going to create my website and write:

hugo new site nombre-mi-web

And I get the following message:

Now I am going to add a template to my website, for this I enter the THEMES folder and bring the template from Github with the following command:

git clone https://github.com/halogenica/beautifulhugo.git

Here is the capture of this process:

Now I copy the contents of the /themes/beautifulhugo/exampleSite folder to the root of my website.

It will tell me if I want to overwrite, I say yes.

Eye

The contents of the exampleSite folder, not the folder itself.

That is, this:

Once copied to the root directory of our website, we can run Hugo's local server to see that the website works.

We have to execute the command in the root directory of our website:

hugo server

And we have to see something like this to see that everything is fine:

If everything has gone well, we go to the address that appears in the terminal. This is usually http://localhost:1313/

And we should see something like this:

Upload the website to Github

Before hosting our website on Netlify, we have to upload our locally made website to a repository on Github.

For this we use Git:

git init
git add .
git commit -m "mi primera versión"

We create an empty repository in Github and Github itself tells us the commands we have to use to upload our repository:

In my specific case, the commands to use are the following:

git remote add origin git@github.com:tolentinomh/netlify-prueba.git
                                git branch -M main
                                git push -u origin main

And now that we have everything ready, it is time to host our website on Netlify.

Upload our website to Netlify

If you don't have a Netlify account it's time to create it

My recommendation is that you create an account with GitHub and thus have an easier time importing your Github repositories into Netlify.

Once we have our account created and connected with githug we are going to create a new site:

We click on Import an existing project

On the next screen we choose the repository of our website and leave everything by default:

Now we click on Deploy Site and …

WILL FAIL 😭

But don't worry, we'll fix it easily.

You will get an error like the following:

Error

Failed during stage 'preparing repo': Error checking out submodules: fatal: No url found for submodule path 'themes/beautifulhugo' in .gitmodules

Host Your Website Made in Hugo on Netlify 5 for FREE

The good thing is that the error is very descriptive and is telling us what is wrong.

We have to go to the root directory of our website and create a file called .gitmodules.

In my case I do it from Visual Studio Code

Host Your Website Made in Hugo on Netlify 6 for FREE

The content is as follows:

[submodule "themes/beautifulhugo"]
    path = themes/beautifulhugo
    url = https://github.com/halogenica/beautifulhugo

Push changes to Github

Remember we are working locally. Whenever we make changes we have to upload them to Github

Once the changes have been uploaded with Git, remember, git add., git commit -m "your message", git push, we return to Netlify and we will see that after a few seconds or minutes it tries to generate our website again and if everything has gone well now It will not fail and will tell you Published:

Host Your Website Made in Hugo on Netlify 7 for FREE

And if you try to access the temporary url generated by Netlify you can already see your website but with a small problem: Formats and images do not appear well

This is because in the configuration file configur.toml of your website you have to change the URL to the URL that Netlify gives us and later to the real domain: