Structure of a hugo theme

Hugo directory structure getting started pages.

Theme

• archetypes/ - collection of templates
  • foo.md - templates for creating a new document of type foo using hugo new foo/bar.md
• assets/ - Any assets processed by hugo pipes
  • syntax.css - CSS for syntax highlighting of code
  • sass/ - collection of .sass files to be processed and made callable containing things such as:
    • _variables.sass - commonly used variables across site, e.g. default font size, primary color, etc.
    • custom.sass - definitions of custom CSS types for divs/ids etc. in theme.
    • scaffold - CSS for generic html items, e.g. headers, lists, paragraphs, hyperlinks, etc.
• config/ - configuration files for hugo/theme parameters
  • _default/ - default configuration files to use (can have production and staging too)
    • hugo.toml - main parameter file
• content/ - main content of the site
  • foo/ - collection of the foo items on the site
• layouts/ - collection of .html files that determine how .md content is statically rendered
  • index.html - template for homepage (content/_index.md)
  • 404.html - template for 404 page
  • partials/ - snippets of long code that can be inserted into a .html template file
  • shortcodes/ - snippets of long code that can be inserted with a ‘shortcode’ into a .md file

Under the theme to construct a new collection we may have:

• layouts/
  • foo/
    • single.html
    • list.html
  • partials/
    • foo/

• archetypes

Useful Resources

• Partials vs. Shortcodes - J.P. Droege
• Page bundles
  • Each collection of page types appears in a content subfolder, e.g. foo/ within content/
  • The collection can contain an _index.md that acts to collect all of the items into a list.
    This will be formatted according to layouts/foo/list.html
  • Individual pages in the collection will be formatted according to layouts/foo/single.html