{"id":20266321,"url":"https://github.com/ereminnf/nunjucks-static","last_synced_at":"2025-10-03T12:37:54.248Z","repository":{"id":58987300,"uuid":"289987965","full_name":"ereminnf/nunjucks-static","owner":"ereminnf","description":"Nunjucks loader for webpack. Static site generator using nunjucks","archived":false,"fork":false,"pushed_at":"2022-12-13T17:33:58.000Z","size":1304,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T03:14:59.134Z","etag":null,"topics":["nunjucks","nunjucks-loader","static-site-generation","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"https://github.com/ereminnf/nunjucks-static-starter","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ereminnf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-24T17:00:25.000Z","updated_at":"2023-11-17T18:22:18.000Z","dependencies_parsed_at":"2023-01-28T13:47:07.275Z","dependency_job_id":null,"html_url":"https://github.com/ereminnf/nunjucks-static","commit_stats":null,"previous_names":["ereminnf/nunjucks-loader"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ereminnf%2Fnunjucks-static","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ereminnf%2Fnunjucks-static/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ereminnf%2Fnunjucks-static/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ereminnf%2Fnunjucks-static/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ereminnf","download_url":"https://codeload.github.com/ereminnf/nunjucks-static/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248333594,"owners_count":21086200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nunjucks","nunjucks-loader","static-site-generation","webpack","webpack-loader"],"created_at":"2024-11-14T12:08:13.698Z","updated_at":"2025-10-03T12:37:49.216Z","avatar_url":"https://github.com/ereminnf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[npm-url]: https://www.npmjs.com/package/nunjucks-static\n[npm-image]: https://img.shields.io/npm/v/nunjucks-static?color=blue\n[logo-url]: https://github.com/ereminnf/nunjucks-static\n[logo-image]: https://i.ibb.co/ZLJQnqP/nunjucks-static.webp\n[size-image]: https://img.shields.io/npm/dm/nunjucks-static.svg\n[size-url]: https://www.npmjs.com/package/nunjucks-static\n\n# Nunjucks static\n\n[![NPM version][npm-image]][npm-url] [![NPM size][size-image]][size-url]\n\nThis package adds nunjucks support for webpack as an HTML templating engine. It also supports the development of a multi-page site with nested pages with static html generation.\n\nInside nunjucks templates, a \"bundle\" variable will be available, which will contain the entry files of the build.\n\nIn the \"data\" property in the getNunjucksStaticPlugins function, you can pass any variables in the object view, where the key is the name of the variable that will be available in the nunjucks templates.\n\n-   Webpack support: only 5+\n-   New 4+ version tested on node 16 version\n\n## Install\n\n```js\nnpm i --save-dev nunjucks-static\n```\n\n## Usage\n\n### Custom webpack.config.js\n\n```js\nconst { getNunjucksStaticPlugins } = require('nunjucks-static')\nconst path = require('path')\n\nconst resolvePath = (...pathResolve) =\u003e {\n    return path.join(process.cwd(), ...pathResolve)\n}\n\nconst paths = {\n    src: resolvePath('src'),\n    build: resolvePath('build'),\n    templates: resolvePath('templates'),\n    pages: resolvePath('templates/pages'),\n    output: resolvePath('build/html'),\n}\n\n// Add nunjucks-static loader and plugin to webpack config\nmodule.exports = {\n    // ...\n    entry: {\n        main: resolvePath(paths.src, 'pages/main'),\n        about: resolvePath(paths.src, 'pages/about'),\n        error: resolvePath(paths.src, 'pages/error'),\n    },\n    output: {\n        path: paths.build,\n    },\n    module: {\n        rules: [\n            {\n                test: /\\.(html|njk|nunjucks)$/,\n                exclude: [/node_modules/],\n                use: [\n                    'html-loader',\n                    {\n                        loader: 'nunjucks-static',\n                        options: {\n                            path: paths.templates,\n                        },\n                    },\n                ],\n            },\n        ],\n    },\n    plugins: [\n        ...getNunjucksStaticPlugins({\n            pagesPath: paths.pages,\n            templatePath: paths.templates,\n            outputPath: paths.output,\n            data: {\n                title: 'Nunjucks-static',\n            },\n            filters: {\n                shorten: function (value, count) {\n                    return value.slice(0, count || 5)\n                },\n            },\n        }),\n    ],\n    devServer: {\n        // ...\n        historyApiFallback: {\n            rewrites: [\n                {\n                    from: /./,\n                    to: `/error/index.html`,\n                },\n            ],\n            disableDotRule: true,\n        },\n    },\n}\n```\n\n### Project structure example\n\n```\nroot\n├── ...\n├── templates/\n│     ├── components/\n│     │     ├── header/\n│     │     │     └── index.njk\n│     │     └── footer/\n│     │           └── index.njk\n│     ├── pages/\n│     │     ├── main/\n│     │     │     └── index.njk\n│     │     ├── about/\n│     │     │     ├── pages/\n│     │     │     │      └── us/\n│     │     │     │            └── index.njk\n│     │     │     └── index.njk\n│     │     └── error/\n│     │           └── index.njk\n│     └── layout.njk\n└── ...\n```\n\n### layout\n\n```twig\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/\u003e\n        \u003cmeta name=\"description\" content=\"{{ title }}\"/\u003e\n\n        \u003ctitle\u003e{{ title }}\u003c/title\u003e\n\n        {% block css %}\n            {% for name, item in bundle.css %}\n                \u003clink rel=\"stylesheet\" href=\"{{ item }}\"\u003e\n            {% endfor %}\n        {% endblock %}\n    \u003c/head\u003e\n    \u003cbody\u003e\n\n        {% include \"components/header/index.njk\" %}\n\n        \u003cmain class=\"content\"\u003e\n            {% block content %}{% endblock %}\n        \u003c/main\u003e\n\n        {% include \"components/footer/index.njk\" %}\n\n        {% block js %}\n            {% for name, item in bundle.js %}\n                \u003cscript src=\"{{ item }}\"\u003e\u003c/script\u003e\n            {% endfor %}\n        {% endblock %}\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Page\n\n```twig\n{% extends \"layout.njk\" %}\n\n{% block content %}\n   \u003cdiv class=\"page page-main\"\u003e\n        \u003ch1\u003ePage main\u003c/h1\u003e\n\n        \u003cdiv\u003e{{ foo | shorten(3) }}\u003c/div\u003e\n        \u003cp\u003ebundles:\u003c/p\u003e\n        {{ bundles | dump | safe }}\n   \u003c/div\u003e\n{% endblock %}\n\n{% block css %}\n    \u003clink rel=\"stylesheet\" href=\"{{ bundle['css']['main'] }}\"\u003e\n{% endblock %}\n\n{% block js %}\n    \u003cscript src=\"{{ bundle['js']['main'] }}\"\u003e\u003c/script\u003e\n{% endblock %}\n```\n\n```twig\n{% extends \"layout.njk\" %}\n\n{% block content %}\n   \u003cdiv class=\"page page-about\"\u003e\n        \u003ch1\u003ePage about\u003c/h1\u003e\n   \u003c/div\u003e\n{% endblock %}\n\n{% block css %}\n    \u003clink rel=\"stylesheet\" href=\"{{ bundle['css']['about'] }}\"\u003e\n{% endblock %}\n\n{% block js %}\n    \u003cscript src=\"{{ bundle['js']['about'] }}\"\u003e\u003c/script\u003e\n{% endblock %}\n```\n\n```twig\n{% extends \"layout.njk\" %}\n\n{% block content %}\n   \u003cdiv class=\"page page-error\"\u003e\n        \u003ch1\u003ePage error\u003c/h1\u003e\n   \u003c/div\u003e\n{% endblock %}\n\n{% block css %}\n    \u003clink rel=\"stylesheet\" href=\"{{ bundle['css']['error'] }}\"\u003e\n{% endblock %}\n\n{% block js %}\n    \u003cscript src=\"{{ bundle['js']['error'] }}\"\u003e\u003c/script\u003e\n{% endblock %}\n````\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fereminnf%2Fnunjucks-static","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fereminnf%2Fnunjucks-static","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fereminnf%2Fnunjucks-static/lists"}