Vivianna Cassetta

Example Hugo website using GitLab Pages.

Learn more about GitLab Pages at the official documentation.

GitLab CI/CD

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

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/theNewDynamic/gohugo-theme-ananke

5. Preview your project:

   hugo server

6. Add content.

7. Optional. Generate the website:

   hugo

Read more at Hugo's documentation.

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/gohugo-theme-ananke/.

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/theNewDynamic/gohugo-theme-ananke"]

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/theNewDynamic/gohugo-theme-ananke

5. Edit config.toml and add the theme back:

   theme = ["github.com/theNewDynamic/gohugo-theme-ananke"]

6. Finally, edit .gitlab-ci.yml, and replace the THEME_URL variable with the URL of your theme:

   THEME_URL: "github.com/theNewDynamic/gohugo-theme-ananke"

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

hugo vs hugo_extended

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.