# mdx-static > Hyperminimal MDX-based static site generator Latest version **1.0.2** (published 2018-08-19) · MIT license · 0 weekly downloads ## Install ```sh npm install mdx-static pnpm add mdx-static yarn add mdx-static bun add mdx-static ``` Provides the commands `mdxs`, `mdx-static`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2018-08-19 | | First published | 2018-08-19 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 38 | | Unpacked size | 38.7 KB | | Known vulnerabilities | 0 (+3 in 3 direct dependencies) | | Install scripts | no | | Author | Brent Jackson | | Maintainers | jxnblk | ## Links - npm: https://www.npmjs.com/package/mdx-static - npm.io page: https://npm.io/package/mdx-static ## Dependencies (38) - [koa](https://npm.io/package/koa.md) ^2.5.2 - [meow](https://npm.io/package/meow.md) ^5.0.0 - [chalk](https://npm.io/package/chalk.md) ^2.4.1 - [react](https://npm.io/package/react.md) ^16.4.2 - [rimraf](https://npm.io/package/rimraf.md) ^2.6.2 - [webpack](https://npm.io/package/webpack.md) ^4.16.5 - [get-port](https://npm.io/package/get-port.md) ^4.0.0 - [pkg-conf](https://npm.io/package/pkg-conf.md) ^2.1.0 - [ansi-html](https://npm.io/package/ansi-html.md) 0.0.7 - [babel-cli](https://npm.io/package/babel-cli.md) ^6.26.0 - [react-dom](https://npm.io/package/react-dom.md) ^16.4.2 - [babel-core](https://npm.io/package/babel-core.md) ^6.26.3 - [clipboardy](https://npm.io/package/clipboardy.md) ^1.2.3 - [koa-static](https://npm.io/package/koa-static.md) ^5.0.0 - [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.2 - [@mdx-js/mdx](https://npm.io/package/@mdx-js/mdx.md) ^0.15.0 - [koa-webpack](https://npm.io/package/koa-webpack.md) ^5.1.0 - [remark-slug](https://npm.io/package/remark-slug.md) ^5.0.0 - [babel-loader](https://npm.io/package/babel-loader.md) ^7.1.5 - [remark-emoji](https://npm.io/package/remark-emoji.md) ^2.0.1 - [html-entities](https://npm.io/package/html-entities.md) ^1.2.1 - [html-minifier](https://npm.io/package/html-minifier.md) ^3.5.20 - [remark-images](https://npm.io/package/remark-images.md) ^0.8.1 - [@mdx-js/loader](https://npm.io/package/@mdx-js/loader.md) ^0.15.0 - [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^5.0.1 - [update-notifier](https://npm.io/package/update-notifier.md) ^2.5.0 - [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.3.1 - [styled-components](https://npm.io/package/styled-components.md) >=3.0.0 - [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1 - [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.24.1 - [remark-unwrap-images](https://npm.io/package/remark-unwrap-images.md) 0.0.2-0 - [mini-html-webpack-plugin](https://npm.io/package/mini-html-webpack-plugin.md) ^0.2.3 - [remark-autolink-headings](https://npm.io/package/remark-autolink-headings.md) ^5.0.0 - [koa2-history-api-fallback](https://npm.io/package/koa2-history-api-fallback.md) 0.0.5 - [progress-bar-webpack-plugin](https://npm.io/package/progress-bar-webpack-plugin.md) ^1.11.0 - [babel-plugin-styled-components](https://npm.io/package/babel-plugin-styled-components.md) ^1.5.1 ## Recent versions - 1.0.2 (latest) — 2018-08-19 - 1.0.1 — 2018-08-19 - 1.0.0 — 2018-08-19 ## README # mdx-static Hyperminimal MDX-based static site generator ```sh npm i -D mdx-static ``` ## Getting Started Add run scripts to your `package.json`. ```json "scripts": { "start": "mdx-static pages", "build": "mdx-static build pages" } ``` Create a `pages/` directory and add an `index.mdx` file. ```mdx # Hello ``` Start the development server: ```sh npm start ``` ## Using MDX MDX combines markdown with inline JSX to render React components. ### Imports Import components to use in the MDX document. ```mdx import { Box } from 'grid-styled' # Box Example 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. ```mdx import { Link } from 'mdx-static' # Link Example About ``` ## Layouts mdx-static includes a default layout for mdx files. To use a custom layout component, export `layout` from the `index.mdx` file. ```js // example layout.js export const layout = props =>
{props.children}
``` ```mdx export { layout } from './layout.js' # Hello ``` ## Theming The default theme can be overridden by exporting a `theme` object from `index.mdx`. ```js // example theme.js export const theme = { font: 'Roboto, sans-serif', lineHeight: 1.625, colors: { text: 'tomato', background: '#eee', link: 'purple' } } ``` ```mdx 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. ```mdx export { components } from './_components' # Components example ``` ## Head Content Document head content can be set using the `Head` component. ```mdx import { Head } from 'mdx-static' Hello ``` ## Exporting To export a static site with JS bundle, use the `mdx-static build` command. ```sh mdx-static build pages ``` ## CLI Options ``` --port --no-open --out-dir ``` [MIT License](LICENSE.md) --- _Source: https://npm.io/package/mdx-static · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._