Apply Beautiful Hugo

Goal

Below are the components of a blogging environment with Hugo + GitLab Pages. The goal here is to change the theme body in the GitLab Hugo theme/content repository to Beautiful Hugo, replace the theme settings/content with the Beautiful Hugo sample, change the CI/CD settings for Beautiful Hugo, and build/publish the sample site.

Assumption

This explanation assumes that you have a server environment with GitLab Pages/Hugo templates and a development client environment with Visual Studio Code.

Application method

Modify theme body, theme settings/contents in Visual Studio Code

1. Delete all Hugo repository assets managed by Visual Studio Code except for /.gitlab-ci.yml.

2. Open BeautifulHugo’s project in your browser, download all files and copy them to the / of your Hugo repository assets managed by Visual Studio Code. in your Hugo repository assets managed by Visual Studio Code.

   Hugo repository assets
   ├ content          ← copy the download(/exampleSite)
   ├ layouts          ← copy the download(/exampleSite)
   ├ static           ← copy the download(/exampleSite)
   ├ hugo.toml        ← copy the download(/exampleSite)
   ├ go.mod           ← copy the download
   └ .gitlab-ci.yml
   

3. Open /hugo.toml in Visual Studio Code and change baseurl to root URL of the sample site, comment out theme = “beautifulhugo” and uncomment theme = "github.com/halogenica/beautifulhugo".

4. Open go.mod in Visual Studio Code and add -example at the end of the module name.

   module github.com/halogenica/beautifulhugo-example
   

Change CI/CD settings in Visual Studio Code to match the theme

1. Delete /.gitlab-ci.yml in the Hugo repository assets managed by Visual Studio Code.

2. Open .gitlab-ci.yml for GitLab Pages/Hugo template in your browser, download it, and copy it to the / of the Hugo repository assets you manage in Visual Studio Code.

3. Open /.gitlab-ci.yml in Visual Studio Code, change image to hugo:std and change THEME_URL to BeautifulHugo.

   ...
   image: hugomods/hugo:std                         ← change (hugo:exts is also acceptable)
   
   variables:
     HUGO_ENV: production
     THEME_URL: "github.com/google/beautifulhugo"   ← change
   
   default:
     before_script:
       - hugo mod get -u $THEME_URL
   ...
   

Upload changes made in Visual Studio Code to GitLab

Upload the modified assets to GitLab using Visual Studio Code in your browser.

Check the build/publish results done automatically in GitLab

Check build/publish results.