Minjucks

Version 1.0.1

Live demo: https://simonpadbury.github.io/minjucks/

What is minjucks?

Minjucks is a minimal static site generator (no Markdown) with nunjucks templating, frontmatter, PostCSS stylesheet processing, and CSSNANO minification.

Installation

In the terminal, yarn istall will brings in all the node_modules/ required.

Scripts

• yarn dev for development with Browser-Sync.

• yarn clean empties the docs/ folder (deletes and re-creates it).

• yarn build just builds.

• yarn build:gh is what I use to include /minjucks/ as the baseUrl so that I can deploy the demo docs on GitHub Pages

Notes

Everything ends up in the docs/ folder for you to deploy:

• src/pages nunjuck files are used to build HTML files (pretty URLs). You can nest pages in folders, and your folder structure will also be replicated in the publif folder.

• Frontmatter data in your pages nunjuck files (using the gray-matter plugin) is used for page.title and page.description and to select which layout template the page will wear. Minjucks comes with only layout.njk ut you can create more.

• Site title, description, version, and author are in src/data/metadata.json

• PostCSS imports CSS partials into styles.css. CSSNANO minifies it. This one CSS file goes to your site.

• For demonstration purposes:

  • Simple site CSS is included. Start here or delete and start over, do whatever you like. build.js expects your base CSS file to be source/css/styles.css – you can change that.
  • The plain JS source/js/scripts.css is a switcher that shows how the CSS light and dark theme works. If you don’t want it, you can delete it.

• Other CSS (e.g. 3rd party framework), JS, images, and fonts are simply passed through (copied) without processing, each in their folders. You can add more folder/file types in build.js Any files you put in the source/ root are also simply passed through to the docs/ root.

Note: put {{ baseUrl }} before every link (to pages, images, stylesheets, scripts). Simply use {{ baseUrl }} as the link to your homepage index.html.

Folder/file structure

minjucks/
├── src/
│   ├── _includes/        ← layouts & partials
│   │   └── layout.njk
│   ├── css/
│   │   ├── other/
│   │   │    └── …        ← pass-thorugh CSS
│   │   ├── styles.css
│   │   └── …
│   └── data/             ← sitewide data
│   │   └── metadata.json
│   └── js/               ← pass-though js
│   │   └── main.js
│   └── img/              ← pass-thorugh images
│   │   └── logo.svg
│   └── pages/
│       └── index.njk
├── docs/               ← built output
├── dev.js
├── build.js
├── postcss.config.js
└── package.json