The Final Stretch
Thank you for sticking around this long, you’ve come so far and we’re finally ready to publish our Hugo site in Gitlab.
If you haven’t already please create a GitLab account and a create a new empty project named as so username.gitlab.io.
Now, lets add the GitLab remote repo as the destination that we will push our local repo to
git remote add origin https://gitlab.com/username/username.gitlab.io.git
To check if you had successfully added the remote repo run the following command
git remote -v
Before we push the repo to GitLab there are couple of things that we need to do;
- Create a GitLab CI/CD yaml file
- Add the public folder into the .gitignore file
Gitlab requires you to have a yaml file in your root folder named
.gitlab-ci.yml in order to run the CI/CD pipeline and deploy the site to GitLab pages.
image: registry.gitlab.com/pages/hugo/hugo_extended:latest variables: GIT_SUBMODULE_STRATEGY: recursive pages: script: - hugo artifacts: paths: - public rules: - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
Copy the YAML code above and paste it into the YAML file within your root folder
Next, make sure the
baseURL in your site configuration reflect the full URL of your GitLab pages repository if you are using the default GitLab Pages URL (e.g.,
https://<username>.gitlab.io/<your-hugo-site>/) and not a custom domain.
With that out of the way, all that we need to do next is add the public folder to our gitignore file so that we don’t push it to the remote repo and then we can push the rest of our repo to GitLab.
# 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
That’s it! You can now follow the CI agent building your page at
After the build has passed, your new website is available at
Alternatively, you can use resources such as Netlify or Render to host your site in order to get custom domain names such as
sitename.netlify.app if you use Netlify or
sitename.onrender.com if you use Render.
Thank you so much for reading this guide and if you have any questions or came across any difficulties, feel free to comment below and I will get back to you as soon as I can.
comments powered by Disqus