Charge

website·Indexed 30 days ago

https://charge.js.org/

A static site generator that uses React and JSX to generate static HTML. It supports pages written in JSX and MDX, automatic SVG-to-React component conversion, and the generation of JSON and XML files via .json.js and .xml.jsx extensions.

Tokens
2.9K
Snippets
15
Records
32
Agent score
62%

What's inside Charge

  1. Overview of Charge static site generator

    Charge is an opinionated, zero-config static site generator written in JavaScript. It follows a 'convention over configuration' philosophy, meaning it requires no configuration to get started. Unlike GatsbyJS, which renders pages client-side, Charge uses React to render everything server-side, producing a truly static site without serving large amounts of JavaScript to the browser.
  2. Understand Charge's static rendering model

    Charge uses React and JSX to generate static HTML on the server-side. It does not render pages on the client-side in the browser. This makes it suitable for small websites where serving a full React runtime to the browser is unnecessary.
  3. Understand JavaScript transformation and language support in Charge

    Charge transforms JavaScript files using Babel. It includes all features from ECMAScript 2015 (es2015), 2016 (es2016), and 2017 (es2017) via the @babel/preset-env preset.
  4. Import local JavaScript modules using ES6 syntax

    Charge supports ES6 module syntax for importing JavaScript files. Imported files are treated as dependencies and inlined into the importing file. To ensure files are correctly treated as dependencies, use relative paths starting with ./ or ../.
    // index.js
    import something from "./other.js"
    
    console.log(something)
    // other.js
    export default "something"
  5. Deploy Charge static sites to Vercel

    Vercel is a recommended free hosting provider for static sites, offering integrated support for custom domains, HTTPS, and a CDN.
  6. Write stylesheets in Charge

    Charge uses standard CSS without pre-processors like Sass or Stylus. To use modern CSS features that lack universal browser support, Charge utilizes PostCSS. All Stage 2 and Stage 3 CSS features are enabled, as well as Custom Media Queries (despite being Stage 1).
  7. Import npm packages in Charge

    npm packages can be imported using standard ES6 import syntax. Charge resolves these packages by looking in the node_modules folder located at the root of the project.
  8. Manage files and assets in Charge

    Charge handles files based on their type during the build process. Most files are copied from the source directory to the target directory without modification. However, templates, JavaScript files, and stylesheets are processed before being written to the target directory.
  9. Key features and technical highlights of Charge

    Charge provides the following technical capabilities for static site generation:

    • Zero Configuration: Works out of the box without setup files.
    • Templating: Supports JSX and MDX for page templates.
    • Server-Side Rendering: React is used exclusively for server-side rendering, not client-side.
    • Modern Tooling: Integrates Babel for JavaScript and PostCSS for CSS.
    • Development Experience: Includes a live-reloading development server and an optimized build process that only rebuilds necessary files.
  10. Create pages using JSX and MDX in Charge

    Pages in Charge are server-side rendered using React to generate static HTML files. They use a specific naming convention: name.html.jsx for JSX files and name.html.mdx for MDX files. During the build process, the .jsx and .mdx extensions are removed from the final output filenames. Note that Charge automatically prepends import React from "react" to JSX files, so manual imports are not required.
  11. Generate XML files using JSX in Charge

    To generate an XML file in Charge, create a file with the .xml.jsx extension and export a React component. The component's returned JSX will be rendered as XML. This process follows the same logic as creating standard JSX pages.
    // feed.xml.jsx
    export default (props) => {
      return (
        <feed>
          <title>My blog</title>
        </feed>
      )
    }
  12. Using Charge for blogging

    Charge can be used to build blogs, but it is not a specialized blogging tool. It does not provide built-in patterns or specific configurations for common blog features like pagination, archives, RSS feeds, or sitemaps. Developers must implement these patterns manually using the general static site generation capabilities of Charge.