How I Created This Website

Introduction

This is an overview of the steps I took to create this website with GitLab pages, Cloudflare and Hugo. It’s not supposed to be a comprehensive step-by-step guide, but more of a checklist that you can follow if you want a similar website setup.

Getting a domain

Getting your own custom domain is entirely optional for GitLab pages as you get a free subdomain at your-username.gitlab.io. It’s however highly recommended that you get your own domain to prevent being locked to GitLab. Your own domain can easily be pointed to a different host if you want, but a subdomain at GitLab can never be seamlessly pointed elsewhere.

I decided to get a .se domain, the Swedish TLD (Top Level Domain). The Swedish TLD is not available at most common US registrars such as Namecheap, so I registered through a Swedish company. I chose Binero, not for any particular reason other than I have previous experience with them and they are one of the cheaper companies for .se. Any domain registrar should be fine, at least for .se domains where WhoisGuard is not needed as personal information is already hidden.

Make sure you use a registrar with WhoisGuard if you buy a different TLD with public personal information, such as .com.

Creating a GitLab page

1. Create a GitLab account
2. Create a new project. Name it username.gitlab.io (replace username with your username).

Additional steps if you have a domain:

1. Go to the page settings for your project, available at https://gitlab.com/username/username.gitlab.io/pages.
2. Add your new domain.
3. Save the verification code shown. You’ll need this in the next step.

Configuring DNS with Cloudflare

Once you have your custom domain (you can skip this section if you decided not to get one), you need to point your domain to your GitLab page. You can either configure everything through your domain registrars control panel or use Cloudflare. My reasons to use Cloudflare is that their configuration interface is MUCH better than the one at Binero, more documentation is available/up-to-date, and they provide basic analytics. Analytics at Cloudflare is great because it show the amount of visitors and from what countries they come from, all without adding any JavaScript spyware to your website, like Google Analytics.

To get started with Cloudflare, create an account, add your domain and follow the steps. One of the steps is setting the domain’s nameservers to those of Cloudflare. Setting the nameservers is done through your domain registrars control panel.

Once your nameservers have been set and Cloudflare have detected them, you can start configuring the DNS. Go to your site’s dashboard and press the DNS tab.

This is what my records looks like. Replace with your own domain and the verification code you saved from the GitLab page step above.

Additional configuration

These steps are optional, but recommended.

1. On the “Crypto” tab in the dashboard. Set SSL to Full and enable Always Use HTTPS.
2. Add Origin Certificate from Cloudflare to GitLab
3. Redirect www.domain.com to domain.com. The CNAME will already be set if you copied my records, so you only need to add a Page Rule.

Hugo static website generator

Hugo is used to generate this website. All these blog posts are written in Markdown and then converted. When using Hugo, you’ll need to pick a theme. Go through the list at Hugo Themes and pick one that you like. I picked Lithium and then configured it to my liking.

1. Start by following the official Quick Start Guide.
2. Add your files to the GitLab page repository you created in a previous step.
3. Create a file in the root of the project called .gitlab-ci.yml and add the content from here.
4. Commit everything and GitLab should automatically build your site.

You should now be able to visit and see your website at your domain and the subdomain at your-username.gitlab.io. Don’t panic if your domain doesn’t work right away, it might take a few hours for everything to be updated.