https://github.com/waldronmatt/bowman

A simple static site generator with an integrated toolchain for efficient development and delivery.
https://github.com/waldronmatt/bowman

asset-management browsersync compile ejs eslint generator glob html javascript javascript-template-engine json nodejs postcss scss site static static-site-generator stylelint template webpack

Last synced: about 2 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/waldronmatt/bowman
• Owner: waldronmatt
• License: mit
• Created: 2020-07-04T18:37:10.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-09-24T22:08:55.000Z (about 3 years ago)
• Last Synced: 2024-09-20T08:32:07.238Z (8 days ago)
• Topics: asset-management, browsersync, compile, ejs, eslint, generator, glob, html, javascript, javascript-template-engine, json, nodejs, postcss, scss, site, static, static-site-generator, stylelint, template, webpack
• Language: JavaScript
• Homepage: https://bowman.netlify.app/
• Size: 30.4 MB
• Stars: 20
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Bowman

[![Netlify Status](https://api.netlify.com/api/v1/badges/981f8252-c7bd-4215-8b05-60aee8402a2d/deploy-status)](https://app.netlify.com/sites/bowman/deploys) ![npm](https://img.shields.io/npm/v/@waldronmatt/bowman) ![webpack](https://img.shields.io/badge/webpack-4.43.0-green)

A simple static site generator with an integrated toolchain for efficient development and delivery. [Click here to see it live on Netlify](https://bowman.netlify.app).

![](bowman.gif)

## 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

        
<%= data.info.header %>


        


            
<%= data.info.description %>

        


### 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](https://github.com/waldronmatt/bowman/tree/master/docs)

## 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

- CLI authored by Dominik Kundel's [create-project](https://github.com/dkundel/create-project)