Nunjucks Starter Kit

Requirement

download & unzip: https://github.com/wzulfikar/nunjucks-starter-kit/archive/master.zip

install dependencies: run npm i
run gulp auto
try change something inside src/pages & your browser will auto-reload, displaying the change you just made.

Run gulp minify if you want to minify your html files inside dist folder

works out of the box!
example included (using bootstrap css):
- src/pages for page content
- src/templates for page layout
output is plain html (stored in dist directory)
serverless
can use free service like surge.sh, github pages for hosting
minimum knowledge needed: html, css, js – no need for php, ruby, etc.
minifier included! use gulp minify

Here is the project structure:

dist : this directory contains real files that will be hosted
dist/assets : all css, js, images, fonts and whatever assets related to app are located here
src : raw files used to develop the app
src/pages : pages for the app, everything here will be rendered to dist directory
src/templates : layout files
src/templates/partials : partial files like nav, user-tabs, menu, etc

A. without auto-render

B. with auto-render

as you edit src, dist gulp watch will do the rendering behind the scene n updates dist directory: you need to reload your browser to see the changes
publish dist to hosting provider

C. with auto-render & auto-reload (via browsersync)

it will open http://localhost:3000 in your browser
using this workflow, when you edit src the dist will be updated (just like workflow B) and your browser (http://localhost:3000) will be reloaded automatically.

Nunjucks official docs: https://mozilla.github.io/nunjucks