How I Made This Webpage (Part 3)

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;

1. Create a GitLab CI/CD yaml file
2. 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 https://gitlab.com/<username>/<your-hugo-site>/pipelines.

After the build has passed, your new website is available at https://<username>.gitlab.io/<your-hugo-site>/.

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.

• ← Previous Post
• Next Post →