Mdx-static NPM

mdx-static

Hyperminimal MDX-based static site generator

npm i -D mdx-static

Getting Started

Add run scripts to your package.json.

"scripts": {
  "start": "mdx-static pages",
  "build": "mdx-static build pages"
}

Create a pages/ directory and add an index.mdx file.

# Hello

Start the development server:

npm start

Using MDX

MDX combines markdown with inline JSX to render React components.

Imports

Import components to use in the MDX document.

import { Box } from 'grid-styled'

# Box

<Box bg='tomato' p={4}>
  Example Box
</Box>

Routing

Each .mdx, .md, and .js file in the target directory will create a new route based on its name, with files named index.mdx becoming the base index.html.

Given the following directory structure:

pages/
  index.mdx
  about.mdx

The index.mdx file will render at / and the about.mdx file will render at /about.

Link

By default markdown links will handle relative links within the site. To use the client-side routing with JSX, import the Link component.

import { Link } from 'mdx-static'

# Link Example

<Link href='/about'>
  About
</Link>

Layouts

mdx-static includes a default layout for mdx files. To use a custom layout component, export layout from the index.mdx file.

// example layout.js

export const layout = props =>
  <div
    style={{
      padding: '48px'
    }}>
    {props.children}
  </div>

export { layout } from './layout.js'

# Hello

Theming

The default theme can be overridden by exporting a theme object from index.mdx.

// example theme.js

export const theme = {
  font: 'Roboto, sans-serif',
  lineHeight: 1.625,
  colors: {
    text: 'tomato',
    background: '#eee',
    link: 'purple'
  }
}

export { theme } from './theme'

# Theme example

Custom MDX Components

To change the underlying components used to render elements in markdown, export a components object that maps to the names of HTML elements.

export { components } from './_components'

# Components example

Head Content

Document head content can be set using the Head component.

import { Head } from 'mdx-static'

<Head>
  <title>Hello</title>
  <link rel='stylesheet' href='styles.css' />
</Head>

Exporting

To export a static site with JS bundle, use the mdx-static build command.

mdx-static build pages

CLI Options

--port
--no-open
--out-dir

MIT License