Idiom

Idiom is a simple React-based static site generator. It allows you to write pages in JSX with reusable components and comes with prerendering to make your site search engine friendly.

Idiom takes a similar approach to other site generators like Gatsby that allow you to write with the expressiveness and composability of React components but without any complicated build configurations or dependencies.

Install

$ npm install -g https://github.com/choxi/idiomjs.git

Usage

Idiom assumes your site has a specific directory structure:

mysite/
  assets/
    image.png
  components/
    Layout.jsx
  pages/
    index.jsx
    my-first-page.jsx

Each page is a JSX expression:

<!-- pages/index.jsx -->

<Layout>
  <h1>This is your site's homepage</h1>
  <img src="/assets/image.png">
</Layout>

You can run your site in development with:

$ idiomjs serve
Listening on http://localhost:1234

When you're ready to deploy your site, you can run:

$ idiomjs build

This creates a dist directory that can be deployed to GitHub pages or any other static site host. The build command automatically prerenders your pages using ReactDOMServer so they can be parsed by search engines.

Writing Pages

Since Idiom autoloads your components, a page is just a JSX expression:

<Layout>
  <h1>This is an Idiom page!</h1>
  <CodeSnippet lang="js">{`
    console.log("Your components are autoloaded")
  `}</CodeSnippet>
</Layout>

react-helmet is included by default with Idiom:

<Layout>
  <Helmet>
    <title>myblog | This is an Idiom page!</title>
    <script>
      /* Add tracking code or third-party scripts */
    </script>
  </Helmet>

  <h1>This is an Idiom page!</h1>
  <CodeSnippet lang="js">{`
    console.log("Your components are autoloaded")
  `}</CodeSnippet>
</Layout>

Development

To run idiomjs while developing locally:

$ cd /path/to/idiomjs
$ npm link
$ cd /path/to/test/site
$ npm link idiomjs
$ idiomjs serve

Now when you make changes to the idiomjs source, you can restart the server to test those changes. See the docs on npm-link for more info.

TODO

• Auto-refresh page on changes
• Catch esbuild errors and display them in the server log (sometimes _index.js does not build)
• Rename "serve" command to develop. Add a "-h" option to CLI
• Add docs for how directory structure works (rename "assets" to "static"?)
• Add react-helmet and docs for using it
• Fix React Helmet prerendering (https://github.com/nfl/react-helmet#server-usage)
• Don't use /dist for development output
• Remove file change logs from server output
• Minify build for production
• Add source maps for development