DEV Community

Cover image for Blog server setup with Hugo + GitLab Pages
ayaco
ayaco

Posted on • Edited on • Originally published at ayaco.gitlab.io

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.

Blogging environment with Hugo + GitLab Pages : Server position

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.

Caution
: As of January 2025, some errors occur in step 3 and the build fails. Please apply a another theme.

Top comments (0)