DEV Community

Cover image for Build a Documentation Website with Gatsby in 10 Mins
Scofield Idehen
Scofield Idehen

Posted on • Originally published at blog.learnhub.africa

Build a Documentation Website with Gatsby in 10 Mins

First, this can not be done in 10 minutes, so if that is why you are here, give this post a thumbs up and move ahead.

This article would guide you to build a documentation website for your product and give your user a detailed process on your product's idea and how to get started.

For this project, we are going to use Smooth-Doc.

What is Smooth DOC?

Smooth DOC is a ready-to-use Gatsby theme to create a documentation website. Creating a pro-quality website like this one takes weeks. Smooth DOC saves you time and lets you focus on the content.

Prerequisite

  • Basic knowledge of React
  • Markdown Skills
  • IDE - VScode

First, we would have to open our terminal and download the following command npx gatsby-cli new LearnHub_Doc https://github.com/gregberge/smooth-doc-starter

We are using npx to execute the gatsby-cli tool to create a new Gatsby project called "Learnhub_Doc" based on the "smooth-doc-starter" Gatsby starter template from GitHub.

After installing, we would need to download all dependence for this project.

npm install

Once installed

we run npm run develop this would kick start a boilerplate template for us to work with like this

Once it is done you can access the project on the your localhost via the port 8000 HTTP://localhost:8000

We can change the mood from light to dark if we want and we can get started with building our documentation

Let us set up the files in our documentation,

in the docs files in our editor, we can create more pages using the mdx extension to build our layers which would appear like this on our front-end side of the website.

After completing your setup and write-up, you can ship it online using any hosting platform.

If you need help hosting please let me know in the comment session.

Also, if you want to learn more about how to scale, change, and build custom markdown rules read the documentation here

If you like our work and want to help us continue dropping content like this, buy us a cup of coffee.

If you find this post exciting, find more exciting posts on Learnhub Blog; we write everything tech from Cloud computing to Frontend Dev, Cybersecurity, AI, and Blockchain.

Resource

Top comments (0)