Notes:

  • Images not copied here yet

Links

  1. Link to my older repo
  2. Tutorial Evanto Tuts
  3. Installing Hugo
  4. adding path to an executable file
  5. link to my website
  6. link to hugo features

Motivation

I want to learn how to build a website, because I need to have a way how to present myself online.

Why HUGO

It can do the websites using just markdown, which I am able to work with and do not want to learn anything extra.

Preparations:

I watched the video of the tutorial last week and made notes about it.

Overview

1. what is hugo and how to install it

Hugo is a static website generator. Needs to be installed from a site gohugo.io

Installation on ubuntu 24.04

They suggest installing the extended version
Decided to install from the 24.04 snap store in hope I avoid the dependencies hassle.\

Prerequisities

  1. Git must be installed (have it)
  2. Go must be installed (need to check)
  3. What is my infrastructure?

Create a new website:

Video Time: 07:34 Using cmd go into a folder where I want to make the website
hugo new site hugo-demo -f yml

Created the folder with all the folders

2. picking a theme for your website

There is a lot of themes available for free on the website.

Installing the papermod template: Using git bash:

  1. navigate into the hugo-demo folder and then paste:
  2. git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1 ‘https://’ must preced the ‘github.com’, by some mistake it may not be rendered properly here

This clones the papermod folder into the themes folder

UPDATE: Actually it is necessary to include the PaperMod as a submodule (meaning it will get updated when they change the code).
The way to do it is described here.\

  1. clone the repository git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod
  2. intialize the submodule repository: git submodule update --init --recursive

Video time: 11:09
To activate this theme we need to edit the configuaration file config.yml in the site folder.
This did not result in creation of a config file (as of 19.2.2024) so you need to make a new config.yml.\

Lets use atom for This:
baseURL: ""
languageCode: en-us
title: Vladimir Demo for Hugo
theme: PaperMod\

After this is done I go into the terminal:
hugo server &

Or even better go hugo server --buildDrafts & which will build it even with the drafts set to true

This activates the server on my computer and I can see the website in my browser on localhost:1313, the ampersand will keep it running in the background so that i can still use the shell.

and it is visible in the browser!

3. adding content to your website

Overview of the folders:

  1. Contents For the posts and stuff like that
  2. Layouts For overwrites of the themes, make a copy here and change
  3. Static For static content of the website, such as images

Contents

To create a new post:

$ hugo new posts/first.md This created content/posts folder and a new file in that folder called first.md which uses the yaml format.
when I change to draft: false gets directly into the website

Tested the different options of the markdown formatting, all is in the first.md

For the first lines of the post when viewed on the main page of the website the markdown formatting is not applied.

Inserting images

Video time:21:34
To insert image into a post use the syntax ![](<path-to-image>).
By default hugo searches in the /static folder so to add an image in /static/images/image.jpg use the ![](/images/image.jpg) in the markdown.

To insert a cover image? I copy the image called test.jpg into static\img and include it in the yaml header together with the alt and caption it should have: cover:
image: img\\test.jpg
alt: 'This is a post image'
caption: 'This is a caption'

Layouts for changes/use of the the themes

Video time: 23:35\

adding a menu on the upper right hand side

Is done be changing the config.yml file
adding menus
Repeated this for all the categories, the weight parameter decides the order of the items.
This works very nice.
adding menus result However the archives page is not defined yet, so lets make the page!

Make a new page “Archives” according to a layout called archives.html

Video time: 25:50

  1. create a new file archives.md in content folder with following header:

This creates the page according to a layout theme which is in the:
themes/PaperMod/layouts/_default/archives.html file\

Make custom changes to the layout

copy the file from the original place to:

layouts/_default/archives.html
and here change whatever you want to change.
We added <hr> on the line 5 of the archives.html.
However this did not work for me, needed to copy all the files from the original theme for it to start working Video time: 28:04

How to add tags and Categories by changing the yaml header

More modifications

  1. links for full images
  2. breadcrumbs for navigation
  3. Show reading time
  4. Show share buttons
  5. Show post nav links

\

And it works!

Skipping more advanced modification at 35:34 such as adding the logo.

Static is for images

4. publishing a website

Video time: 37:14

To build the website use: $ hugo
This builds a website and makes public folder which is then used for hosting.
apparently this is not really needed for the netlify build using github which he will show so I deleted it.

Because of the git repo being up from the hugo folder I copied it into documents and started a new repository There create .gitmodules using:
$ touch .gitmodules\

And modify it this way:
[submodule "themes/PaperMod"]
TAB path = themes/PaperMod
TAB url = "https://github.com/adityatelange/hugo-PaperMod.git"

Publish the repository to github as a PUBLIC.

Netlify part

  1. Log in Netlify
  2. Import from Git
  3. Asks where to install-> select a repository just a single one
  4. Change the “Build command” to “hugo”; publish directory as “public”
  5. Advanced build settings New variable: HUGO_VERSION Value: 0.101.0 Get the hugo version running $ hugo version

After it is deployed it gets a weird link, which needs to be integrated back into the config.yml in baseURL.

Some duplicite instructions

create a folder for a website using hugo

  • go into directory
  • hugo new site <name-of-site>
  • creates folder of this name with subfolders
  • go there and initialize a git repository git init and then git add * and then git commit -m "new site started

get the papermod theme

  1. Check on PaperMod github what version of hugo should work with (30/3/2024 is >0.112.4)
  2. get the papermod theme as a submodule git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod
  3. update the repository git submodule update --init --recursive
  4. add the theme = 'PaperMod' into hugo.toml

Check the website

  1. hugo server -D & makes the website with drafts
  2. create a new post called first posthugo new content/posts/first-post.md
  3. edit the first post echo "# First Headline" >> content/posts/first-post.md; echo "First line" >> content/posts/first-post.md
  4. reload in the browser to see the changes

Build the website

  1. Build the website with drafts hugo -D, will create a public folder needed for the display on internet
  2. stage all content in git git add *
  3. commit with a message `git commit -m “first build”
  4. go to the github desktop and push to remote or do it from command line git push

Allow netlify to access the repository

  1. Log in Netlify
  2. Import from Git
  3. Asks where to install-> select a repository just a single one
  4. Change the “Build command” to “hugo”; publish directory as “public”
  5. Advanced build settings New variable: HUGO_VERSION Value: 0.101.0 Get the hugo version running $ hugo version This is very important in order for the theme to work properly