Build Websites with Hugo

Managing Stylesheets

Right now you have a single CSS file for the site with a pretty minimalist design. As it grows, you may want to break it up into components, or evolve it further.

To use the pipelines feature of Hugo, you’ll need to move your CSS files out of the static directory and into a new assets directory.

Stop your Hugo server with Ctrl-c. Create a new directory in your theme named assets. You can do this with your editor, or with the following command:

$ mkdir themes/basic/assets

Then move the static/css directory there:

$ mv themes/basic/static/css themes/basic/assets

Then in themes/basic/layouts/partials/head.html, locate the line of code that loads the stylesheet. Add this line above the stylesheet link to ...