Chapter
2
Building a Basic Theme
You’ve built your site, but you have two nearly identical layout files with a lot of duplicate code. Your site’s layout is going to get more complex as you introduce additional content types, navigation, and styles, so it’s time to start organizing things. So far, you’ve placed all of your layout files into your Hugo site’s layouts directory, but Hugo has another mechanism for controlling how things look: themes.
There are many Hugo themes available that you can use, but instead of using one created by someone else, you’re going to build your own. Many off-the-shelf themes are fairly complex with lots of features that take time to configure properly. It’s best to understand how theming works before you dive into someone else’s code.
A basic Hugo theme only needs these files:
| | layouts |
| | ├── _default |
| | │ ├── list.html |
| | │ └── single.html |
| | └─── index.html |
This should look pretty familiar to you from the previous chapter. The index.html file is the home page of the site. The _default directory contains the default layouts applied to single content pages (single.html) and pages that display lists of content pages (list.html). However, as you’ll discover in this chapter, there are some additional files you can create that will let you share code between files.
Let’s get started with your theme.