Create a Charge App That Builds and Deploys with Vercel

Deploy your Charge app with Vercel in 3 easy steps.

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 Vercel.

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.

Note: During the initializing process, npm will ask questions about your project. Answer these how you wish; there are no prerequisites for this example.

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 vercel.

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.

Note: During the build process, Charge will remove jsx andmdxextensions, leaving you with just static htmlfiles.

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.

Note: Charge automatically imports React into jsx files so you don't have to.

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](!

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 Vercel.

Step 3: Deploy Your Charge Project with Vercel

To deploy your Charge app with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your app live, such as the following:

Written By
Written by mcsdevmcsdev