Forge

Originally inspired by Metalsmith, it's a stack to build static websites.

This is tailored towards my favorite tools:

• Vue templates/layouts
• PostCSS with plugins to emulate SASS + TailwindCSS
• Webpack
• markdown-it

Usage

Prototyping (watch mode):

cd project-directory
forge
# or
forge prototype

Building (production):

cd project-directory
forge build

Installation

./build-forge && ./install-forge

Terminology

Client Project: A project that forge is being used to develop.

Installation

Install nodemon.

Clone this repo.

TODO:

... add it to your path and make it executable.

Configuration

Expects a file named forge.config.js to be in the project directory:

module.exports = {
  metadata: {
    baseurl: '',
    ...
  },

  forgeVersion: "4.0.0",

  dirs: {
    pages: './src/pages',
    assets: './src/assets',
    layouts: './src/layouts',
    scripts: './src/scripts',
    build: './build',
  }
}

metadata

This object is merged with the front matter of every page when the page is rendered. It's actually a 3-way merge between the page's front matter (overrides everything), the front matter inherited from the page's layout (takes 2nd priority) and the metadata (takes last priority).

baseurl

Optional, prefix to append to beginning of all URLs in production build in case the generated site is not directly under a domain. For example, if you upload the site to somedomain.com/my-special-site then baseurl should be /my-special-site

forgeVersion

The version(s) of forge the project is compatible with. Supports all the options you can use in a package.json.

Dirs

Relative paths to various source directories. These are customizable so you can name the directories whatever you want.

Notes

Prototype Mode

...

To-Do

1. Get imports of Vue components working in templates / pages. - Just use an includes folder and auto-register all the components in them?

2. Make it possible for templates / pages to have "live" Vue components. - Will plan to write them in .vue files and inject them with a component. html <forge-live-component bundle='do-some-cool-stuff.js' mount-to='#a-mount-point'/>

3. Figure out how to embed source-code highlighting styles.

4. Consider how to handle forge verses client tooling. Right now I'm leaning towards installing everything (Webpack, Babel, ESlint, etc.) in forge and only installing custom plugins in the client projects. How much configuration should be client-specific? .babelrc? .eslintrc? etc...