Using Vanilla with Jekyll

Anthony Dillon

on 19 November 2015

We’re using NPM as Vanilla’s package manager. Which gives us a number of advantages such as, an easy way to install and update the CSS framework. This all worked fine until we hit an issue with Github Pages. They do not supporting install scripts therefore it is not possible in npm install. Highlighted in this issue #4 on the Jekyll Vanilla theme project.

There are a number of ways to use Vanilla with Jekyll. Here are the number of methods we discussed with their pros and cons.

Commit node_modules

This is not recommended as it duplicates a lot of code. The repo will grow in size as it will include all the framework code also.

Clone and commit Vanilla without NPM

Again this will include the entire framework in the repos code base. Another downfall would be the loss of the NPM update process.

Use Git submodules

This is the method we went with in the end. Creating a submodule in the git repo does not add all the code to the project but includes a reference and path to include the framework.

By running the following command it will pull down the framework into the correct location.

We lose NPM’s functionality but submodules are understood and run when a Github Pages are built.

Conclusion

These methods were derived from a short exploration, but solved our issue. Any better methods would be very much welcomed in the comments. You can see a demo of the Vanilla theme running on the projects Github Page below:

Talk to us today

Interested in running Ubuntu Desktop in your organisation?

Newsletter signup

Select topics you’re
interested in

In submitting this form, I confirm that I have read and agree to Canonical’s Privacy Notice and Privacy Policy.

Related posts

Design and Web team summary – 16 August 2019

This iteration was the Web & design team’s first iteration of the second half of our roadmap cycle, after returning from the mid-cycle roadmap sprint in Toronto 2 weeks ago. Priorities have moved around a bit …

Design and Web team summary – 2 August 2019

This iteration was fairly light iteration for the Web & design team at Canonical as we had a fair few people on holidays as well as a group who has gone to Toronto for our mid-cycle …

Design and Web team summary – 8 July 2019

This was a fairly busy two weeks for the Web & design team at Canonical. Here are some of the highlights of our completed work. Web squad Web is the squad that develop and maintain most …