Automate Jekyll to update from npm

Help
1

How can I automate Jekyll to update anchorjs and bootstrap from npm?

2

Can you elaborate? I have little context on how load the packages and your level of JS experience so just going to give a detailed answer on a few angles.

Jekyll itself doesn’t care about what JS you put on the page whether your own scripts or from a CDN or Node modules

Jekyll just puts a script tag on the page from your HTML

You also need to be careful of automating an upgrade of packages, because then your site would break on the frontend and you won’t know until you view the page.

If you don’t need new features of a package, it is safer to stay on an old one. Or at least stay within the latest Bootstrap 4 because Bootstrap 5 could have breaking changes.

Here are some approaches which control for the risk

CDN

One way to add JS libraries to the page is a CDN URL with a version. And then you manually upgrade the version and test the site locally, then deploy the changes.

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>

There are ways to omit the version of 4.4.1 to get the latest always. but that is dangerous because one day you have Bootstrap 5 and the next day 6 comes out and your site breaks and you didn’t even deploy anything.

I have Jekyll project as a demo of Bulma and Bootstrap from CDNs

NPM

maybe you have package.json file with Bootstrap and Anchorjs in it and that is part of your Jekyll site.

npm install bootstrap

Your install step of your docs should
do something like this. But it should target an ignored directory so that you don’t commit the result to version control.

cp node_modules/bootstrap/bs.css assets/...

Then when the site builds, your assets will go to _site/assets and you can load /assets/bs.css in your head tag.

Then you can upgrade it manually with

npm install bootstrap@latest

Or if you want to go from 4.5 to 4.8 or whatever without jumping to 5, you can do:

npm update
# or
npm update bootstrap

The commit your package.json and lock file.

Note also that if your care about security vulnerabilities, GitHub will scan your Gemfile.lock and package-lock.json if you enable scanning in repo settings, then you will get warnings and even automated PRs for you to review and merge, whenever a vulnerability comes up.

Gem

Another option is to find a gem that manages packages for you. I guess that anchorjs is not well known enough to have a gem