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

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.

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