Your Turn

To solidify your understanding of how theming works in Hugo, try the following exercises:

1. Currently, the header partial contains the site’s header and navigation. Use what you’ve learned about partials to move the navigation section into its own partial called nav.html.

2. Create a new theme named “bootstrap” using the theme generator. Create a layout using Bootstrap instead of your own custom CSS. Follow Bootstrap’s documentation^[14] to create your theme. To test it out, be sure to switch your site’s theme in config.toml. Be sure to switch the theme back to basic before continuing on with the book.

3. Look at the Hugo theme gallery^[15] and examine the source code for an existing theme you like. If you have Git installed, use Git to download the theme to your site and try it out. Many public themes have additional settings you’ll have to configure, so explore the documentation for the theme you select.