Blogging with Hugo and GitLab (1): Quick Start

Building your own blog website is easy today. With only a few steps, you will be able to create your own blog website which can be visited at https://username.gitlab.io.

Why Hugo?

If your goal is to build a static website (which is good enough for personal blogs), there are several solutions today to help make such process easy and automatic. Basically what you need to do is to write some Markdown docs and they will help you convert them into static HTML files. Among those options, Hugo is known to be the fastest one in terms of static page building, since it's written in Go with compilation while the others are based on interpretation.

Why GitLab?

GitLab offers free service of GitLab Pages for hosting static websites. The GitLab Pages service also provides native support for Hugo, which makes it extremely easy and convenient to build and deploy your webiste without replying on any other third-party supports.

If you are convinced, the first step is to create an account in GitLab. Note that your username in GitLab will be the sub-domain name of your website's URL such as https://username.gitlab.io.

Create your website repository

Since our goal is Hugo+GitLab, the easiest way is to fork the official Hugo repository in GitLab.

1. Go to Hugo's repository on GitLab
2. Login with your GitLab account.
3. Fork this repository.

Some further configuration:

1. Remove the forking relationship, which won't be necessary unless you want to contribute back to the upstream project.
   "Settings" > "General" > "Advanced" > click "Expand"
   Click "Remove fork relationship".

2. Rename the repository, so it will be linked to your website's URL https://username.gitlab.io.
   "Settings" > "General" > "Advanced" > click "Expand" > "Rename repository"
   "Project name": username.gitlab.io
   "Path": username.gitlab.io
   Click "Rename project".

3. Mark your repository as private--if you only want people to visit your website through the URL, but not be able to view your repository.
   "Settings" > "General" > "Visibility, project features, permissions" > click
   "Expand"
   "Project visibility": Private
   click "Save changes".

4. Update the base URL in config.toml.
   

diff --git a/config.toml b/config.toml
--- a/config.toml
+++ b/config.toml
@@ -1,4 +1,4 @@
-baseurl = "https://pages.gitlab.io/hugo/"
+baseurl = "https://username.gitlab.io"

After a couple of minutes, you will be able to visit your website at https://username.gitlab.io.