(From official document) Bundling Custom css with theme’s assets

For adding custom css to be bundled inside one minimized css: Create folder & file in your project directory as

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.(site root)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── assets/
    └── css/
        └── extended/  <---
            ├── custom_css1.css <---
            └── any_name.css   <---

(All css files inside assets/css/extended will be bundled !)

Note: blank.css is just the placeholder so that it doesn’t break the theme when no files are present under assets/css/extended

Adding Custom JS into Head

For adding custom javascript, you will need to create/place the js file inside themes/PaperMod/assets/js, And to use it, simply add the following in file themes/PaperMod/layout/partials/head.html or themes/PaperMod/layout/partials/extend_head.html

1
2
3
4
5
6
7

{{- $js_xxyyzz := resources.Get "js/your_js_file_name.js" }}
<script defer crossorigin="anonymous" src="{{ $js_xxyyzz.RelPermalink }}"></script>
```

## Reference
- [https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/#bundling-custom-css-with-themes-assets](https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/#bundling-custom-css-with-themes-assets)
- [https://discourse.gohugo.io/t/papermod-theme-how-to-add-custom-css/30165/11](https://discourse.gohugo.io/t/papermod-theme-how-to-add-custom-css/30165/11)