Build a Documentation Website with Gatsby in 10 Mins
Tags: javascript, programming, tutorial, beginners
Published: 2024-02-09 09:35:27

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](https://gatsbyjs.com/) 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 

![](https://paper-attachments.dropboxusercontent.com/s_6B9C3E3CF2CD4D526F3883C26150C8BE97734E69A5E500050B3561ADB5669B96_1707469631657_Screenshot+2024-02-09+at+10.07.05.png)


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


![](https://paper-attachments.dropboxusercontent.com/s_6B9C3E3CF2CD4D526F3883C26150C8BE97734E69A5E500050B3561ADB5669B96_1707469939402_Screenshot+2024-02-09+at+10.12.01.png)


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, 

![](https://paper-attachments.dropboxusercontent.com/s_6B9C3E3CF2CD4D526F3883C26150C8BE97734E69A5E500050B3561ADB5669B96_1707470077615_Screenshot+2024-02-09+at+10.14.33.png)


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. 

![](https://paper-attachments.dropboxusercontent.com/s_6B9C3E3CF2CD4D526F3883C26150C8BE97734E69A5E500050B3561ADB5669B96_1707470171875_Screenshot+2024-02-09+at+10.16.01.png)


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](https://next-smooth-doc.vercel.app/docs/getting-started/) 

If you like our work and want to help us continue dropping content like this, buy us a [cup of coffee](https://www.buymeacoffee.com/scofields1s).

If you find this post exciting, find more exciting posts on [Learnhub Blog](https://blog.learnhub.africa/); we write everything tech from [Cloud computing](https://blog.learnhub.africa/category/cloud-computing/) to [Frontend Dev](https://blog.learnhub.africa/category/frontend/), [Cybersecurity](https://blog.learnhub.africa/category/security/), [AI](https://blog.learnhub.africa/category/data-science/), and [Blockchain](https://blog.learnhub.africa/category/blockchain/).

## **Resource**
- [Getting started with Folium](https://realpython.com/lessons/python-folium-get-started/)
- [20 Essential Python Extensions for Visual Studio Code](https://blog.learnhub.africa/2023/05/26/20-essential-python-extensions-for-visual-studio-code/)
- [Using Python for Web Scraping and Data Extraction](https://blog.learnhub.africa/2023/04/27/using-python-for-web-scraping-and-data-extraction/)
- [Getting Started with Python](https://www.python.org/about/gettingstarted/)
- [Creating Interactive Maps with Folium and Python](https://blog.learnhub.africa/2023/10/04/creating-interactive-maps-with-folium-and-python/)