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:
- Download bootstrap’s css and js files and dump them in /static of my theme
- Download jquery and popper.js and dump them in the /static
- I create /static/sass/main.scss
- I create my @import in the main.scss file
- 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