In our research for a new static site generator to discuss on the blog, we stumbled upon Spike.
While it’s nowhere near the most popular static generation tools out there, there’s one characteristic that caught our attention and made us eager to take a closer look:
Spike is powered by webpack.
If you’re unfamiliar with this module bundler, don’t worry, we explore all the basics in this webpack static site tutorial.
We’ll be using Spike to craft a webpack-powered online shop in five simple steps:
- Declaring products
- Tweaking our app.js
- Creating views in Spike
- Booting the webpack static site
- Deploying on Netlify
Let’s start by introducing webpack and see why any developer should care about it.
What is webpack?
Like I mentioned earlier, it’s a module bundler which takes modules with dependencies and generates static assets representing those modules.
Modules bundled into static assets [Source]
For a more comprehensive definition, here’s how webpack developers put it:
webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.
As we’re evolving towards web apps and relying more and more on JavaScript, it becomes mandatory to find ways to organize all that code on the frontend.
It’s the most popular tool of this kind right now, and if you’re remotely working with JavaScript you should get to know its capabilities.
Note that webpack is highly configurable, thanks in great part to its plugin system.
A word on webpack static site generator Spike
Knowing what webpack is capable of, seeing static site generators built around it emerge makes sense. While Spike might not be the first one to do so—we already wrote about React & webpack-powered Gatsby—it’s made by the talented folks at Carrot Creative, which sounds pretty promising.
They are the same creators behind the now unmaintained static generator Roots. Spike is able to produce anything that Roots did in an even better way, acting as its successor.
Spike is based on a simple principle:
Out of the box, Spike will just take standard HTML, CSS, and JS files and copy them over without any modification. It is up to you to build your ideal system out of plugins that transform your content.
In other words, it’s a thin layer that leverages different “ecosystems” like webpack to bundle and generate a static website. You’re the one in charge of defining the build process.
Luckily enough, Spike makes the whole thing feel quite intuitive. This way, you can easily start with a beginner build without having to worry about losing any extensibility that might be required were you to expand your integration.
#webpack