APIdocs is an opinionated Gatsby theme for writing technical documentation. Clone, customize and start documenting.
Out-of-the-box APIdocs comes with:
- HTML-based content authoring,
- responsive, mobile-friendly layout,
- a dark and light color scheme,
- Prism.js code highlighting,
- Sublime-style client-side search,
- near-100 Lighthouse score of the final static site.
To get your first APIdocs-based site:
-
Clone APIdocs starter project.
git clone https://github.com/carrotsearch/gatsby-starter-apidocs.git
-
Install dependencies.
cd gatsby-starter-apidocs yarn install
-
Edit site title and description.
Open
gatsby-config.js
and edit metadata of your side located in thesiteMetadata
node. The title property is thetitle
to display in browser's tab,description
is the text to use in the description meta tag. You can also customize the HTMLlang
attribute. -
Start Gatsby in development mode.
yarn run gatsby develop
Once Gatsby development server starts, open http://localhost:8000 in your browser to see the website you're building. Gatsby will automatically update the page as you edit the content.
-
Customize logo and footer.
Use your favorite IDE to edit
src/logo.html
andsrc/footer.html
. Contents of both files must contain valid HTML, but feel free to use in-line SVG to include logos in both files.Once you save the changes, you should see them applied in real time in the browser.
-
Start documenting!
For each article in your documentation, add an HTML file to the
src/content/
folder. The root tag of each HTML file must be anarticle
and it must contain an `h1. child tag containing the article's title.Edit
src/navigation.json
to add newly-created articles to the navigation menu. Currently, only two-level navigation is supported. -
Build and deploy.
Once you've completed editing your documentation, you can build the final optimized static site by running:
yarn run gatsby build
The public/ folder will contain the static site to deploy.
For more detailed information, see APIdocs documentation.