Awesome
Nunjucks Starter Kit
Requirement
How to start
- 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.
See YouTube video: https://youtu.be/H7_yhCvQJDk
Run
gulp minify
if you want to minify your html files insidedist
folder
Why?
- works out of the box!
- example included (using bootstrap css):
src/pages
for page contentsrc/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
Directory Layout
Here is the project structure:
dist
: this directory contains real files that will be hosteddist/assets
: all css, js, images, fonts and whatever assets related to app are located heresrc
: raw files used to develop the appsrc/pages
: pages for the app, everything here will be rendered todist
directorysrc/templates
: layout filessrc/templates/partials
: partial files like nav, user-tabs, menu, etc
Sample workflow
A. without auto-render
- edit pages in src
- run
gulp
- publish
dist
to hosting provider
B. with auto-render
- run
gulp watch
- 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)
- run
gulp auto
- it will open
http://localhost:3000
in your browser - using this workflow, when you edit
src
thedist
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