If you’re looking to create your own site like this, the secret is Hugo and Gitab pages.

I wanted something simple, flexible and out of the way, allowing me to focus on creating content. Hugo does that, with the added benefit of being fast too.

Hugo became the clear winner for my use case. I don’t have a need for user accounts, comments or merchandise making a static site work.

Gitlab pages became the cherry on top, hosting my site for free, no messing around with servers or web hosts. The only limitation is my project can be no larger then 10GB.

Compared to Github pages with a limit of 1GB size and 100GB bandwidth per month. While I will not hit that any time soon, it’s less to think about.

Here’s how I set up Hugo and Gitlab pages.

Setting up Hugo

Install Hugo and git with your systems package manger, for arch:

pacman -S hugo git

Run the following to create a site directory, and git repository:

hugo new site [site-name]
cd [site-name]
git init

Choose a theme from here, most themes have installation instruction on them. If not, you need to copy it into [site-name]/themes directory.

Set up your config file as per the theme instructions. This is generally the longest part depending on how much you want to customise.

Now might also be a good time to start up the local server, so you can view your changes.

In your sites directory run:

hugo server

Next navigate to localhost:1313 to see your site in action.

Now we’re all set up, create your first page by running:

hugo new posts/[page.md]

The page will be under content/pages/[page.md].

Edit the page with your favourite markdown editor. I’m using Sublime Text with the Markdown Editing plugin, and this page as a handy reference.

Deploying to Gitlab pages

Gitlab uses it’s own CI system to build the site. To tell it how we need to add a .gitlab-ci.yml in our site directory with the following content:

image: registry.gitlab.com/pages/hugo:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  only:
  - master

Next create a project on Gitlab.

Then push the site by running the following:

git remote add origin git@gitlab.com:[username/projectname]
git add .
git commit "my site"
git push origin master

After a few moments for Gitlab to receive and build the site, you should be able to visit it at https://[username].gitlab.io/[project]/.

If you created a private project, only members of the project will be able to see the site. To allow anyone to see it navigate to Settings > General > Visibility > Pages and set visibility to everyone.

Custom domain and certificates

This part is optional, and is the only section with a cost attached.

First, you need have purchased your domain name from a provider such as namecheap.

Then navigate to Settings > Pages > New Domain and enter your domain name. Make sure Automatic certificate management using Let's Encrypt is set. Then click Create New Domain.

This page will show the records that need adding to our DNS settings. One CNAME or A record with our domain name and Gitlab mapping. The second a TXT record verifying the domain name.

Once you’ve added the records, back on Gitlab hit retry verification.

It can take up to 48 hours for the DNS to propagate. But when this is complete, your site should be available at your purchased domain.

Conclusion

As you can see, from start to finish the process was simple. Now the hard part, creating all the juicy content for your site.

You can find more documentation about Hugo here, and Gitlab pages here.