Getting Started

ignite is distributed on npm.

npm i --save-dev ignite
# or
yarn add -d ignite
npm i --save-dev ignite
# or
yarn add -d ignite

Setup

Getting setup with ignite require you to create a few files in addition to all of your actual documentation.

Quick

To quickly get started using ignite just run one of the following commands. This will setup a minimal docs folder so you can get straight to documenting.

# using npm
npx ignite init

# using yarn
yarn ignite init
# using npm
npx ignite init

# using yarn
yarn ignite init

Manual

First create a folder named docs and structure it to resemble the following.

📦docs
 ┣ 📂pages
 ┃ ┣ 📂docs
 ┃ ┃ ┣ index.mdx
 ┃ ┣ _app.js
📦docs
 ┣ 📂pages
 ┃ ┣ 📂docs
 ┃ ┃ ┣ index.mdx
 ┃ ┣ _app.js

You must have:

• pages/_app.js
• pages/docs/index.mdx

Add the following to your .gitignore.

.next
.mdx-data
docs/public/search-index.json
.next
.mdx-data
docs/public/search-index.json

_app.tsx

You need to at least do the following:

1. Import MDXProvider, igniteComponents, and combine the at the root of the app
2. Import ignite's css

import React from "react";
import App from "next/app";
import { MDXProvider } from "@mdx-js/react";
import { igniteComponents } from "next-ignite";

// Import the css to style the docs
import "ignite/dist/main.css";

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <MDXProvider components={igniteComponents}>
        <Component {...pageProps} />
      </MDXProvider>
    );
  }
}

export default MyApp;
import React from "react";
import App from "next/app";
import { MDXProvider } from "@mdx-js/react";
import { igniteComponents } from "next-ignite";

// Import the css to style the docs
import "ignite/dist/main.css";

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <MDXProvider components={igniteComponents}>
        <Component {...pageProps} />
      </MDXProvider>
    );
  }
}

export default MyApp;

Start writing docs 🎉

Now that you have all that set up you can start writing documentation! All you need to do is start adding .mdx files to pages/docs. A good one to start with is pages/docs/index.mdx since this will be the first page shown to the user.

pages/docs/index.mdx:

---
title: "My Introduction"
---

The start of my amazing documentation.
---
title: "My Introduction"
---

The start of my amazing documentation.

Now start up the development server:

yarn ignite dev
yarn ignite dev

Once it's done loading you should see that that your documentation has loaded and ignite automatically created a sidebar for you! 😲

Explore More Features

ignite tries to be as flexible as possible, so many parts are customizable. Explore the documentation to find all the documentation site 🍬 we include.

Highlights:

⭐ Customize the sidebar

⭐ Home/Cover Page

⭐ Set up a blog

⭐ Multiple top-Level documentation sections

⭐ Use JavaScript for any page