My Blog Setup - Bootstrap Blog Repository and CI/CD

As explained in my previous blog post, I have to chose Gitlab Page as it offers seamless experience on setting up my preferred Static Site Generator: Hugo and the necessary CI/CD. The CI/CD is necessary here since the public site is in HTML format, but my blog content will be in a mix of Markdown, HTML, and some templating format stuff. The CI/CD is using Gitlab CI, invoking specific Hugo command to generate all my content to HTML format.

Now, about Gitlab Page itself, this is a feature offering by Gitlab, so everyone can put static content and publish it publicly accessible from:

• https://<user>.gitlab.io/<repo-name>, if you chose the Project Site, or
• https://<user>.gitlab.io, if you chose the User or Organisation Site

I chose the first option due to the fact I maybe in future will introduce another Gitlab Page and I don’t want to mess my another blog if I chose the second option, since it has common subdomain and prefix.

The public content can be set from certain branch, I chose the default: master branch.

Okay, that’s enough for the intermezzo part. So here’s how easy it is to setup Gitlab Page

1. Create Gitlab account

2. Select New Project, and chose Create from Template and chose Pages/Hugo

   

3. Set the Project Name to my-blog. Note that it’s not my blog setup, I chose another project name, and I won’t disclose that information 😛

   

   You can set the repository as private if you want. Then hit “Create” repo button

4. Now let’s see how it goes

   The site is accessible from https://<user>.gitlab.com/my-blog. In this case, mine is https://bangau1.gitlab.com/my-blog. At the time I write this post, I get 404 not found error.

   

   This is expected by the way, since there’s one specific configuration that needs to be done, that is to change the baseurl in the config.toml file from the template. Change it to the site url, in my case it’s https://bangau1.gitlab.io/my-blog/.

   

   Normally the CICD pipeline will be triggered and here’s mine

   

   Once the CICD is finished executing, the site is accessible

   

That’s it, easy right? What do you think about the process overall? Feel free to add any comment/suggestion below :pray:

Next post, I will explain some important Hugo configuration settings, (e.g: change the avatar and favicon, the frontmatter in Hugo, etc) and how to test it on local environment.