Building a Basic Theme

Although we can place all layouts into the layouts folder, we can also place these layouts into the themes folder to build our theme.

Version

Hugo 0.94.0

A Basic Theme

layouts
├── _default
│ ├── list.html
│ └── single.html 
└─── index.html

A basic Hugo theme only needs 3 files :

list.html : default layout for list page
single.html : default layout for single page and content page
index.html : default layout for home page

Create Theme

$ hugo new theme basic

hugo new theme : create a new theme basic

overview000

basic theme is created under themes folder.

overview001

basic folder contains archetypes,layouts and static folder.

Layout

$ mv layouts/index.html themes/basic/layouts/index.html
$ mv layouts/_default/single.html themes/basic/layouts/_default/single.html
$ mv layouts/_defaults/list.html themes/basic/layouts/_defaults/list.html

Move index.html,single.html and list.html to themes/basic folder.

overview002

Hugo Config

config.json

{
   "baseURL": "http://example.org/",
   "languageCode": "en-us",
   "title": "HATstack",
   "theme": "basic",
   "minify": {
      "tdewolff": {
         "html": {
            "keepWhitespace": false
         }
      }
   }
}