ridwanzal / webpack-handlebars-static

A starter project for building static site with handlebars, sass and babel, using webpack.

Webpack Handlebars Static Site Builder

A very simple static site builder.

Built with:

• Handlebars (with JSON data)
• SASS
• Babel
• Webpack

Commands

Setup using:

npm install

Start a development server with watch tasks:

npm start

Build for production:

npm build

Project Structure

/
├── src
│   ├── css
│   │   └── index.scss
│   ├── data
│   │   ├── replacements.json
│   │   └── site.json
│   ├── fonts
│   ├── img
│   ├── js
│   │   └── index.js
│   ├── views
│   │   ├── layout
│   │   │   └── template.hbs
│   │   ├── partials
│   │   ├── page.hbs
│   │   └── index.hbs
│   └── entry.js
├── webpack.config.js
└── webpack.helpers.js

Output:

dist
├── bundle[hash].js
├── fonts
├── img
├── index.html
├── main[hash].css
└── page
    └── index.html

Pages

Any .hbs file in src/views, outside of layout and partials will become it's own page. Each page will be created as a new directory with an index.html file. Pages can be nested. Asset paths will be resolved using the webpack.output.publicPath option (default /).

Examples:

Input: src/views/about-us.hbs
Output: dist/about-us/index.html

Input: src/views/projects/slug.hbs
Output: dist/projects/slug/index.html

Data

Webpack will look for any direct .json files in the data directory (does not support folders). The data will be available for use in the Handlebars templates. The file name will be used as the key.

For usage help see the Handlebars expressions docs.

Example:

// site.json
{
  "title": "My Website"
}

// index.hbs
<h1>{{site.title}}</h1>

// index.html
<h1>My Website</h1>

Replacements

Replacements are a way of organising common, or repeated, data. All replacements are applied to the data before it is passed to Handlebars via string replacement.

To add a 'replacment', add a new key-value pair to src/data/replacements.json.

Example:

// replacements.json
{
  "[images]": "/img/"
}

// site.json
{
  "title": "My Website",
  "logo": "[images]logo.png"
}

// index.hbs
<img src="{{site.logo}}" alt="{{site.title}} logo" />

// index.html
<img src="/img/logo.png" alt="My Website logo" />