https://github.com/wzulfikar/nunjucks-starter-kit

Nunjucks (HTML template engine) starter kit.
https://github.com/wzulfikar/nunjucks-starter-kit

html nunjucks nunjucks-starter-kit workflow

Last synced: 3 months ago
JSON representation

Nunjucks (HTML template engine) starter kit.

• Host: GitHub
• URL: https://github.com/wzulfikar/nunjucks-starter-kit
• Owner: wzulfikar
• Created: 2016-12-03T13:56:46.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2021-11-06T06:58:53.000Z (about 3 years ago)
• Last Synced: 2024-09-27T07:43:43.444Z (3 months ago)
• Topics: html, nunjucks, nunjucks-starter-kit, workflow
• Language: HTML
• Size: 8.85 MB
• Stars: 26
• Watchers: 3
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Nunjucks Starter Kit

## Requirement

- Node: [https://nodejs.org/en/download](https://nodejs.org/en/download)

### How to start

1. download & unzip: [https://github.com/wzulfikar/nunjucks-starter-kit/archive/master.zip](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.

![https://youtu.be/H7_yhCvQJDk](screenshot.jpg)

See YouTube video: [https://youtu.be/H7_yhCvQJDk](https://youtu.be/H7_yhCvQJDk)

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

---

# Why?

- 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`

## Directory Layout

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

## Sample workflow

A. without auto-render

1. edit pages in src

- run `gulp`

- publish `dist` to hosting provider

B. with auto-render

1. 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)

1. run `gulp auto`

- 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]([https://mozilla.github.io/nunjucks)