10 Reasons to Use Docusaurus for your Docs, Blog & Marketing Site

10 Reasons to Use Docusaurus for your Docs, Blog & Marketing Site

Recently, I’ve been working on a project called sapling.dev, which generates full stack JavaScript (node + React) apps, including full CRUD APIs, Auth0 and Stripe integrations, and more.

Recently, I’ve been working on a project called sapling.dev, which generates full stack JavaScript (node + React) apps, including full CRUD APIs, Auth0 and Stripe integrations, and more. Sapling is the first developer tool I’ve built, and I quickly realized that the following items would be critical as we begin marketing:

  • Top-Notch Documentation — our Docs need to describe how users can generate a new codebase, how the new frontend and backend are structured, how to get up and running (npm scripts, nvm versioning, dockerized database, etc.), and how to configure the integrated services like Auth0 and Stripe
  • A Nice Blog Section — Sapling aims to help developers build quickly and follow best practices, so we definitely want to continue adding posts to serve as tutorials for choices made in generated codebases
  • General Marketing Content — like anything else, we need some arbitrary pages like a home page, a pricing page, etc.

We didn’t want to re-invent the wheel — any attempt we’d make at designing Docs or a Blog would fall well short of sites I’ve spent time on recently like React Native Docs or Auth0 Docs.

We knew it would be ideal to write mainly in Markdown, and then learned about MDX, which lets you add React components to Markdown. With a little more research, and after trying a couple alternatives (see the end of this article), we stumbled upon Docusaurus.

What is Docusaurus?

Docusaurus is a Facebook Open Source project that makes it super easy to build a website focused on content — i.e. Docs, Blog and more. Out of the box, you get a home page, a Blog with some sample posts, and a Docs section with some sample docs.

Note: when I created my Docusaurus project, I used the classic template, i.e. @docusaurus/preset-classic … there are a few options, but this gives you the major pieces I mentioned above and dive into below.

Docusaurus relies on specific structure and configuration to make it easy to add and organize content. I’ll get into the details below, but a lot of configuration lives in the root file docusaurus.config.js. For the Docusaurus-specific use case of React / Markdown content generation, I found it to be extremely fast and easy.

For our Sapling project, we keep our static Docusaurus site and our core application separate. Our Docusaurus site is hosted at the root domain sapling.dev, which guarantees that our home page and content is super fast (static, using s3 bucket + Cloudfront), and then we host a Create React App application (where users configure and generate codebases) at app.sapling.dev.

programming react docusaurus reactjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Create React NAVBAR / MENU using React Router in ReactJS in Hindi in 2020

Welcome, how to create a react menu in Hindi. React js navbar in Hindi in 2020 using React Router Dom.

How to use Functional Programming in your React app | React Next

In the past few years, the buzz around functional programming has been growing, but it can be challenging to apply theoretical concepts to everyday work. How can we make the code we work on more functional? What advanced patterns can you use, and why should you do that? And what do React hooks have to do with all this? In this talk we’ll have a look at real-life examples and patterns you can use to make React apps more functional.

Lifecycle hooks are not enough with React Navigation in React Native

Also use these events and API, provided by React Navigation library

Why ReactJS?

React JS is the most popular JS library for building UI (User Interfaces), which is created by Facebook. We can build fast Single Page, modern Applications, or websites with React. So, the question here arises is why React is so important. Let's put some light on the features of react.