Hugo - static site generator

- 2 minutes read - 329 words

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

And this is how this web site was built - Hugo + Ananke.

Learning

  1. Learning resources
  2. Hugo documentation
  3. Hugo documentation hugo.toml

Installation and setup

Install Hugo

Debian Linux or Google ChromeOS

  1. sudo dpkg -i /mnt/chromeos/MyFiles/Downloads/hugo_extended_0.140.1_linux-amd64.deb binaries are from hugo/releases
  2. Unfortunately Debian package repo has very old version, but sudo apt install hugo still works (installs 0.111 as of now).

MacOS

  1. Download binaries for Derwin OS hugo_extended_0.140.1_darwin-universal.tar.gz, unpack, enjoy.

Site creation and configuration

  1. Create new site hugo new site belablotski
  2. Install theme git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke and add theme = 'ananke' in hugo.md
  3. Commenting systems
  4. Syntax highlighting
  5. Links and cross references

Hosting

  1. GitHub Pages

Code

  1. Directory structure

Content creation

Pages

  1. Create page hugo new content content/posts/my-first-post.md
  2. Page bundles and _index.md
  3. List pages hugo list published or hugo list drafts

Context organization

  1. Taxonomies. Taxonomy, term, value.
  2. Default taxonomimes. Hugo automatically creates taxonomies for tags and categories (unless disableKinds turns it off).
  3. Configure taxonomies
  4. Assign terms to content: categories = ['Category A', 'Category B'] tags = ['Tag A', 'Tag B']. Taxonomic weight - ordering.
KindDescriptionExample
homeThe landing page for the home page/index.html
pageThe landing page for a given pagemy-post page (/posts/my-post/index.html)
sectionThe landing page of a given sectionposts section (/posts/index.html)
taxonomyThe landing page for a taxonomytags taxonomy (/tags/index.html)
termThe landing page for one taxonomy’s termterm awesome in tags taxonomy (/tags/awesome/index.html)

Templates

  1. Page kings: home, page (=single), section, taxonomy, and term. Single layouts/_default/single.html, list page (section listings, home page, taxonomy lists, taxonomy terms) layouts/_default/list.html
  2. Template types (base, home, single, section, taxonomy) and Lookup order
  3. type (page type) - this is a sub-folder in layouts folder, layout is a sub-folder under layouts/page_type.

Preview and publish

Preview

  1. Local site hugo server
  2. Preview your work before publishing hugo server --buildDrafts --buildFuture --buildExpired or simple hugo server -DEF
  3. hugo server --navigateToChanged