Skip to main content

Welcome to Docusar

Docusar is a complete, production-ready Docusaurus template built to launch your documentation website, blog, and SaaS landing page in one project.

Unlike a basic Docusaurus starter that only gives you docs, Docusar gives you a full business website: a landing page to sell, documentation to help users, a blog to rank on Google, and static pages like About, Product, Contact, and Order to complete your funnel.

You do not need to write React components from scratch. Everything is built with a simple system: edit JSON for design, write Markdown for content.

What You Get Inside Docusar​

1. SaaS Landing Page (Your Homepage) Located in src/pages/index.js. This is your sales page. It includes:

  • Header / Hero section with title, description, and call-to-action buttons
  • Feature highlight section with image and checklist
  • Feature grid (6 cards) explaining your tech stack
  • Pricing section with 3 plans (Basic, Standard, Pro)
  • Bottom CTA section to close the sale

All text and pricing are controlled by JSON files, not hardcoded in React.

2. Documentation System Docusaurus docs live in the /docs folder. Features:

  • Write in Markdown (.md) and MDX (.mdx) - MDX allows React components inside docs
  • Sidebar is auto-generated from sidebars.js
  • Versioning support for different product versions
  • Categories with _category_.json for grouping docs
  • Search ready with Algolia integration

3. SEO Blog System Located in the /blog folder. Features:

  • Markdown-based blog posts
  • Auto reading time, tags, authors, and SEO meta
  • RSS feed and sitemap auto-generated
  • No need for WordPress or an external CMS

4. Static Pages (Complete Funnel) Located in src/pages/. These are full React pages, not Markdown:

  • about.js - About your product and story (uses about.json)
  • product.js - Detailed product features (uses product.json)
  • contact.js - Contact page with Formspree form and contact cards
  • order.js - Order / Buy page with a direct link to Gumroad checkout
  • webdev.js - Upsell page for custom development service (Fiverr link)
  • cms.js - Upsell page for Headless CMS setup
  • basic.md, standard.md, pro.md - Detailed pricing plan pages

How Docusar Works - The Core Concept​

Docusar uses two systems to make editing easy for both non-developers and developers:

System 1: JSON for Design and Text All homepage and static page content is stored in JSON files inside the src/data/ folder (or a similar data folder). For example, home.json controls the entire homepage, product.json controls the product page, and about.json controls the about page.

When you want to change a title, price, feature list, or button text, you just open the JSON file and change the value. You never need to open the React component. This is perfect for beginners and for fast editing.

System 2: Markdown for Content For docs and blog, you just create .md files. Docusaurus automatically converts them into beautiful pages with a sidebar, table of contents, and code highlighting. If you need an interactive component inside your docs, rename the file to .mdx and you can use React components inside Markdown.

Complete Project Structure Explained​

Here is what each file and folder does, based on your actual codebase:

src/
├── components/
│   ├── Home/
│   │   ├── Header/index.js       -> Hero section on homepage (main title + 2 buttons: Get Started / View Demo)
│   │   ├── Section/index.js      -> Section "One Template to Replace..." with image on left and text on right
│   │   ├── Section_list/index.js -> Checklist under Section (Landing, Docs, Blog, SEO, Dark Mode, etc)
│   │   ├── Intro/index.js        -> Title section "Everything You Need..." centered
│   │   ├── Intro_list/index.js   -> Grid of 6 feature cards (React, JSON Editable, MDX, Modern Design, Widget Ready, Deploy Anywhere)
│   │   ├── Plan/index.js         -> Wrapper for pricing section
│   │   │   ├── Basic/index.js    -> Pricing card $75 Docusar - Landing + Docs + Blog
│   │   │   ├── Standard/index.js -> Pricing card $145 Nocturne PRO - Bigger template
│   │   │   └── Pro/index.js      -> Pricing card Custom WebApp - Custom service
│   │   └── Contact/index.js      -> Bottom CTA "Need a Custom Build?" with button to /contact
│   │
│   ├── Product/List/             -> Card component used in /product page to list all features
│   │   ├── index.js
│   │   └── styles.module.css
│   │
│   └── Contact/List/             -> Card component for /contact page (Email, Gumroad, Fiverr links)
│       └── index.js
│
├── css/
│   └── custom.css                -> Global CSS. Controls primary color, dark/light mode, fonts, and overrides
│
└── pages/
    ├── index.js                  -> HOMEPAGE - imports all Home components and loads home.json
    ├── index.module.css          -> Homepage specific styles
    ├── about.js                  -> About page - loads about.json
    ├── product.js                -> Product page - loads product.json
    ├── contact.js                -> Contact page with form (connected to Formspree)
    ├── order.js                  -> Order page - contains Gumroad buy link https://creativitaz.gumroad.com/l/docusa
    ├── webdev.js                 -> Web Developer service page - contains Fiverr link for custom Docusaurus dev
    ├── cms.js                    -> Headless CMS service page - Git-based CMS upsell
    ├── basic.md                  -> Content for Basic plan details (Markdown)
    ├── standard.md               -> Content for Standard plan details (Markdown)
    └── pro.md                    -> Content for Pro plan details (Markdown)

Quick Edit Guide for Beginners​

To change the homepage hero title:

  1. Open src/data/home.json or src/pages/index.js (depends on your setup)
  2. Find header.title
  3. Change the text, save it, and see it update on http://localhost:3000

To change pricing:

  1. Open the Plan components: src/components/Home/Plan/Basic/index.js
  2. Or, if it uses JSON, open home.json and find the plan section
  3. Change the price from $75 to your own price

To add a new documentation page:

  1. Go to the /docs folder
  2. Create a new file, for example my-feature.md
  3. Add frontmatter at the top: 
    ---
    title: My Feature
    sidebar_position: 2
    ---
  4. Write your content in Markdown. It will automatically appear in the sidebar.

To change colors:

  1. Open src/css/custom.css
  2. Find :root { --ifm-color-primary: #... }
  3. Replace the hex code with your brand color from https://colorpicker.me

To change the logo and favicon:

  1. Replace the files in the /static/img/ folder: logo.svg and favicon.ico
  2. Update the path in docusaurus.config.js if you change the file name

Docusar is built on the official Docusaurus classic preset, so it is fast, SEO-ready, fully responsive on mobile, and supports perfect dark and light mode out of the box. All pages are static and can be deployed anywhere.

The next article will explain how to install and run Docusar locally on your computer.