Awesome Open Source
Awesome Open Source

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,535,723
Html (431,018
Nodejs (55,313
Scss (18,499
Json (11,344
Webpack (9,740
Template (8,088
Generator (3,928
Eslint (3,705
Ejs (3,508
Static Site Generator (1,632
Postcss (1,252
Static (774
Stylelint (562
Site (546
Browsersync (338
Compile (182
Glob (169
Asset Management (82
Javascript Template Engine (11
Related Projects