Automatically bundle local and external JavaScript files into a single file.

Hinode bundles local and external JavaScript into a single file. By utilizing npm, external JavaScript files are automatically ingested and kept up to date.

Build pipeline

Hinodes uses npm and mounted folders to create a flexibile virtual file system that is automatically kept up to date. Review the overview for a detailed explanation. The build pipeline of the JavaScript files consists of four steps.

  1. Add the local JavaScript files

    Add the local JavaScript files to the assets/js folder with a recognizable filename.

  2. Mount the JavaScript files maintained within a node package

    Make JavaScripts defined in node packages available by mounting them into the assets/js/vendor folder. Define the mount points in config/_default/config.toml.

  3. Bundle the JavaScript files

    The partial partials/footer/scripts.html bundles all files that end with .js recursively into a single file called js/main.bundle.js. In production mode, the output is minified and linked to with a fingerprint.

  4. Link to the JavaScript in the base layout

    Hinode’s base layout layouts/_default/baseof.html imports the bundled JavaScript file in the footer. The file is cached to improve performance.


Mount the external JavaScript files to Hugo’s virtual file system within the file config/_default/config.toml. The current configuration imports the relevant files of Bootstrap and FlexSearch.

    source = "node_modules/bootstrap/dist/js"
    target = "assets/js/vendor/bootstrap"
    includeFiles = "*.bundle.js"
    source = "node_modules/flexsearch/dist"
    target = "assets/js/vendor/flexsearch"
    includeFiles = "*.bundle.js"
Last updated: February 12, 2023 • Upgrade to docs v0.9 (2caaad8)