Usage

There are only two commands: serve and build. You would run serve when working on your website locally and you would run build to generate static files to be deployed to production.

Serve

Running serve will start a live-reloading development server for local development. You run it with:

❯ charge serve <source directory>

<source directory> is the directory that contains the files you want to be built to become your static site.

They’ll be automatically built to tmp/target. You might want to add tmp/target to your .gitignore file or however you exclude files from version control.

Live-reloading

Charge uses the popular Browsersync library to handle live-reloading. Unfortunately, the documentation is not particularly clear about the details of how live-reloading works or what to expect. Here’s how I think it works:

If a stylesheet changes it will be live-reloaded. That is, it will be injected into the page without a full-page refresh. If an image changes it will also be live-reloaded.

If a JavaScript file changes it will do a full-page refresh. If an HTML file changes it will also do a full-page refresh. Basically, if anything other than a stylesheet or image changes it will do a full-page refresh.

If you encounter a file type that doesn’t appear to reload how you would expect, open an issue!

Build

Running build will do a single build of your static site to create files to be deployed to production. You run it with:

❯ charge build <source directory> <target directory>

<source directory> is the directory that contains the files you want to be built to become your static site and <target directory> is the directory you want the static site to end up in.

Scripts

Rather than typing charge serve or charge build followed by the source and target directory over and over again, consider adding the following scripts to your package.json file.

{
  "scripts": {
    "start": "charge serve source",
    "deploy": "charge build source target && <deploy command here>"
  }
}