bowman

A simple static site generator with an integrated toolchain for efficient development and delivery.

waldronmatt
20
2
JavaScript

Bowman

Netlify Status npm webpack

A simple static site generator with an integrated toolchain for efficient development and delivery. Click here to see it live on Netlify.

Introduction

Bowman is a simple static site generator powered by Node.js, Webpack, and Browsersync. Bowman comes with pre-configured scripts to bundle assets, generate markup, and hot-reload pages. Pages are generated using the J.E.N. technology core (JSON - data, EJS - templating, Node.js - markup generation).

Installation

Install globally:

    npm i -g @waldronmatt/bowman

Create project:

   create-bowman-starter -y

Install dependencies:

    npm install

Getting Started

Run dev environment:

    npm run dev

Build and serve for production:

    npm run build

Languages

Use core front-end languages and JavaScript-like technologies to build your site.

  • Next-Gen JavaScript
  • Sass
  • EJS - generate HTML markup with plain JavaScript
  • JSON - store page text/data

Workflow

Utilize a complete workflow of industry-leading software:

  • Webpack: module bundler
  • Browsersync: Development server for serving assets
  • Autoprefixer: Automatically add vendor prefixes to styles
  • Babel: Transpile to different versions of EcmaScript
  • Browserlist: Configure which browsers will be supported
  • Prettier: Formatter for scripts and styles
  • ESLint: Linting for scripts
  • StyleLint: Linting for styles
  • EditorConfig: general file formatter for your editor/IDE

Features

Take advantage of Bowman’s build scripts with performance and best practices built in:

  • Bowman
    • Recursively find, generate, and minify html markup
    • JSON cache prevention and file watch debouncing for robust page hot-reloading
  • Webpack
    • Recursively find and output entry points
    • Transpile Next-Gen JavaScript using Babel
    • Compile Sass using Webpack loaders
    • Manifest generation for assets so you can reference in your markup
    • Minify js and css
    • Compress images and generate next-gen image formats
  • Browsersync
    • Serve pages and assets for development

Bowman Starter Template

Bowman comes with a default template with the following features:

  • ~100% Lighthouse Score on Mobile and Desktop (Excluding PWA)
  • Contains popular, pre-configured webpack optimizations with examples:
    • cache busting using [contenthash]
    • code splitting
    • tree-shaking
  • Polyfill support
  • Eliminates render blocking js/css
  • Next-gen image and fallback support for production builds
  • Critical css and favicon generation
  • Popular css reset and normalizing libraries
  • Suggested folder structure for an organized project

Usage

Create the markup

    build/
        content/
            my-page.ejs

my-page.ejs

    <h1><%= data.info.header %></h1>

    <div class="container">
        <p><%= data.info.description %></p>
    </div>

Create the data

    build/
        data/
            my-page.json

my-page.json

    {
        "title": "My Page",
        "info": {
            "header": "Hello World!",
            "description": "This is my cool new page."
        }
    }

Documentation

Read the full documentation

Limitations

Bowman has several caveats/unsupported features:

  • file/folder structures must match for page data and markup
    • the decision was made to keep both build/content/ and build/data/ the same structure in order to easily automate variable page generation
  • webpack prefetch and preload needs webpack html-webpack-plugin to work
  • font file cache-busting not supported

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Credits