How to setup your own gitlab page

Deployed with CI/CD and Hugo

Prerequisites:

  • Have a gitlab account
  • Have a good reasonable understanding of git (cloning, commiting and merging)

Introduction

I used to have a wordpress blog, in which i placed all posts manually. As i work alot from git, i went to look for a more automated solution.

Gitlab page (forking a project)

This gitlab page will be forked from hugo.

  1. View the sample projects by navigating to the GitLab Pages examples group.
  2. Click the name of the project you want to fork.
  3. CHoose Hugo
  4. Fork this project
  5. Project name: “personal blog”
  6. Namespace: <your username>
  7. Project slug: <username>.gitlab.io
    If it is a project within your namespace. You can name it after the projectname (ie: blog)
    Please be aware that if you name it after <username>.gitlab.io, the page will be reachable via <username>.gitlab.io. Else the project will be reachable via <username>.gitlab.io/<projectname>
  8. Visibility level: private
  9. Go to the project.

Gitlab page (configuration)

  1. Clone your repo and open it in your favourite IDE (if you prefer, else use oldschool vim or nano ;-))
  2. Open the config.toml file and alter the baseurl variable:
baseurl = "https://<username>.gitlab.io"

or

baseurl = "https://<username>.gitlab.io/<projectname>"
  1. You can change some text to your liking here. For example in the [Params] and [Author] section.

Gitlab page (content)

  1. Your blog posts will be created in content/post/
  2. The format is as follows: YYYY-MM-DD-some-kind-of-title.md
  3. If you so desire you can remove all other blog posts
  4. Create a folder public in content/

Gitlab page (deploying)

In order deploy your page we’re going to use the automated pipeline from gitlab. Which configuration can be found in .gitlab-ci.yml.

Default the repo has two branches: ‘dev’ and ‘main’. I urge you to work in ‘dev’ and merge into master.

example on how to commit and push to gitlab (remote)

git add .
git commit -m "super cool addition"
git push -u origin dev

When you have commited and pushed to origin dev go to the project repo on gitlab and merge the dev branch into main. You have 400 mins of gitlab runner time per month. So for now you can use the shared gitlab runners. In addition you can build your own gitlab runner, see my other blogpost on this topic.

First a test will be performed by the CI/CD. After that you will have to manually click merge. When merging, be sure to check whether you have Delete source branch enabled

After you have merged the pipeline will start working and your page will be published. Goto https://<username>.gitlab.io or https://<username>.gitlab.io/project to see your published blog.

Gitlab page (https and custom domain)

  1. Go to https://gitlab.com/<username>/<username>.gitlab.io/pages or https://gitlab.com/<username>/<projectname>.gitlab.io/pages
  2. Check Force https (required valid certicates)

For an explanation on adding your own custom domain. Please refer to Setup DNS and Cloudflare

Used documentation: