Bootstrap + HUGO

support
#1

Hello everyone!
I’m building a theme right now and learning the ins and outs of HUGO. I built the first version of my theme using the CDN given on bootstrap’s website. But I would rather have it locally on the website and only import the things I need to improve performance as much as possible.

This means I also need to install jquery.js and popper.js

I know the basics of npm if it’s needed but still learning.
Is there a helpful guide around here to help me with this?

#2

Hi,
Why not just download the libraries inside your project’s assets folder and use them as resources with resources.Get?

As far as I understood, Hugo is not quite “ready” yet to work with NPM modules.

1 Like
#3

Good to know that it isn’t quite there for npm. I’m still trying to understand the resources.Get part. Do you have a code example?

#4

You may have a look at Hugo Pipes Introduction.

As far as picking only what you need in Bootstrap is concerned, have a look at the importing part of the docs.

1 Like
#5

I’m sorry, I might sound stupid, I’m still learning this coding and dependencies stuff. In step by step form I:

  1. Download bootstrap’s css and js files and dump them in /static of my theme
  2. Download jquery and popper.js and dump them in the /static
  3. I create /static/sass/main.scss
  4. I create my @import in the main.scss file
  5. Add this to head.html partial:
{{ $style := resources.Get "sass/main.scss" | toCSS | minify }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

?

#6

I think it’s pretty much that yes, but you have to use the assets directory instead of the static one, to be able to use the resources.Get function.

1 Like
#7

assets that I add to the theme file I imagine.

Thanks @inwardmovement, it’s people like you that encourage people to keep going at it.

#8

I wrote a whole article and how to guide on this…

2 Likes