Spike-webpack Demo

A static site app based on Spike.

The goal is to integrate a customized Foundation Sass front-end, with some other Spike plugins.

Spike Background

From the Spike :cactus: project:

An opinionated static build tool, powered by webpack

Why should you care?

We :heart: static.

Spike aims to be simple, efficient, and a pleasure to use.

Spike certainly is not the only static site generator out there, but in our opinion, it's the most powerful and easiest to use.

Spike is from the same team that brought you Roots. The thinking behind moving past Roots is explained in this article. Please feel free to comment and contribute.

The Stack

Spike is fairly strict in enforcing a default stack. However, the stack allows for quite a large amount of flexibility as both the css and js parsers are able to accept plugins. Also spike's core compiler is Webpack, so you can customize your project with loaders and plugins. The inflexibility of the stack means faster compiles and better stability. We use...

• jade for markup
• babel for JS and JS transforms
• postcss for CSS transforms
• webpack as the core compiler

Features

• Easy configuration via the app.js file
• Integration with Webpack's massive plugin/loader ecosystem
• Support for ES6 in your site's JS via Babel
• Breezy local development powered by Browsersync
• Turn-key isomorphism (no refresh page loads)
• Selective compile in watch mode :zap:
• Support for multiple environments
• Interactive Project Starters via sprout
• Spike Plugins for common integrations

Usage

Spike can operate through either a javascript API or a CLI interface. This project is just the command line interface, for more information on the js api, check out spike-core.

To read all about how spike works, check out our documentation

For information on how to use the command line interface, check the CLI section

Setup

• make sure node.js is at version >= 6
• npm i spike -g
• clone this repo down and cd into the folder
• run npm install
• run spike watch or spike compile

Testing

Tests are located in test/** and are powered by ava

• npm install to ensure devDeps are installed
• npm test to run test suite