A static site generator for Webpack
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.eslintrc.js Update .eslintrc.js and fix lint Apr 25, 2017
.gitignore Add NPM deploy step Apr 25, 2017
.travis.yml Set node version Apr 25, 2017
LICENSE Rename license. to LICENSE Apr 25, 2017
README.md Tweaks to get working on Travis CI (#2) Apr 30, 2017
index.js Tweaks to get working on Travis CI (#2) Apr 30, 2017
package.json 1.2.3 May 2, 2017
serve.js Fix hanging issue Apr 25, 2017
yarn.lock Fix issues with TravisCI (#1) Apr 25, 2017


Webpack Static Site Generator

Build Status npm version

A Webpack plugin to generate a static site based on a set of routes. This was written to work with a project generated by the Vue.js CLI, since I wasn't having any luck with other static site generators.


npm i --save-dev webpack-static-site-generator


yarn add webpack-static-site-generator -D


In webpack.conf.js:

var StaticSiteGenerator = require('webpack-static-site-generator')

// Add the plugin to the plugin array
plugins: [
    new StaticSiteGenerator(
        // path to the output dir
        path.join(__dirname, './dist'), 
        // array of routes to generate
        [ '/'. '/about', '/blog', '/blog/blog-post-1' ],
        // [OPTIONAL] element (in querySelector style) to wait for before rendering.
        // defaults to 'body'

The output will look something like this:

├── index.html
├── about
│   └── index.html
└── blog
    ├── blog-post-1
    │   └── index.html
    └── index.html

How it works

After Webpack generates the assets for your site, this plugin does the following:

  1. Serves the specified output directory using express
  2. Loads each provided route using Nightmare
  3. Saves the HTML of each route to the filesystem

Using on Travis CI

Nightmare uses Electron to render the pages, and it may require extra configuration on linux machines, including Travis CI. Since Electron is not fully headless, we need to set up xvfb (X Virtual Frame Buffer) to give Electron a virtual display it can use for rendering. This plugin is already set up to us xvfb when needed, we just need to install it.

Add the following to your .travis.yml:

sudo: required
      - xvfb
      - libxss1

Extra configuration may also be required for other CI systems.


This plugin has not been extensively tested. I use it in one Vue.js CLI project, and it works quite well. If you have any trouble with it, create an issue and I'll see what I can do.