Including FontAwesome webfonts from node_modules

I’m maintaining some dependencies and its versions using npm.
E.g. Bootstrap and FontAwesome. I cannot use a CDN for these as I’m changing some sass variables.

Now in my main scss file I can include sass files from node_modules folder like:

@import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/@fortawesome/fontawesome-pro/scss/fontawesome";

But e.g. FontAwesome also needs the webfonts folder relative to the css folder.

So I’m trying to “mount” node_modules/@fortawesome/fontawesome-pro/webfonts to assets/webfonts.
I’m calling it “mounts” as GoHugo has something like that: https://gohugo.io/commands/hugo_config_mounts/

With GoHugo I would configure it like:

module:
  mounts:
    - source: node_modules/@fortawesome/fontawesome-pro/webfonts
      target: assets/webfonts

Now I don’t think Jekyll has something like that, but I wonder if there is another option to do this?
Of course I don’t want to expose the node_modules folder itself.

I also tried with a custom CopyAssets generator like:

require "fileutils"

module Jekyll
  class CopyAssets < Jekyll::Generator
    safe true
    priority :lowest

    def generate(site)
      assets = {
        "node_modules/@fortawesome/fontawesome-pro/webfonts": "webfonts"
      }
      assets.each { |src, dest|
        src = "#{site.source}/#{src}"
        dest = "#{site.dest}/assets/#{dest}"
        FileUtils.mkdir_p dest, :verbose => true
        FileUtils.cp_r src, dest, :verbose => true
      }
    end
  end
end

but that doesn’t work, the folders are copies but then in the Jekyll build process deleted again.

I should not have used a Generator for this but a Hook instead.

_plugins/copy_to_dest.rb:

require "fileutils"

Jekyll::Hooks.register :site, :post_write do |site|
  site.config["copy_to_dest"].each { |copy|
    Jekyll.logger.info "Copying:", "#{copy["source"]} to #{copy["target"]}"
    src = "#{site.source}/#{copy["source"]}"
    dest = "#{site.dest}/#{copy["target"]}"
    FileUtils.mkdir_p dest
    FileUtils.cp_r src, dest
  }
end

_config.yml:

copy_to_dest:
  - source: node_modules/@fortawesome/fontawesome-pro/webfonts/.
    target: assets/webfonts/
  - source: node_modules/flag-icon-css/flags/.
    target: assets/flags/

This copies the needed files from node_modules to the _site/assets folder when building the site.

2 Likes