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
- Create a GitLab account
- Create a new project. Name it username.gitlab.io (replace username with your username).
Additional steps if you have a domain:
- Go to the page settings for your project, available at
- Add your new domain.
- Save the verification code shown. You’ll need this in the next step.
Configuring DNS with Cloudflare
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.
These steps are optional, but recommended.
- On the “Crypto” tab in the dashboard. Set
Always Use HTTPS.
- Add Origin Certificate from Cloudflare to GitLab
- Redirect www.domain.com to domain.com. The
CNAMEwill 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.
- Start by following the official Quick Start Guide.
- Add your files to the GitLab page repository you created in a previous step.
- Create a file in the root of the project called
.gitlab-ci.ymland add the content from here.
- 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.