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".

Comments

[ayaco]

Hi, Roneo.org

Thanks for your comment!
And sorry for the delay in responding.

The Beautiful Hugo project was indeed inactive, but I know that since this summer or so, Roneo has restarted the project.

Please keep it going for a long time.

[Roneo.org]

Hi,

note that Beautifulhugo is no longer maintained and recent Hugo features will probably be missing.
Discussion are ongoing, but as of now nobody is willing to update this theme and maintain it on the long run, sorry
Checkout Papermod, Bilberry or one of the numerous Hugo themes available