Elijah

Using webpack for static website generation with reshape

Some weeks ago I had to build a simple html site with a few pages. I knew about “static site generators”, and not sure why in my mind was Jekyll. I started using it, but it didn’t feel very comfortable, specially because I have more experience as a js developer.

Some weeks passed, and I had to build some landing pages. So this time I looked for some way of doing it using webpack, and I did found some great boilerplates out there (like this one) which would generate html files for every landing page that I had to build. It worked pretty well, so I thought of using the same for the previous project.

Sadly it didn’t work as Jekyll since it lacked support for partials, layouts embedding some js expressions in the html. There were some very famous template systems like handlebars where you need to register every partial before using them, but I was looking something simpler and more “jekyll style”. After some googling I found reshape, which worked exactly as I wanted.

So I came up with the webpack config that I’m sharing here, which allows for generating multiple static html files, use partials and layouts, while using all the other webpack features. The main thing is that is uses html-loader preprocessor option with reshape, together with HtmlWebpackPlugin to write every html file.

webpack + reshape

Caveats

  • You need to reload webpack if you add any html file
  • Changes in partials or layouts are not detected

With this configuration, save all html pages you want to render in the “pages” directory. This files are the one that will get rendered. In each file, you can use reshape’s partials, layouts and expressions. I keep a “partials” folder and a “layouts” folder to keep those.

Hopefully this will be useful for you too.