Skip to content
Minimal, unopinionated static site generator powered by webpack
Branch: master
Clone or download
Pull request Compare This branch is 5 commits ahead, 23 commits behind markdalgleish:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
index.js
package.json
yarn.lock

README.md

static generator webpack plugin


This is a fork of static-site-generator-webpack-plugin that allows for dynamic paths at runtime using webpack contexts.


Minimal, unopinionated static site generator powered by webpack.

Install

$ npm install static-generator-webpack-plugin --save-dev

Usage

Ensure you have webpack installed, e.g. npm install -g webpack

webpack.config.js

const StaticGeneratorPlugin = require('static-generator-webpack-plugin');

module.exports = {
  entry: {
    'main': './index.js'
  },

  output: {
    filename: 'index.js',
    path: 'dist',
    /* IMPORTANT!
     * You must compile to UMD or CommonJS
     * so it can be required in a Node context: */
    libraryTarget: 'umd'
  },

  plugins: [
    new StaticGeneratorPlugin('main', {
      // Properties here are passed to
      // the exported render function
      greet: 'Hello'
    })
  ]

};

index.js

// creates an object with filepaths as keys
// and modules as values
function requireAll(context) {
  return context.keys().reduce((modules, key) => {
    modules[key] = context(key);
    return modules;
  }, {});
}

module.exports = {
  // expects a render function that takes a module
  // and returns a string
  render: (Page, locals, done) => {
    done(
      null,
      '<!DOCTYPE html>' +
      Dom.renderToStaticMarkup(<Page locals={locals} />)
    )
  },
  // expects an object with input filepaths for keys
  // and module definitions as values
  pages: Object.assign(
    {},
    requireAll(require.context('./pages/', true, /\.jsx$/))
  ),
  // expects a function that defines output path
  // based on input module filepath
  transform: inputPath => {
    return inputPath
      .replace('./', '')
      .replace(/\.jsx/, '.html');
  }
}

Default locals

// The list of input paths being rendered:
locals.paths

// The input filepath currently being rendered:
locals.path;

// the list of output paths being rendered
locals.outputPaths;

// The output filepath currently being rendered:
locals.outputPath;

// a helper string for resolving absolute paths 
// to root.  eg. `../..` or `.`
locals.baseHref;

// An object containing all assets:
locals.assets;

// Advanced: Webpack's stats object:
locals.webpackStats;

Any additional locals provided in your config are also available.

Scope

If required, you can provide an object that will exist in the global scope when executing your render function. This is particularly useful if certain libraries or tooling you're using assumes a browser environment.

For example, when using Webpack's require.ensure, which assumes that window exists:

const scope = { window: {} };

module.exports = {
  ...,
  plugins: [
    new StaticGeneratorPlugin('main', locals, scope)
  ]
}

Related projects

License

MIT License

You can’t perform that action at this time.