In this method we are going to just compile the entire full bootstrap to CSS and JS libraries from the source code. Also we will also have an custom CSS & JavaScript files in which you can include your custom codes. The compiled output will be saved into a single file named main.css and main.js.
Hugo by default excepts the JS and SCSS source to be present in assets path. So we will extract the latest bootstrap source zip files into themes assets path. In my case it is here.
themes\devnodes\assets\scss\bootstrap-5.2.3
We are only interested in bootstrap JS & SCSS library, So lets remove all the folders and files except js and scss directories from bootstrap source.
themes\devnodes\assets
├───js
│ └───custom.js <- custom js scripts goes here
└───scss
├───custom.scss <- custom css styles goes here
└───bootstrap-5.2.3
├───js
└───scss
for CSS file in head section of html template.
{{- $bootstrapcss := resources.Get "/scss/bootstrap-5.2.3/scss/bootstrap.scss" | toCSS (dict "targetPath" "css/bootstrap.css" "enableSourceMap" false) -}}
{{- $customcss := resources.Get "/js/custom.scss" -}}
{{- $CSS := slice $bootstrapcss $customcss | resources.Concat "css/main.css" | minify | fingerprint -}}
<link rel="stylesheet" href="{{- $CSS.RelPermalink -}}" media="all">
for JS file (you may include js compiling code before closing of body tag ie. footer)
{{- $bootstrapjs := resources.Get "/scss/bootstrap-5.2.3/js/index.umd.js" | js.Build -}}
{{- $customjs := resources.Get "/js/custom.js" -}}
{{- $js := slice $bootstrapjs $customjs | resources.Concat "/js/main.js" | resources.Minify | fingerprint -}}
<script src="{{ $js.RelPermalink }}" defer></script>
Now run hugo
$ hugo --gc
This will compile bootstrap and create minified css and js file in public dir
.\public\css\main.min.9bea99d8cf76b9e5aa42d8fcfa2436c18d05fa3c3f470dd82fe374602b31cbd7.css
.\public\js\main.min.0061e3a01c6e88f5ab46aaab2642dc0edad3374b5f11c0ddeecd3fb05a6a67a4.js
And output html will be similar to below.
<html>
<head>
..
..
<link rel="stylesheet" href="/css/main.min.9bea99d8cf76b9e5aa42d8fcfa2436c18d05fa3c3f470dd82fe374602b31cbd7.css" media="all">
..
</head>
</body>
..
<script src="/js/main.min.0061e3a01c6e88f5ab46aaab2642dc0edad3374b5f11c0ddeecd3fb05a6a67a4.js" defer></script>
</body>
</html>
Since we have integrate the bootstrap source in Hugo static site generator. Hugo will take care of of rebuilding, combining and minify you are stylesheet and javascript from source every time you modify it.
In our next article will explain how to selectively compile components/modules from bootstrap source in order to reduce its size and increase the speed of webpage loading.
