Create a Charge App That Builds and Deploys with ZEIT Now

Charge is an opinionated, zero-config static site generator written in JavaScript. Charge is fast, simple and behaves the way you expect it to.

In this guide, we will walk you through creating and deploying a basic Charge website with ZEIT Now.

Step 1: Set Up Your Charge Project

Charge focuses on simplicity and provides no boilerplate as a result. To get started with Charge create your project directory, let's call it charge-app, and cd into it:

mkdir charge-app && cd charge-app

Creating and entering into the /charge-app directory.

Next, initialize the project:

npm init

Initializing the project, this creates a package.json file.

When this is complete, add Charge as a development dependency:

npm i -D @static/charge

Adding Charge as a development dependency to our project.

Now, make an addition to package.json, as recommended by the Charge documentation, by adding the following scripts object:

{
  "scripts": {
    "dev": "charge serve src",
    "build": "charge build src public"
  }
}

Adding development and build scripts to the package.json file.

These scripts enable you to run a local development environment and build your Charge site when deploying with now.

Step 2: Add Content To Your Charge Project

The following example content setup demonstrates a few of Charge's key features, notably the use of .jsx, .mdx, and using a layout component.

Firstly, create two directories, /src and /src/pages within your project directory:

mkdir src && mkdir src/pages

Creating a /src directory with a /pages directory inside of it.

By keeping your components inside of the /src directory and our content inside of the /pages directory, this will help keep your project organized.

Next, create an index.html.jsx file inside the /src directory that will serve as the entrypoint to your Charge-powered website.

Now, you will need to add some some content to your index file. Use the example below, or add your own:

export default () => {
  return <h1>Welcome to my new Charge site!</h1>
}

An example index.html.jsx file in a Charge project.

Like many static site generators, Charge encourages the use of a layout component. This component will be used to define the layout of your .mdx pages later on.

Create a simple layout.html.jsx file inside of the /src directory with the following content:

export default ({ children }) => {
  return children
}

An example layout.html.jsx file in a Charge project.

If, at any point, you want to see how your changes look, you can serve them locally with the script you added in the first step:

npm run dev

Starting up a local development server using a package.json script.

Charge will open a new tab for you, if not you can navigate to localhost:2468 to see the changes you make.

Now that you have a layout component, use it to wrap a .mdx file. Create a file named about.html.mdx inside of your /pages directory.

Add some content to your about page and export it inside of the layout component you created above. Your about.html.mdx should look similar to this:

import Layout from '../layout.html.jsx'

Everything between the import and export in the source is **just markdown** using [MDX](https://mdxjs.com/)!

export default ({ children }) => <Layout>{children}</Layout>

An example about.html.mdx file in a Charge project.

Before deploying your project, import the about page you just created by modifying your index.html.jsx to look like this:

import About from './pages/about.html.mdx'

export default () => {
  return (
    <>
      <h1>Welcome to my new Charge site!</h1>
      <About />
    </>
  )
}

An example index.html.jsx file in a Charge project that imports the About content component and uses it in the page.

Now that you have a simple Charge site created, you're ready to deploy with Now.

Step 3: Deploy Your Charge Project with Now

The last step is to deploy the app with ZEIT Now.

If you have not yet installed Now, you can do so by installing Now CLI.

Now allows you to deploy your project from the terminal with a single command:

now

Deploying the app with the now command.

You will see a short build step in your terminal followed by the news that your Charge project has now been deployed, it should look similar to this: https://charge.now-examples.now.sh/

If you want to deploy your Charge project when you push to a Git repository, you can use either Now for GitHub or Now for GitLab to have your project automatically deployed on every push, and aliased on push to master.