Create beautiful api documentation with gatsby and greenboard

• Generate static site from markdown
• Get all features of gatsby and react
• Fully customizable
• Dark Mode
• Uses same structure of slate docs.

Setup your folder and install gatsby, react and react-dom

mkdir my-docs
cd my-docs
yarn init

yarn add gatsby react react-dom

Install greenboard

yarn add gatsby-greenboard

Then add gatsby-greenboard to your gatsby-config.js.

module.exports = {
  plugins: [
    {
      resolve: "gatsby-greenboard",
      options: {},
    },
  ],
}

Now create your api documentation in data/index.html.md. You can check a sample format in here

That's it, you can now run your gatsby site using

yarn gatsby develop

Build the production files

yarn gatsby build

To get more customization fork this repo.

Clone the repo

https://github.com/shamin/greenboard.git

Travese to the folder

cd greenboard

Install dependencies

yarn

To run example locally

yarn workspace example develop

To build example

yarn workspace example build

To run the build files locally with serve

npm install -g serve

cd example/build
serve

To deploy example to github pages

yarn workspace example deploy

Add the pathPrefix to gatsby-config.js in your docs folder

module.exports = {
  pathPrefix: `/docs`,
}

Run build command

yarn workspace example build

For more information visit https://www.gatsbyjs.org/docs/path-prefix/

If you need some help you can contact me on my email [email protected]