Apply Beautiful Hugo

Learn how to apply the Hugo's "Beautiful Hugo" theme.

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 followed the "Server with Hugo + GitLab Pages,", "Dev client with VSCode" and prepared a server environment built with the GitLab Pages/Hugo template and a development client environment using 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. Create a symbolic link to the Beautiful Hugo repository under /themes in the Hugo repository assets managed by Visual Studio Code by running the following in the Visual Studio Code terminal.
   

   > cd (the root directory of the Git project)
   > mkdir themes
   > git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo
   

3. Copy /themes/beautifulhugo/exampleSite/* in the Hugo repository assets managed by Visual Studio Code to /.
   

   Hugo repository assets
   ├ content           ← copy from exampleSite
   ├ layouts           ← copy from exampleSite
   ├ static            ← copy from exampleSite
   ├ themes
   ├ .gitlab-ci.yml
   ├ .gitmodules
   └ config.toml       ← copy from exampleSite
   

4. Open /config.toml in Visual Studio Code and change baseurl to root URL of the sample site.

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 non hugo_extended, comment out the hugo mod description and add a git submodule description.
   

   ...
   image: registry.gitlab.com/pages/hugo:latest                   ← change
   
   variables:
     HUGO_ENV: production
     #THEME_URL: "github.com/theNewDynamic/gohugo-theme-ananke"   ← comment out
   
   default:
     before_script:
       - apk add --no-cache go curl bash nodejs
       - git submodule update --init --recursive                  ← add
       #- hugo mod get -u $THEME_URL                              ← comment out
       ## Uncomment the following if you use PostCSS...
       #- npm install postcss postcss-cli autoprefixer
   ...
   

Upload changes made in Visual Studio Code to GitLab

Implement "Upload Hugo repository assets modified in Visual Studio Code to GitLab - Dev client with VSCode".

Check the build/publish results done automatically in GitLab

Implement "Check the build/publish results done automatically in GitLab - Dev client with VSCode".