Setting up a static site with Gitlab, Hugo, and Netlify
I was originally using Jekyll, a static site generator written in Ruby, for this site. As I always do, I got tired of using what I had and decided to use something else. I was torn between Hexo, which is built with Node.js, and Hugo, which is written in Go. I decided to use Hugo, mainly because I have enjoyed using Go a couple times in the past, and Hugo is supposed to be the fastest static site generator.
Let’s get started.
The first step is to create a new Gitlab repository for your site. To do so, navigate to the Gitlab homepage, log in, and click on the “New project” button in the top left corner.
Choose a name for the project. For this example, I’ll be using
my-website. Type a project description in the box if you wish, and set the visibility level to whatever you’d like it to be, then click on the “Create project” button at the bottom of the screen.
Don’t clone the repository quite yet. We’ll get to that later.
As I said above, Hugo is a static site generator written in Go. Static site generators are nice for websites that don’t need to have a bunch of extra stuff on them, such as simple personal sites and blogs like this one. Head to the Hugo homepage and click the “Quick Start” button.
On the quick start screen you’ll see simple instructions on how to get started using Hugo. If you have an Apple device, it’ll be easy as pie and you can follow the directions on that page. If you have a Windows desktop or laptop like I do, it’ll be a little more involved. Head to the Hugo Windows installation instructions to get going, otherwise see below if you want the quick and easy version.
The easiest way to get Hugo on a Windows machine is by using a package manager called Chocolatey. Open your command prompt as administrator and run this command, found here, to install Chocolatey on your computer:
@"%SystemRoot%\\\\\\\\System32\\\\\\\\WindowsPowerShell\\\\\\\\v1.0\\\\\\\\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\\\\\\\\chocolatey\\\\\\\\bin"
Test to make sure that Chocolatey installed correctly by running
choco on the command line.
Once that’s working correctly, you can use Chocolatey to install Hugo by running
choco install hugo -confirm. Check if Hugo installed correctly by running
hugo version to print out the version of Hugo that is installed.
“How to use Hugo” is out of the scope of this tutorial, so I’ll just point you to the next step in the Hugo docs.
Create a new site
Once that’s all done, you’re ready to create your site with Hugo! navigate to the directory where you’d like your site to live (in my case it’s
C:\\users\\Andrew Petz\\git) and run
hugo new site my-website to create a new folder with scaffolding for the new site.
Remember how we didn’t clone the Gitlab repository earlier? Now you’ll be hooking the folder that was just created to your repository. In my case, that means running these commands, taken from the Gitlab empty repository page:
git remote add origin https://gitlab.com/nannooskeeska/my-website.git
git add .
git commit -m "Initial commit"
git push -u origin master
Once you’ve hooked your repository up to the new Hugo site, you’re ready for some continuous delivery.
….almost. There’s one last thing. Make sure you have something in your
content directory before you go on, or else your build will fail. Just add a file called
_index.md and put something in there.
Now you’re ready for some continuous delivery.
Ok, so you have the Hugo site on your local machine. Now what? How do you push it to the web? That’s where a nifty little site called Netlify comes in. Netlify is able to pull in the code from your Gitlab repository and push the static content to a URL of your choosing.
Head to the link above and login or create an account. Head to your dashboard and click on “New Site from Git”. Under “Continuous Deployment”, click on the Gitlab button and allow Netlify to access your Gitlab information. Select
my-website from the list, then put “hugo” in the Build command box, and “public” in the Publish directory box. Click on Deploy Site, and voila! Your site should be up and running with a Netlify URL. There’s nothing there, but hey, I’m not here to tell you what to put on your site.
When you have Netlify builds running correctly, you’ll probably want to hook your site up to your own domain. FOr this, I use Google Domains.
Once you have bought a domain, it’s pretty simple to get your Netlify builds hooked up to it. On Netlify, you should see a link that says “Set up a custom domain”. Click on it, find the “Add custom domain” button. Enter the domain you’re going to use, then click on “Check DNS configuration. The popup will show you an IP address. Copy it.
Head over to Google Domains, select the site you want to use, and go to the “Configure DNS” page. Under “Custom resource records”, you’ll be able to enter the IP address that you copied as an A record, which will route your site to the Netlify-built static content from your Hugo site.
And that’s it!
If you followed all the steps above, you should now have a solid workflow for your website. Whenever there is a push to the master branch of your git repository, Netlify will detect it and build and publish your site within about 30 seconds. It’s how this site is built, and I absolutely love it.