What is hugo

hugo is a static website generator. It build website from content written in Markdown to static HTML. Also it can be easily themed by themes from https://themes.gohugo.io/.

Installing hugo in Ubuntu 24.04 LTS

There is three different methods for installing hugo in Ubuntu 24.04 LTS:

  1. apt repository.
  2. github repo .deb package.
  3. snap package.

I opted for snap package because it will be updated regularly. All we have to do is to issue the following command:

$ sudo snap install hugo --channel=extended

Creating hugo new sites

Just run give the directory name for the command hugo new site as follow:

$ hugo new site nail-tech-notes

You will get the following answer from bash:

Congratulations! Your new Hugo project was created in /home/nail/Projects/hugo/nail-tech-notes.

Then change to the site directory:

$ cd nail-tech-notes

Adding a theme

first we must to init the git repo:

$ git init

then add the submodule hugo-PaperMod.git by issuing the command:

$ git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

we can configure hugo.toml to use the theme PaperMod. The content of hugo.toml is:

baseURL = "https://el-jaouari.cloud/"
locale = "en-us"
title = "Nail's Tech Notes"
theme = "PaperMod"

[params]
  description = "A Hugo-powered tech blog"
  ShowReadingTime = true

[menu]
  [[menu.main]]
    name = "Home"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "Posts"
    url = "/posts/"
    weight = 2

Creating content and building the site

To create an new entry/post just issue the command:

$ hugo new content posts/setting-up-hugo.md

it responded with the following text:

Content "/home/nail/Projects/hugo/nail-tech-notes/content/posts/setting-up-hugo.md" created

To build the site just issue the command:

$ hugo

the response was:

Start building sites … 
hugo v0.161.1-ea8f66a7ce988664dcc84c052fc96757042e2e4a+extended linux/amd64 BuildDate=2026-04-29T13:56:01Z VendorInfo=snap:0.161.1

WARN  deprecated: .Language.LanguageDirection was deprecated in Hugo v0.158.0 and will be removed in a future release. Use .Language.Direction instead.
WARN  deprecated: .Language.LanguageCode was deprecated in Hugo v0.158.0 and will be removed in a future release. Use .Language.Locale instead.

                  │ EN 
──────────────────┼────
 Pages            │ 10 
 Paginator pages  │  0 
 Non-page files   │  0 
 Static files     │  0 
 Processed images │  0 
 Aliases          │  2 
 Cleaned          │  0 

Total in 234 ms

There was two warning about deprecated API, so I issued:

$ grep -rn .Language.LanguageDirection .

it gives me:

./themes/PaperMod/layouts/baseof.html

All we have to do is to change in baseof.html “.Language.LanguageDirection” keyword by “.Language.Direction” sans double quote. Then I greped for .Language.LanguageCode by running the following command:

$ grep -rn .Language.LanguageCode .

it gives the following files:

./themes/PaperMod/layouts/_partials/templates/opengraph.html
./themes/PaperMod/layouts/rss.xml

then changed the deprecated API accordingly.

Now we issue again the command:

$ hugo

It comes clean with the following text:

Start building sites … 
hugo v0.161.1-ea8f66a7ce988664dcc84c052fc96757042e2e4a+extended linux/amd64 BuildDate=2026-04-29T13:56:01Z VendorInfo=snap:0.161.1


                  │ EN 
──────────────────┼────
 Pages            │ 10 
 Paginator pages  │  0 
 Non-page files   │  0 
 Static files     │  0 
 Processed images │  0 
 Aliases          │  2 
 Cleaned          │  0 

Total in 140 ms

Running the development server

It suffice to run the following command:

$ hugo server --bind 0.0.0.0 --baseURL http://192.168.122.101:1313/

It comes cleanly with:

Watching for changes in /home/nail/Projects/hugo/nail-tech-notes/archetypes, /home/nail/Projects/hugo/nail-tech-notes/assets, /home/nail/Projects/hugo/nail-tech-notes/content/posts, /home/nail/Projects/hugo/nail-tech-notes/data, /home/nail/Projects/hugo/nail-tech-notes/i18n, /home/nail/Projects/hugo/nail-tech-notes/layouts, /home/nail/Projects/hugo/nail-tech-notes/static, /home/nail/Projects/hugo/nail-tech-notes/themes/PaperMod/assets/{css,js}, /home/nail/Projects/hugo/nail-tech-notes/themes/PaperMod/i18n, /home/nail/Projects/hugo/nail-tech-notes/themes/PaperMod/layouts/{_markup,_partials,_shortcodes}
Watching for config changes in /home/nail/Projects/hugo/nail-tech-notes/hugo.toml
Start building sites … 
hugo v0.161.1-ea8f66a7ce988664dcc84c052fc96757042e2e4a+extended linux/amd64 BuildDate=2026-04-29T13:56:01Z VendorInfo=snap:0.161.1


                  │ EN 
──────────────────┼────
 Pages            │ 10 
 Paginator pages  │  0 
 Non-page files   │  0 
 Static files     │  0 
 Processed images │  0 
 Aliases          │  2 
 Cleaned          │  0 

Built in 17 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) 
Press Ctrl+C to stop

Now it should serve the webpage cleanly.

Deploying the site

to deploy the site just copy the content of directory public/ to the remote webserver:

$ rsync -avz public/ user@webserver:/var/www/my-site/

Addendum

When generating the site the HTML files have links (href) with the absolute URLs, which is the IP address of development machine. So it is necessery to change the configuration file (hugo.toml) to indicate that links are relatives. Now the configuration file is:

baseURL = "https://el-jaouari.cloud/"
locale = "en-us"
title = "Nail's Tech Notes"
theme = "PaperMod"
relativeURLs = true

[params]
  description = "A Hugo-powered tech blog"
  ShowReadingTime = true

[menu]
  [[menu.main]]
    name = "Home"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "Posts"
    url = "/posts/"
    weight = 2

Finally generate the site by running the following command:

$ hugo --config hugo.toml