javascript-today

and more

Hugo

Hugo: a fast, simple static site generator

Why Hugo is worth using

Hugo is a static site generator written in Go. You write your content in Markdown, Hugo combines it with your templates, and out comes a folder of plain HTML, CSS, and JavaScript you can host almost anywhere.

  • It’s fast. Hugo builds thousands of pages in seconds, and the dev server live-reloads your browser the moment you save a file.
  • It’s a single binary. No node_modules, no Ruby gems, no runtime to keep updated. Install one program and you’re done.
  • Content is just Markdown. Your posts are plain text files you can keep in git, edit in any editor, and move to another tool later if you want.
  • Static output is cheap and secure. No database or server-side code means there’s very little to attack and hosting is often free (GitHub Pages, Netlify, Cloudflare Pages, etc.).
  • Batteries included. Taxonomies (tags/categories), RSS, sitemaps, image processing, and Sass/JS bundling all come built in.

Installing Hugo

Install the extended edition. Many themes need it for Sass/SCSS support.

  • macOS: brew install hugo
  • Windows: winget install Hugo.Hugo.Extended
  • Linux (Debian/Ubuntu): sudo snap install hugo. The apt package is often out of date, so for the newest version grab a .deb from the Hugo releases page.
  • Arch: sudo pacman -S hugo

Check that it worked:

hugo version

The output should include +extended.

Setting up a new site

  1. hugo new site my-site – create the project folder
  2. cd my-site
  3. git init – start a repo (themes are usually added as git submodules)
  4. Add a theme, for example: git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
  5. echo "theme = 'ananke'" >> hugo.toml – tell Hugo to use it
  6. hugo new content posts/my-first-post.md – create your first post
  7. hugo server -D – start the dev server, including drafts

Open http://localhost:1313 and you should see your site. New posts start with draft = true in their front matter. Change it to false, or remove the line, when the post is ready to publish.

Project layout at a glance

  • hugo.toml – site config (base URL, title, theme, menus)
  • content/ – your Markdown pages and posts
  • layouts/ – your own templates, which override the theme’s
  • static/ – files copied as-is (images, favicons, etc.)
  • assets/ – files Hugo processes (Sass, JS, images)
  • themes/ – installed themes
  • public/ – the generated site (created when you run hugo)

Run hugo server for dev

hugo server

Useful flags:

  • hugo server -D – include draft content
  • hugo server --disableFastRender – do a full rebuild on every change (helps when the page looks stale)
  • hugo server --bind 0.0.0.0 – make the server reachable from other devices on your network

Build for deployment

  1. hugo – base production build
  2. hugo --gc --minify – minified production build that also cleans up unused cache files
  3. hugo --gc --minify -b https://your-production-domain.com/ – set the production URL if needed

The finished site is written to the public/ folder. Upload that folder to any static host.

note

  • The correct baseURL should be set in your hugo.toml (older sites use config.toml)
  • Add public/ and resources/_gen/ to .gitignore if your host builds the site for you