How I built this website (part II)

Intro

In the previous post I explained how I used Hugo to build a static website. Once you have you content generated, your next step should be to put it somewhere so it can be reached. This can be a directory shared by your own webserver, a hosting service.. but let’s make it more interesting.

Using a Git repository

By using a git repo, you can store and track changes of your files. Knowing why and how to use a git service is beyond the scope of this post.. anyway I’m sure that you are familiar with git services like GitHub, GitLab or Bitbucket. In my case, I use a free account in GitLab.

Uh.. and by the way, I would never consider myself a software developer or programmer, so excuse me if I explain things with a more “ordinary” language.

So, the first thing you need to do is create a repo for our new website and push there our local hugo folder. You don’t need to generate the published static content (in the public/ subdir), this will be generated for us by other means.

One last thing: because our theme (PaperMod) was installed form another repo, we don’t want to mess up things, so we need to tell git that the theme subdirectory is a separate git “structure” that came from somewhere else. We do this by creating the following file in our “hugo” folder:

.gitmodules

[submodule "themes/PaperMod"] 
  path = themes/PaperMod
  url = https://github.com/adityatelange/hugo-PaperMod.git

Defining a CI/CD job

Explaining CI/CD (Continuous Integration and Continuous Delivery/Deployment) is also beyond the scope of this post, but let’s say that CI/CD allows us to automate what happens when we publish a new release of our code/content. These “instructions” will be executed by a “CI Agent” or “runner” (let’s imagine a server or docker container running with hugo also installed).

In GitLab this “instructions” are defined by creating a new file in our hugo directory:

.gitlab-ci.yml

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

After we commit and push our code to the main branch we can follow the CI agent building our page.

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

You can also register a domain name and point it to gitlab pages (with it’s corresponding SSL certificate).