jekyll-node-module

jekyll-node-module

Include node module assets in your Jekyll build

jekyll-node-module

This plugin copies assets from node_modules to your _site folder. By default, files are copied to folders named after the file's extension.

Example: node_modules/jquery/dist/jquery.js would be copied to _site/js/jquery.js. Likewise, node_modules/font-awesome/css/font-awesome.css would be copied to _site/css/font-awesome.css.

Installation

This goes in your Gemfile:

gem 'jekyll-node-module'

Next, run this:

$ bundle

Then, add the plugin to your _config.yml:

plugins:
- jekyll-node-module

Optional configuration:

node_modules:
  modules_dir: node_modules
  assets:
    js: assets/scripts
    css: assets/styles
  copy:
  - source: "@fortawesome/fontawesome-free/webfonts/"
    target: assets/webfonts

Usage

<link rel="stylesheet" href="{{ '@fortawesome/fontawesome-free/css/all.min.css' | node_module_url }}" />
<script src="{{ 'jquery/dist/jquery.js' | node_module_url }}"></script>

If you're using a custom baseurl (either by setting the baseurl option in the _config.yml file, or by passing the --baseurl argument to the build and/or serve command), you need to use the relative_url filter as well:

<link rel="stylesheet" href="{{ '@fortawesome/fontawesome-free/css/all.min.css' | node_module_url | relative_url }}" />
<script src="{{ 'jquery/dist/jquery.js' | node_module_url | relative_url }}"></script>

Issues

Need help? Please create a GitHub Issue and provide as much useful information as possible.

License

This gem is free software, and may be redistributed under the terms specified in the LICENSE file.

About

This gem was developed by Mintbit, a Rails consultancy in Knoxville, Tennessee.
If you'd like to work with us, don't hesitate to reach out.

jekyll logo

Want a Jekyll website built?

Hire a Jekyll developer