In my opinion, this is the coolest feature of the theme. Other Hugo themes
usually include a pre-configured version of Prism, which complicates updates and
The shortcode looks for media files matching the filename my-video*. For each
video MIME type file, a <source> element is added. The first image MIME
type file is used as poster (thumbnail). It will render the following HTML:
math rendering on the web. Let’s add it to the theme via npm. First, add the
following to the package.hugo.json file:
Then run hugo mod npm pack to sync the package.hugo.json dependencies with
package.json. Run npm install after. We then need to mount the
node_modules/katex folder into Hugo’s virtual filesystem by adding the
following to the config/_default/module.toml file:
Inside the assets/css two folders exist, critical and non-critical. Files
inside critical are concatenated during build time and inlined into the
<head> element. The styles target mostly
above the fold content.
Try to keep inline CSS to a minimum because it can’t be cached and will be
inlined into every single page. Files inside non-critical are concatenated
into a single file and included as <style>. Most of the styles are in there.
Files are concatenated in lexicographic order of their file names. File names
start with two digits and a hyphen: NN-. The order of files might differ
between Linux and Windows, so using this convention improves cross-platform
You might know this approach if you’re familiar with Xorg.
You can add new CSS files to the PostCSS pipeline like this: