Setting Up Hugo on Ubuntu

Before we dive in, make sure you’ve identified a theme for your site - otherwise, nothing will appear with Hugo. To avoid permission issues and other headaches, I recommend removing any snap installation of Hugo (like mine) since it doesn’t play nice with NFS file shares. Instead, install Hugo via the command:

sudo apt install hugo

Create a New Site

To get started, navigate to the desired location in your terminal or command prompt by running cd followed by the path where you want to create your new Hugo project. Next, execute the following initial Hugo command to set up a subdirectory with your chosen site name:

hugo new site blog.cue4net.com

you should see a response like this:

Congratulations! Your new Hugo site was created in /yourPath/blog.cue4net.com.

Just a few more steps...

1. Change the current directory to /yourPath/blog.cue4net.com.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

This will create a basic directory structure for your website within the specified location.

Installing a Theme

Navigate back into your Hugo project’s root directory and install the theme of your choice.
I have chosen this one:

Simply clone it using this git clone command:

git clone https://github.com/vaga/hugo-theme-m10c.git themes/m10c

Via the upper command it will be cloned into the subdirectory m10c of the folder themes of your site’s root directory.

Configuring hugo.toml for the Theme

After cloning the theme from GitHub into the themes folder, you’ll need to update the hugo.toml file to reflect the new theme. By default, this file remains unchanged after pulling in a fresh theme. The first and most crucial step is to inform Hugo that it should utilize the “m10c” theme now available under the theme folder. To do so, add the following line to your hugo.toml file:

theme = "m10c"

Given you have done a fresh hugo installation the file should look like this now:

baseURL = 'https://blog.cue4net.com/'
languageCode = 'en-us'
title = 'Public Notes'
theme = "m10c"

Further Customizing the Theme

After configuring Hugo to use the “m10c” theme, you can further customize its appearance and behavior by tweaking various parameters and variables. To discover what options are available for customization, take a look at the official webpage for the m10c theme: https://themes.gohugo.io/themes/hugo-theme-m10c/.

Customizing Theme Variables

The m10c theme documentation lists several customizable variables that you can define in your config.toml file under the [params] section. These include:

  • author: The name of the author
  • description: A short description of the author
  • avatar: The path to a file containing the author’s avatar image

Additionally, you can customize the menu item separator by defining menu_item_separator. If left blank or set to its default value (" - “), this will result in a simple dash separating each menu item. To add your own favicon.ico file, specify an absolute path for it under favicon.

If you’d like to include additional menu items on your site, follow these steps: Add the following lines to your config.toml file in a new section called menu:

[[menu.main]]
identifier = "tags"
name = "Tags"
url = "/tags/"

To add social links, define them under [params.social]. For example:

[params.social]
icon = "github"
name = "My Github"
url = "https://github.com/vaga"

Customizing Theme Colors

Finally, if you’d like to change the theme’s colors, add a new section called style under [params]. To customize theme colors, simply add them to your config.toml file under [params.style]. For example:

[params.style]
darkestColor = "#d35050"
darkColor = "#212121"
lightColor = "#f5e3e0"
lightestColor = "#f5f5f5"
primaryColor = "#ffffff"

By customizing these variables, you can tailor the appearance and behavior of your site to suit your needs.

My Full hugo.toml Snapshot

baseURL = 'https://blog.cue4net.com/'
languageCode = 'en-us'
title = 'Public Notes'
theme = "m10c"
[[menu.main]]
  identifier = "about"
  name = "About"
  url = "/about/"
  weight = 10
[[menu.main]]
  identifier = "tags"
  name = "Tags"
  url = "/tags/"
  weight = 30
[[menu.main]]
  identifier = "posts"
  name = "Posts"
  url = "/posts/"
  weight = 20
[params]
  author = "Keino"
  description = "Welcome to my collection of notes. May it help!"
  avatar = "/images/LauraLogoNew.png"
  menu_item_separator = "|"
[params.style]
  darkestColor = "#212121"
  darkColor = "#212121"
  lightColor = "#c3c3c3"
  lightestColor = "#df7842"
  primaryColor = "#c3c3c3"

♥♥♥

Monero