The blog is built using Hugo - a fast and modern static site generator written in Go, and designed to make website creation fun again.

A dynamic site generally creates a page from scratch for each visit, usually by fetching data from a database and combining it with templates. Dynamic sites are suitable for content that changes very often. Static sites on the other hand take very little if any input from visitors to the site. They are very suitable for blogs, help documentation, guides etc. The pages are assembled only when the content changes and the same pages are served to every visitor.

While dynamic sites are more flexible, they generally place more demand on the server they run on. They can also be more difficult to distribute globally if databases are involved. Static sites don’t require databases and can be hosted on any server and are easy to distribute.

The greatest difference between a static site generator and a traditional web application stack, is that instead of waiting until a page is requested and then generating its view on demand each time, a static site generator does this in advance so that the view is ready to serve ahead of time. And it does so for every possible view of a site at build time. See What is a Static Site Generator

A static site generator is a collection of HTML and text files that are organised in a particular way. Because it is based on static files it is very fast and can be easily served. There is no need for setting up a database server. The software is easy to follow. You can set up a nice blog website fairly quickly with Hugo.

See creating this website using Hugo in the projects section.

There are many great themes out there to choose from to make a very nice looking site. If you are familiar with markdown then it is easy to write blog posts. You can change themes easily.

You can also use version control such as Git to keep track of changes over time as well as backup the files on GitHub.

Hugo has a quick start guide which outlines how to get up and running very quickly with a new new Hugo site. There is a list of themes at themes.gohugo.io that can be used to create a very nice looking site. The quick start guide uses the Ananke theme. There are many other themes that can be used to build a very nice looking site and certainly nicer than this site currently looks!

There is also the option of adding comments to the blog using Disqus. I haven’t looked at this yet as I am currently just writing to myself!

There are other options for hosting a blog such as WordPress. However now that I have become somewhat familiar with programming, Python in particular, I always end up trying to figure out what the code is doing. I don’t like using code that I don’t understand. It feels a bit like cheating! I started creating a GitHub pages site which uses Jekyll which is another static site generator that is built with Ruby. However I am not at all familiar with Ruby so I decided to stick with Hugo for now.

I am following a book that is mentioned on the list of External Learning Resources to build this site. It is a work in progess!

There is another option I have seen mentioned which are Python based. I think it is called Pelican. I will look into that. It might be easier to work with Jupyter notebooks in Pelican. I have used Jupyter notebooks quite a bit, particularly for college projects. There are ways of converting the Jupyter notebooks into blog posts. Sometimes however the raw HTML tables do not convert well.

---

Some notes on creating this blog using Hugo. As I am not a website developer I will probably not use the correct terminology here!

Hugo has a built-in command that will generate a website project which includes all the files and directories needed to get started. hugo new site <sitename>

hugo new site blog will create a blog directory containing the following files:

• archetypes: Markdown templates for the various types of content such as posts, projects etc.
• config.toml file for the configuration variables for the site.
• content directory to hold the content for the site
• data directory to hold data files in YAML, JSON or TOML.
• layouts folder to define how the site will look
• static directory for images, CSS, JavaScript
• themes folder to hold themes that you can create yourself or download.

Creating Content

The command hugo new can be used to create content for the site.

• hugo new content/_index.md to create a home page. -hugo new content/about.md to create an about page
• hugo new content/contact.md to create a page called contact

Themes

You can download a theme or you can create your own. There are many themes shown here to choose from. Some can be quite complex but they usually provide some guide on how to use them.

You can create your own theme using hugos new theme command:

hugo new theme my_theme will create a new theme called my_theme.

This should be done from the root directory of the site. It will create a new theme in the themes directory. The new themes directory will contain several subdirectories and files including an archetypes directory, a static directory and a layouts directory. The layouts directory contains some default HTML templates and The layouts/index.html file is the home page layout. All these files will be empty.

Instead of creating the files for layouts in the root directory of the site, you can instead create these files in the themes layouts folder. You can create or download several themes to the themes folder. In the config.toml file you can Hugo the name of the theme you are using.

Content Blocks and Partials

Instead of writing the same code over and over you can use templates and partials. Partials will contain different parts of the HTML pages that you can reuse. Instead of having to create a NAV section, footers, headers etc for each page you can create partials for the different parts of a page and then pull them into the pages you want to build. This will also help to make the website consistent.

The layouts folder create by hugo new theme command includes the following (empty) files:

• 404.html
• a _default directory containing:
  • baseof.html base template that all pages build on, can use partials for the different sections of the page such as header, footer, head etc.
  • list.html template for list pages such as lists of projects, blog posts, categories etc
  • single.html template for single pages such as the about page.
• index.html template for the home page layout
• A partials folder containing partial templates used in the base.html template.
  • footer.html
  • head.html
  • header.html

The partial function takes a filename and a context for the data. When a partial is called into another file using a partial function, the name of the partial (for example “head.html”) is placed between a double set of chain brackets. To access data such as the title and content for a page the context is passed in to the partial function along with the filename.

A dot . after the name of the partial refers to the current context for the partial. The default context for a layout is the Page context, therefore passing a . to the partial makes the Page context available to the partial.

---

Some notes on making the blog.

Hugo does not clean up the public folder and therefore to remove or rename a page you need to remove or delete the generated versions from the public folder as well. hugo --cleanDestinationDir

``hugo –cleanDestinationDir –minify` to remove the whitespace characters and make the file size smaller and therefore the site will download faster for visitors to the site.

• rm -r public && hugo to remove the public folder and generate a new one.

• hugo --gc enable to run some cleanup tasks (remove unused cache files) after the build