Create a Charge App That Builds and Deploys with ZEIT Now
Deploy your Charge app with ZEIT Now 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 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
Next, initialize the project:
npm init
When this is complete, add Charge as a development dependency:
npm i -D @static/charge
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" } }
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
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.
jsx
andmdx
extensions, leaving you with just static html
files.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> }
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.
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 }
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
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>
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 /> </> ) }
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
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.