A collection of notes on making this website using the Hugo open-source static site generator. Hugo uses the Go language. There is a quick start guide which outlines how to get up and running very quickly with a new Hugo site.

In summary:

To create a site:

• hugo new site mysite will create a new Hugo site in a folder named ‘mysite’ with the following elements:

.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

https://gohugo.io/getting-started/directory-structure/

• cd mysite
• hugo new theme mytheme to create a new theme
• echo theme="mytheme" >> config.toml or using an editor
• tree command will show the tree structure of the theme directory
• hugo server to start the server, then go to local host ‘http://localhost:1313/.’ in the browser.

Hugo uses templates that contain HTML as well as Go variable and functions. These are under the ‘layouts’ directory. Partials are context aware components to avoid repeating yourself in the templates and are stored in a ‘partials’ folder within ‘layouts’. They are used for head, headers, footer,sidebars, navbars etc

• Default layouts in the ' /layout/_defaults' folder include ‘baseof’, ‘list’ and ‘single’.

  • baseof os the base template for all pages and should reference the different partials such as the head, header, footer, sidebar etc. As a default template it is the shell from which all other pages are rendered.
  • list partial is used to display the list of posts on the site. It inherits all the code from the base template.
  • single for displaying a single page.

• The homepage is the landing page at the root of the website

• A 404 page can be customised to show an error message when a link is broken

• A configuration file ‘config.toml’ (or yaml or json) tells Hugo what template it should use for the site. A menu can be added to the config file to allow navigation to different sections. Specify the theme to use.

• To style the website, add some CSS style sheetsin the static/css folder

• To use Bootstrap, download bootstrap from https://getbootstrap.com/ or use a CDN. Move the ‘bootstrap.min.css’ to the ‘static/css’ folder

• Icons can be used.

Creating content:

While posts can be manually created in the content folder, there is a hugo command that can be used to create posts that will include dates, titles etc. Archetypes can be added for different content sections. These will allow you create consistent starter post with predefined fields in the front matter.

• hugo new posts/first-post.md creates a new post called ‘first-post’ in the posts section of the content folder. You can create many different sections and have a different archetype for each one.

• The actual content of the post goes below the front matter. Hugo automatically takes the first 70 words of the content as a summary and saves it to a ‘.Summary’ variable. You could also define where the summary ends using <!--more--> dividers.

• A post can be created as a draft by setting the draft to true in the front matter of the post. Drafts do not get published until set to false. However you can preview the draft post on the local server using hugo server -D. The -D flag means to include content marked as draft.

Building the site:

• hugo will build the site and put the output into the .public folder by default. The destination folder could be changed by setting a different publishdir in the config file or by using the -d/--destination flag. A

While the default templates will be used for all pages, you can specify alternative list and single page layouts for different content sections such as a blog or projects section. Hugo has a (https://gohugo.io/templates/lookup-order/)[lookup order] to use for a given page, starting from the most specific.

---

• Creating a website using Hugo

• Blog post on making this blog

• Using Markdown blockquote

• Side by side images in a markdown post

• Variables and params in Hugo

• Hugo: Using page bundles

• page bundles post

• Syntax highlighting

• Archetypes and Templating

• Using shortcodes

• Images

• Some more notes on Hugo

• Background images

---

Title and LinkTitles In the front matter of a post, the title is automatically created from the name of the file. For example hugo new projects/myproject/page1.md will create a file page1.md in the myproject project of the content/projects section. A linktitle can also be added to the front matter. This can be used as the title that will appear on the page instead of the title.

title: "page1"
linktitle: "Section 1: Thr first page of the post"

---

Navbar

Instead of creating a nav with links to the various sections, create the navbar that uses the variables defined in the config file. The order the items appear depends on the weight assigned.

---