How to modify themes Hugo

Use non-destructive practice for Hugo themes. Hugo is designed for customization and follows a site generation workflow that works a lot like layers in photo editing software.

Adding a custom index.html file in the site layouts folder overrides the one in the theme folder. To change the index.html code without changing the theme code. Customizing the theme CSS styles requires leveraging the layouts folder override.

To modify the CSS take advantage of cascading. Here is an example:

Override the head.html file by copying the head.html file from the themes/<theme>/layouts/partials folder into a new folder in the site layouts/partials. This new head.html file now overrides the theme head.html. Add a link to the new override.css file. The code below shows the existing link to the style.css and the new override.css.

{{ $style := resources.Get "scss/style.scss" | resources.ToCSS | minify }}

<link href="{{ $style.Permalink }}" rel="stylesheet" />

{{ $override := resources.Get "css/override.css" }}

<link href="{{ $override.Permalink }}" rel="stylesheet"/>

Summary

Hugo themes are easy to add and swap, simply copy or pull the theme files to site’s themes folder and update the config.toml theme property to the name of the theme folder.

Themes are tightly coupled to their data schemas, so do not expect to take a site with full content and swap the theme. Might need to port data to match the new data schema.

Hugo themes are easy to override and build upon without the need to directly change the theme files. The Hugo theme approach is simple yet powerful, it is one of the reasons Hugo is my preferred static site generator.

Check out the something interesting: