Skip to content
Skeleton for new Hugo sites
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
archetypes
content
layouts
static
.gitignore
LICENSE
README.md
config.toml

README.md

Hugo Skeleton

This is a simple, minimal example of a website built with Hugo.

This may be interesting to you if you're content to write your own HTML, CSS/SASS, and Javascript but want to make use of Hugo's templating features so you can do things like maintain consistent headers and footers, automatically generate nav bars, etc.

It's intended both as a basic demonstration of Hugo's templating features, and as a skeleton directory you can copy to start new sites.

Overview

  • layouts/_default/baseof.html: This is the base template. We use this to define the layout for all pages. It does a few things:
    • We build the skeleton of the HTML page (doctype, <html> tags, etc)
    • We build a common header (with an <h1> tag)
    • We build a menu bar
    • We build a common footer
  • layouts/index.html and layouts/_default/single.html: These pages inherit from the base template above. They define the style for the root page ("/") and all other pages, respectively. (Both are necessary for Hugo to render these page types.) They are both identical, and both stubs.
  • content/*.html: Various sample pages. These use HTML as the content format because of their .html extension. Each contains a menu key if it should appear in the nav bar.
  • static/main.css: A CSS file as an example of a static file.

Here are the common Hugo features we're not using:

  • We don't use a theme -- just the layouts directory.
  • We don't make (significant) use of any Markdown formatting
  • We don't define any list pages (which contain lists of all pages of a certain type).

Notes

We could avoid the use of a base template and just duplicate logic layouts/index.html and layouts/_default/single.html -- that would simplify things, but at the expense of duplicating things more.

How to use this

  • Install Hugo
  • Run hugo server (or hugo server --bind 0.0.0.0 if you want to expose the development server to other hosts)

Where to go from here

This example is very, very minimal -- Hugo has many other features that help us organize templates, or separate content from display logic:

  • Partial templates can be used to extract common functionality (the menu bar is a prime candidate for this).
  • Shortcodes, particularly how to create your own shortcode templates.
  • Hugo pipelines, which are particularly useful for asset minification.
  • Front matter, the top section of each page in content, can help separate page structure from rendering a bit more.
You can’t perform that action at this time.