HUGO

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
Star

What's on this Page

    • Theme Folders
    • Theme Configuration File
    • Theme Description File
THEMES

Create a Theme

The hugo new theme command will scaffold the beginnings of a new theme for you to get you on your way.

If you’re creating a theme with plans to share it on the Hugo Themes website please note that your theme’s demo will be available in a sub-directory of website and for the theme’s assets to load properly you will need to create absolute paths in the templates by using either the absURL function or .Permalink. Also make sure not to use a forward slash / in the beginning of a PATH, because Hugo will turn it into a relative URL and the absURL function will have no effect.

Hugo can initialize a new blank theme directory within your existing themes using the hugo new command:

hugo new theme [name]

Theme Folders

A theme component can provide files in one or more of the following standard Hugo folders:

layouts
Templates used to render content in Hugo. Also see Templates Lookup Order.
static
Static files, such as logos, CSS and JavaScript.
i18n
Language bundles.
data
Data files.
archetypes
Content templates used in hugo new.

Theme Configuration File

A theme component can also provide its own Configuration File, e.g. config.toml. There are some restrictions to what can be configured in a theme component, and it is not possible to overwrite settings in the project.

The following settings can be set:

  • params (global and per language)
  • menu (global and per language)
  • outputformats and mediatypes

Theme Description File

In addition to the configuration file, a theme can also provide a theme.toml file that describes the theme, the author and origin etc. See Add Your Hugo Theme to the Showcase.

The .Hugo.Generator tag is included in all themes featured in the Hugo Themes Showcase. We ask that you include the generator tag in all sites and themes you create with Hugo to help the core team track Hugo’s usage and popularity.

See Also

  • Install and Use Themes
  • Theme Components
  • Directory Structure
  • Static Files
  • Comments
  • About Hugo
    • Overview
    • Hugo and GDPR
    • Hugo 0.32 HOWTO
    • What is Hugo
    • Hugo Features
    • The Benefits of Static
    • License
  • Getting Started
    • Get Started Overview
    • Quick Start
    • Install Hugo
    • Basic Usage
    • Directory Structure
    • Configuration
  • Themes
    • Themes Overview
    • Install and Use Themes
    • Theme Components
    • Create a Theme
  • Content Management
    • Content Management Overview
    • Organization
    • Page Bundles
    • Supported Content Formats
    • Front Matter
    • Page Resources
    • Image Processing
    • Shortcodes
    • Related Content
    • Sections
    • Types
    • Archetypes
    • Taxonomies
    • Summaries
    • Links and Cross References
    • URL Management
    • Menus
    • Static Files
    • Table of Contents
    • Comments
    • Multilingual and i18n
    • Syntax Highlighting
  • Templates
    • Templates Overview
    • Introduction
    • Template Lookup Order
    • Custom Output Formats
    • Base Templates and Blocks
    • List Page Templates
    • Homepage Template
    • Section Templates
    • Taxonomy Templates
    • Single Page Templates
    • Content View Templates
    • Data Templates
    • Partial Templates
    • Shortcode Templates
    • Local File Templates
    • 404 Page
    • Menu Templates
    • Pagination
    • RSS Templates
    • Sitemap Template
    • Robots.txt
    • Internal Templates
    • Alternative Templating
    • Template Debugging
  • Functions
    • Functions Quick Reference
    • Built-in
    • Cast
    • Collections
    • Compare
    • Crypto
    • Data
    • Encoding
    • Fmt
    • Hugo
    • Images
    • Inflect
    • Lang
    • Math
    • OS
    • Partials
    • Path
    • Reflect
    • Resources
    • Safe
    • Site
    • Strings
    • Templates
    • Time
    • Transform
    • URLs
  • Objects
    • Objects Overview
    • Site Objects
    • Page Objects
    • Shortcode Objects
    • Time Objects
    • Taxonomy Objects
    • File Objects
    • Menu Entry Objects
    • Hugo Objects
    • Git Objects
    • Sitemap Objects
  • Hugo Pipes
    • Hugo Pipes Overview
    • Hugo Pipes Introduction
    • SASS / SCSS
    • PostCSS
    • Asset minification
    • Asset bundling
    • Fingerprinting and SRI
    • Resource from Template
    • Resource from String
  • CLI
  • Troubleshooting
    • Troubleshoot
    • FAQ
    • Build Performance
  • Tools
    • Developer Tools Overview
    • Migrations
    • Starter Kits
    • Frontends
    • Editor Plug-ins
    • Search
    • Other Projects
  • Hosting & Deployment
    • Hosting & Deployment Overview
    • Host-Agnostic Deploys with Nanobox
    • Host on Netlify
    • Host on Firebase
    • Host on GitHub
    • Host on GitLab
    • Hosting on KeyCDN
    • Host on Bitbucket
    • Deployment with Wercker
    • Deployment with Rsync
  • Contribute
    • Contribute to Hugo
    • Development
    • Documentation
    • Themes
  • Maintenance
“Create a Theme” was last updated: November 30, 2018: Update Warning for Theme Links (#676) (4560a016)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • Discuss Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays

 
  Hugo Sponsors
Logo for Forestry.io
Logo for Linode
Logo for eSolia
 

The Hugo logos are copyright © Steve Francia 2013–2019.

The Hugo Gopher is based on an original work by Renée French.

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
  • About Hugo
  • Getting Started
  • Themes
  • Content Management
  • Templates
  • Functions
  • Objects
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Tools
  • Hosting & Deployment
  • Contribute
  • Maintenance