Blog server setup with Hugo + GitLab Pages

Learn how to set up a blog server using Hugo + GitLab Pages. It's free.

Goal

Below is a configuration diagram (example) of a blogging environment with Hugo + GitLab Pages. The goal here is to create a Hugo content repository (including themes and CI/CD container definitions) and a directory to be published as a website in GitLab, manually launch the container, and build/publish the sample website.

Assumption

I will assume that you have a Free GitLab account with GitLab SaaS available.

Procedure

Create a directory in GitLab that will be published as a Hugo content repository and website

1. log in to GitLab with a browser.

2. Press New project button.

3. Press Create from template button.

4. Press Use template in Pages/Hugo record.

5. Enter Project name, select Visibility Level, and press Create project button to create a project containing a Hugo content repository and a directory to be published as a website.

Build and publish a sample site with Hugo's CI/CD container

1. Open CI/CD-Pipelines screen of the project.

2. Press Run pipeline button.

3. Press Run pipeline button again, and the build will be completed in about 30s to 60s.

4. Open Settings-Pages of the project.

5. Open the URL indicated by Your pages are served under: to see a sample site that has been built.

Note
: The sample site will be displayed with a broken layout at this stage, but it will be displayed correctly after applying the theme of your choice and making the necessary settings.
See "Theme" for theme selection/application and "GitLab Pages development client setup with Visual studio Code" for development client setup required for theme application/configuration.