Generating the Theme

You can make a theme by creating a new directory in the themes folder of your site, but Hugo has a built-in theme generator that creates everything you need for your theme. Execute this command from the root of your Hugo site to generate a new theme named basic:

This command creates the themes/basic directory and several subdirectories and files:

The theme has a place for its own archetypes, as well as directories to store the layout files and static assets like stylesheets, scripts, and images. Each theme has a license file so you can open source your theme if you choose, as well as a configuration file where you can store theme-specific configuration values.

Notice that there’s already a layouts/_default directory with files for single page layouts and list page layouts. There’s also a layouts/index.html file that serves as the home page layout. Those files don’t have any content in them, though.

Move your existing layout files into this new theme. Move the layouts/index.html file to themes/basic/layouts/index.html, and then move layouts/_default/single.html to themes/basic/layouts/_default/single.html. You can do this quickly with these commands:

Before you can use the theme, you have to tell Hugo about it by adding a line to your site’s configuration. Open config.toml and add the following line to the end:

Save the file and run the server again:

Visit http://localhost:1313 in your browser. Your home page still displays, which means your theme works. Once you know it works, stop the development server with Ctrl-c.

Now, let’s break the theme up and reduce some duplication by taking advantage of Hugo’s layout framework.