2019-10-21 04:22:28 -04:00
---
2023-07-29 05:15:54 -04:00
title: Host on GitLab Pages
2022-02-28 04:37:27 -05:00
description: GitLab makes it easy to build, deploy, and host your Hugo website via their free GitLab Pages service, which provides native support for Hugo.
2019-10-21 04:22:28 -04:00
categories: [hosting and deployment]
keywords: [hosting,deployment,git,gitlab]
menu:
docs:
2023-05-22 10:43:12 -04:00
parent: hosting-and-deployment
2019-10-21 04:22:28 -04:00
toc: true
aliases: [/tutorials/hosting-on-gitlab/]
---
## Assumptions
* Working familiarity with Git for version control
2022-02-28 04:37:27 -05:00
* Completion of the Hugo [Quick Start]
2019-10-21 04:22:28 -04:00
* A [GitLab account ](https://gitlab.com/users/sign_in )
* A Hugo website on your local machine that you are ready to publish
2022-02-28 04:37:27 -05:00
## BaseURL
2019-10-21 04:22:28 -04:00
2022-02-28 04:37:27 -05:00
The `baseURL` in your [site configuration ](/getting-started/configuration/ ) must reflect the full URL of your GitLab pages repository if you are using the default GitLab Pages URL (e.g., `https://<YourUsername>.gitlab.io/<your-hugo-site>/` ) and not a custom domain.
## Configure GitLab CI/CD
2019-10-21 04:22:28 -04:00
2022-02-28 04:37:27 -05:00
Define your [CI/CD ](https://docs.gitlab.com/ee/ci/quick_start/ ) jobs by creating a `.gitlab-ci.yml` file in the root of your project.
2019-10-21 04:22:28 -04:00
{{< code file = ".gitlab-ci.yml" > }}
variables:
2023-08-07 04:35:12 -04:00
DART_SASS_VERSION: 1.64.1
HUGO_VERSION: 0.115.4
2023-07-29 05:15:54 -04:00
NODE_VERSION: 20.x
GIT_DEPTH: 0
GIT_STRATEGY: clone
2019-10-21 04:22:28 -04:00
GIT_SUBMODULE_STRATEGY: recursive
2023-07-29 05:15:54 -04:00
TZ: America/Los_Angeles
image:
name: golang:1.20.6-bookworm
2019-10-21 04:22:28 -04:00
pages:
script:
2023-07-29 05:15:54 -04:00
# Install brotli
- apt-get update
- apt-get install -y brotli
# Install Dart Sass
- curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
- tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
2023-08-07 04:35:12 -04:00
- cp -r dart-sass/ /usr/local/bin
2023-07-29 05:15:54 -04:00
- rm -rf dart-sass*
2023-08-07 04:35:12 -04:00
- export PATH=/usr/local/bin/dart-sass:$PATH
2023-07-29 05:15:54 -04:00
# Install Hugo
- curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb
- apt-get install -y ./hugo_extended_${HUGO_VERSION}_linux-amd64.deb
- rm hugo_extended_${HUGO_VERSION}_linux-amd64.deb
# Install Node.js
- curl -fsSL https://deb.nodesource.com/setup_${NODE_VERSION} | bash -
- apt-get install -y nodejs
# Install Node.js dependencies
- "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
# Build
- hugo --gc --minify
# Compress
- find public -type f -regex '.*\.\(css\|html\|js\|txt\|xml\)$' -exec gzip -f -k {} \;
- find public -type f -regex '.*\.\(css\|html\|js\|txt\|xml\)$' -exec brotli -f -k {} \;
2019-10-21 04:22:28 -04:00
artifacts:
paths:
2023-07-29 05:15:54 -04:00
- public
2022-02-28 04:37:27 -05:00
rules:
2023-07-29 05:15:54 -04:00
- if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
{{% /code %}}
2021-04-20 14:21:45 -04:00
2022-11-17 10:14:29 -05:00
## Push your Hugo website to GitLab
2019-10-21 04:22:28 -04:00
Next, create a new repository on GitLab. It is *not* necessary to make the repository public. In addition, you might want to add `/public` to your .gitignore file, as there is no need to push compiled assets to GitLab or keep your output website in version control.
2022-02-28 04:37:27 -05:00
```bash
2019-10-21 04:22:28 -04:00
# initialize new git repository
git init
# add /public directory to our .gitignore file
echo "/public" >> .gitignore
# commit and push code to master branch
git add .
git commit -m "Initial commit"
git remote add origin https://gitlab.com/YourUsername/your-hugo-site.git
git push -u origin master
```
2022-11-17 10:14:29 -05:00
## Wait for your page to build
2019-10-21 04:22:28 -04:00
That's it! You can now follow the CI agent building your page at `https://gitlab.com/<YourUsername>/<your-hugo-site>/pipelines` .
After the build has passed, your new website is available at `https://<YourUsername>.gitlab.io/<your-hugo-site>/` .
2022-11-17 10:14:29 -05:00
## Next steps
2019-10-21 04:22:28 -04:00
GitLab supports using custom CNAME's and TLS certificates. For more details on GitLab Pages, see the [GitLab Pages setup documentation ](https://about.gitlab.com/2016/04/07/gitlab-pages-setup/ ).
[Quick Start]: /getting-started/quick-start/