Hugo Bootstrap

OK so in our previous post we started up a static Hugo site, now lets style it with Bootstrap. I’m technical and have no design eye so I use Bootstrap so I can just throw some components together to make something functional and look OK. You may not be interested in Bootstrap but integrating SASS into Hugo maybe.

Dependencies

Remember to run in an elevated command prompt. Install NVM (Node Version Manager) so we can easily have multiple versions of Node.js.

1

choco install nvm

You may need to relaunch your terminal to then install a specific version.

1

nvm install TBC

Check the versions are installed:

1
2

node -v
npm -v

Initialize a package.json file

1

npm init -y

Then install Bootstrap and Sass

1

npm install bootstrap sass --save-dev

Customise

In your profile create a custom scss file e.g. ./themes/my-theme/assets/sass/main.scss. The Bootstrap documentation site has one custom file defined, but this has some things missing so I started by copying the one from source and commented out the bits I didn’t want.

As Hugo already has SASS in it then it’s easy to get it to use the file directly. In your css.html or wherever the reference is change it to the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{{ with resources.Get "sass/main.scss" }}
	{{ $opts := dict
		"enableSourceMap" (not hugo.IsProduction)
		"outputStyle" (cond hugo.IsProduction "compressed" "expanded")
		"targetPath" "css/main.css"
		"transpiler" "dartsass"
	}}
	{{ with . | toCSS $opts }}
		{{ if hugo.IsProduction }}
			{{ with . | fingerprint }}
				<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
			{{ end }}
		{{ else }}
			<link rel="stylesheet" href="{{ .RelPermalink }}">
		{{ end }}
	{{ end }}
{{ end }}

This will allow Hugo to watch and recompile the SCSS file into CSS and refresh the page as necessary.

Hugo Tech Bootstrap