Definitive Guide on how to deploy your Hugo website to Netlify 🌐

Hey everyone, today I am going to show you a definitive guide on how to deploy your Hugo website entirely on Netlify, I will start from the beginning, by showing how to do a simple website on Hugo until the deployment, enough talk let’ start the guide !!!

Installation: (There are two version of Hugo the standard one and the extended one that has better support for Sass)

-Windows: You can install Hugo on windows by using the following command if you have chocolatey installed:

Command to install Chocolatey if you don’t have it installed yet:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
choco install hugo-extended -confirm

This will use the chocolatey package manager for windows that you can have a better look into it here if you don’y have this installed yet (highly recommend).

-MacOS: For the MacOS we will use brew which is a package manager for Linux and Mac, if you don’t have it installed yet you can have a look here, the following command will install brew then hugo:


ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install hugo

-Linux: You can install on linux using brew, snap , or their own package manager

snap install hugo --channel=extended

Debian or Ubuntu:

sudo apt-get install hugo 

Arch Linux:

sudo pacman -Syu hugo

Fedora, Red Hat and CentOS :

sudo dnf install hugo

Alright now that you have this installed go to your favourite code editor (mine is Visual Code Studio) and use the following command to create the structure a Hugo website:

hugo new site <name of your website>

Now a new folder will be created go inside, now in this directory is where we will work from now on, make sure to stay on it during the whole process otherwise you may encounter some errors. Now we will install a theme that you can choose from this gallery https://themes.gohugo.io/ , alright now to install the theme go to download and then you will be redirected to a GitHub page of the theme, THIS PART IS EXTREMELY IMPORTANT IF YOU DON’T USE THIS METHOD YOUR DEPLOYMENT WILL PROBABLY NOT WORK ON NETLIFY. You will have to fork the theme first so then you can change the CSS of the file, if you don’t fork it, you will be using the CSS from the original repository there blocking you from customizing your website further, if you have never forked anything before what it does is to make a copy of the entire repository from the original creator and create the same one but on your name instead.

Image

Now go will be redirected to your new forked repository on it you can change whatever you want without worrying about affecting the original, now you will use the following command on the themes directory inside the folder that was created when we type the last command:

Image

Now type this command inside the folder:

git submodule add https://github.com/<your name on github>/<name of the repository>

Mine will be like this: 

git submodule add https://github.com/indiafoxtrot/terminal

The reason why we can’t simply type git clone is because there is an error that happens in which the site can’t be properly deployed but by using git sub module everything works just fine (it has happened to me)

Alright, now we can start modifying our themes and add new posts, each theme has a different way to set up, more information can be found scrolling down to the README file of the Github repository. But what is mostly the same for all themes is that you will have to copy what is inside the config.toml folder of the new repository that you have copied and paste inside your config.toml that is at the main directory, then you can add a new post and other endpoints to your website I will show how mine ended up.

Command to run website on local host the flag D means that it will show the draft posts too, you have to run this command on the same directory where your config.toml file is located !!!

hugo server -D 
Image

Cool now that our site has worked it is time to create a repository on GitHub, I will suppose that you already know how to do so, if you have no idea what I am talking about watch this very informative video showing how to use it but what you will mostly do is create a new reporsitory on GitHub and type the following command on a terminal that is located at the same directory as your website (make sure to change the origin URL):

git init

git commit -m "first commit to blog"
git branch -M master
git remote add origin https://github.com/user/example.git
git push -u origin master

Now it is time to publish our website and trust me that will be the easiest part compared to all of the walkthrough. Go to https://www.netlify.com/ and create a free account then go to Sites and click on New site from Git:

Image

Now you will be directed to log in to your git hub account, agree with everything then you will be directed to choose which repository is your site located at, click on the desired one and then type the following:

Image

Your Hugo version will probably be different to check it you have to type “hugo version” on your terminal then the only thing that will change will be the value after changing the value you can click on “Deploy site” then in about 3 to 5 minutes your website will be created 🙂

Something that I will note is that on your config file you have to write the baseurl that Netlify has provided to you or the custom domain that you will use to host your website on, otherwise, it will not load the CSS files properly, therefore, causing the website to only display the raw HTTP content !!!

Image

Adding a custom domain and adding SSL/TLS:

Go to site settings then Domain management now click on change site name, you now can add your custom domain name but first, you will have to own it of course, after confirming that the domain is yours you will need to go to your domain provider and then connect the custom Netlify domain to it for the substitution can be made, everthing is well documented right in this page so I will not go too much in depth on it. To activate the free SSL/TLS on your website you have to go back to Domain management and at the bottom of the page, there will be an option telling to activate a free SSL using let’s encrypt. Go ahead and activate it. Now to make your website force redirection to https instead of HTTP (which means no matter how the person accesses your website it will always be redirected to the https page) you will have to add the following code to the .htaccess file usually under the public folder on the main directory of your website folder:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

Substitute https://example.com to your custom domain instead then save and submit the changes to GitHub and that is it !!! All your website connections will be encrypted as of now !!!

Leave a Reply :)