Skip to main content

How to post your blog on GitLab?

So you have heard the news that GitHub is going to be bought over by Microsoft for 7.5 Billion. Yes that's right. Lots of people are switching to alternatives, in fear of Microsoft ruining the party. Honestly I think that new Microsoft has done a lot in the open source space. I mean, just looking at the amount of projects that Microsoft have opened source over the past few years. I think that this recent acquisition is not a bad thing after all.

Maybe you are like me, you only hosted your website on GitHub and now that the acquisition has occurred, you thought about hosting your webpage on other hosting as well. And it just so happened that you realized that GitLab supports hosting pages as well. The reason I use GitLab is to host my private repositories, I didn't really use its other feature. Now that the deal is done, I thought it would be interesting to evaluate the different hosting website as well.

Without further ado, let me guide you through the process of hosting the website on GitLab.

1. Create a new project

When creating the project, there are a few options, but for my case I named the project as USERNAME.gitlab.io which is similar to how to create my blog in GitHub.

2. Commit the blog to GitLab

This step is different to creating a page for GitHub because, for GitHub, I would just commit the html/css (generated by the static generators) to the repository. However for GitLab, it is a little different as the pages are generated by GitLab using their CI/CD tool. Therefore for the GitLab repository, I committed my whole blog, meaning to say in GitHub, I would commit my blog skeleton files in one repository and the static generated output pages onto my USERNAME.github.io project, however for GitLab, I committed my skeleton onto my USERNAME.gitlab.io repository and have a CI/CD file that GitLab will run and build my page from.

This is useful in GitLab because I would not need to maintain two repositories. Also in the last post, I talked about how I pushed my blog to GitHub. For the case of GitLab, I would just commit the posts that I want and let the CI/CD tool handle the pushing of the webpage for me.

3. Set up CI/CD

Go to GitLab's project page and click on Set up CI/CD, here GitLab have a few templates that you can choose from. Depending on the static generators used. There are templates for popular static generators like Jekyll, Hugo, Hexo. As for myself, I am using Nikola, thankfully there is a sample page where you can clone from and learn how they host.

I am currently using Nikola and there is certain things to take note. Firstly, when running Nikola build (to generate the webpage), it will output to a folder named output. GitLab's pages however requires the generated output to be in this public folder. Hence, we can either set the output folder to public in the config.py file. Personally for me, I want to keep it as output.

Therefore what I did was to edit the CI/CD file to have additional steps to move from the output to the public folder. I found out about this from the troubleshooting section of the sample Nikola page.

4. Wait for CI/CD to complete the job

After all the things have been done, you now wait for the CI/CD task to complete and make sure that all jobs passed. When it all passed, head over to settings > page and you will see a link below. It should say something like USERNAME.gitlab.io

Happy blogging.