Nunjucks (HTML template engine) Bulma (CSS Framework) starter kit

  • By null
  • Last update: May 4, 2021
  • Comments: 0

Nunjucks Bulma Starter Kit



How to start

  1. download & unzip: or

    git clone

  • install dependencies: run yarn install to install everything listed in package.json
  • run gulp bulma to compile bulma from node_modules to dist/assets/css/bulma.css
  • run gulp auto . this will launch browsersync and watch for changes etc.
  • try changing one of the pages 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 bulma 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, 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.

Page variables

Set page title

{% set title = 'Page title' %} used in <title> tag

Set active menu item'pagename')

{% block nav %} {% import 'macros/nav-macro.njk' as thenav %} {{'about')}} {% endblock %}


Added automated CSS/JS version numbering (via gulp).

Nunjucks official docs: