Bootstrap + HUGO

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?

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

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?

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

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 }}">

?

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

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.

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

3 Likes