Idiom: A Simple Static Site Generator in React

One of my favorite aspects of React is that it extends HTML and allows you to define your own elements to build up your own markup language. I wanted to do this for my personal site, so that I could write a post like this:

<Post>
  <Title>Idiom: A Simple Static Site Generator in React</Title>

  <Snippet lang="bash">
    $ idiomjs build
  </Snippet>

  <Subscribe newsletter="idiom" cta="Get updates on Idiom" />
</Post>

Gatsby is a popular framework for this type of React-based static site. It's powerful but complex, requires a lot of configuration, and can be difficult to debug since it uses a lot of libraries like Webpack and GraphQL in its toolchain. This seems like overkill for a static site generator, I wanted something that:

• Has an extendable markup language
• Is search-engine friendly
• Has a simple toolchain with a minimal number of dependencies
• Can easily be deployed to any static site host (e.g. GitHub Pages or S3)

Idiom is like a slimmed down version of Gatsby. It runs faster by using esbuild to compile your JS and jsdom for prerendering. It uses sensible defaults and favors convention over configuration, allowing you to write your pages as a pure JSX expression by autoloading your components.

An Idiom site looks like this:

my-site/
  components/
    layout.jsx
    layout.scss
  pages/
    index.jsx
    second-page.jsx

You can use React components to create shared partials like layouts, headers, or higlighted code snippets. Routes are automatically generated based on the page name, and components are automatically loaded into each page and can be referenced by the pascalcase version of their filename.

Idiom is still a work in progress, but if you'd like to try it out or send along any feedback check out the GitHub repo. This site is also built using Idiom, and you can view the source code here.