User profile picture

Bhavabhuthi (Bobby)

@bhavabhuthi
💬 Work from home
  • bhavabhuthi
  • README.md

Example Hugo website using GitLab Pages.

Learn more about GitLab Pages at the official documentation.

Deprecation of container registry

As of 2025-01-16 (MR), this project relies on the Docker image of https://docker.hugomods.com. The last version of Hugo uploaded in the container registry is 0.140.2. You're advised to replace registry.gitlab.com/pages/hugo/hugo_extended:latest with hugomods/hugo:exts.

  • GitLab CI/CD
  • Set baseURL in config.toml
  • Building locally
  • Use a custom theme
    • Use a custom theme using a Hugo module
  • hugo vs hugo_extended
  • GitLab User or Group Pages
  • Did you fork this project?
  • Troubleshooting
    • CSS is missing!
    • Minify the assets

GitLab CI/CD

This project's static Pages are built by GitLab CI/CD, following the steps defined in .gitlab-ci.yml.

Set baseURL in config.toml

Update the baseURL setting in your config.toml file from "https://pages.gitlab.io/hugo/" to your deployed Pages URL.

Building locally

To work locally with this project, you'll have to follow the steps below:

  1. Fork, clone or download this project.

  2. Install git, go, and npm.

  3. Install Hugo.

  4. Install the theme as a Hugo module:

    hugo mod get -u github.com/adityatelange/hugo-PaperMod
  5. Preview your project:

    hugo server
  6. Add content.

  7. Optional. Generate the website:

    hugo

Read more at Hugo's documentation and how to use the theme.

Use a custom theme

Hugo supports a variety of themes.

Visit https://themes.gohugo.io/ and pick the theme you want to use. In the Pages example, we use https://themes.gohugo.io/themes/hugo-papermod/.

Use a custom theme using a Hugo module

The example .gitlab-ci.yml uses Hugo modules to import the theme.

To use your own theme, the following steps will help you recreate the hugo modules that include the information of your theme. You must perform them locally:

  1. Edit config.toml and comment out the already existing theme:

    #theme = ["github.com/adityatelange/hugo-PaperMod"]
  2. Remove go.mod and go.sum:

    rm -f go.mod go.sum
  3. Recreate the theme module:

    hugo mod init gitlab.com/pages/hugo
  4. Recreate the checksum:

    hugo mod get -u github.com/adityatelange/hugo-PaperMod
  5. Edit config.toml and add the theme back:

    theme = ["github.com/adityatelange/hugo-PaperMod"]
  6. Finally, edit .gitlab-ci.yml, and replace the THEME_URL variable with the URL of your theme:

    THEME_URL: "github.com/adityatelange/hugo-PaperMod"
  7. Remove the files under content/ as they might be specific to the default theme.

  8. Add content under content/.

  9. Commit all the changes and push them to your repository.

hugo vs hugo_extended

NOTE: As of 2025-01-16, this project relies on the Docker image of https://docker.hugomods.com. The last version of Hugo uploaded in the container registry is 0.140.2. You're advised to replace registry.gitlab.com/pages/hugo/hugo_extended:latest with hugomods/hugo:exts.

The container registry contains two kinds of Hugo Docker images, hugo and hugo_extended. Their main difference is that hugo_extended comes with Sass/SCSS support. If you don't know if your theme supports it, it's safe to use hugo_extended since it's a superset of hugo.

The Container Registry contains three repositories:

  • registry.gitlab.com/pages/hugo
  • registry.gitlab.com/pages/hugo/hugo
  • registry.gitlab.com/pages/hugo/hugo_extended

pages/hugo:<version> and pages/hugo/hugo:<version> are effectively the same. hugo_extended was created afterwards, so we had to create the pages/hugo/ namespace.

See how the images are built and deployed.

GitLab User or Group Pages

To use this project as your user/group website, you will need to perform some additional steps:

  1. Rename your repository to namespace.gitlab.io, where namespace is your username or groupname.
  2. Change the baseURL setting in your config.toml, from "https://pages.gitlab.io/hugo/" to baseURL = "https://namespace.gitlab.io". Proceed equally if you are using a custom domain: baseURL = "https://example.com".

Read more about GitLab Pages for projects and user/group websites.

Did you fork this project?

If you forked this project for your own use, please go to your project's Settings and remove the forking relationship, which won't be necessary unless you want to contribute back to the upstream project.

Troubleshooting

CSS is missing!

That means two things:

  • Either that you have wrongly set up the CSS URL in your templates.
  • Or the baseURL in config.toml is not corretly set. For more information see issue https://gitlab.com/pages/hugo/-/issues/18.

Minify the assets

If you want to minify the assets (JS, CSS, images, etc.), take a look at the Hugo documentation and at this merge request.

Activity

View all
Loading
There was an error loading users activity calendar.
  • Loading

Personal projects

View all
  • Loading
Loading

About

Free and Open Source Enthusiast.

Info

Hyderabad
Member since February 06, 2018

Contact

bhavabhuthi
twitter.com/bhavabhuthi