Hugo Static vs Assets Folders

When I first started creating this site in Hugo I made a ton of decisions about where in Hugo’s default folder structure I would store my site assets - things like the favicons, javascript files, and my scss/css files. I made some mistakes. This post is another short one to quickly get you past my self-inflicted points of pain on these matters.

Here’s what I learned in a nutshell:

• If you’re never going to modifiy it in any way before serving it, put it in the /static folder
• If you’ll modify it in any way during the build process, put it in the /assets folder

When I ask Hugo to build a site, it resizes images , it transpiles my .scss and .js and .ts files, and it fingerprints / compresses / minimizes everything. The process is called pipelining and it’s what Hugo excells at. Hugo’s pipeline is served from the assets folder. None of the files in /assets which aren’t processed by Hugo during the build process will actually make it into \public during build.

But all of the assets in the /static folder will be included into \public during build.

So here, by way of example is what I generally keep in /assets and /static

• /assets

  • images that live in partials
  • javascript and typescript source files
  • .scss source files

• /static

  • distributed script files (something-something.min.js)
  • favicons
  • SVG files