Getting Started | DocuBase

Welcome to DocuBase! This guide will help you get started with creating documentation for your web projects.

Prerequisites

Before you begin, make sure you have the following installed:

Node.js 18 or higher
A code editor (VS Code recommended)

Installation

The fastest way to create a new DocuBase site is using the CLI:

Create your project

Run the create command to scaffold a new project:

npx create-docubase my-docs

pnpm create docubase my-docs

yarn create docubase my-docs

Navigate to your project

cd my-docs

Start the development server

Run the development server to see your documentation site:

npm run dev

pnpm dev

yarn dev

Your site will be available at http://localhost:4321.

Alternative: Clone from GitHub

You can also clone the repository directly: git clone https://github.com/Sithumli/DocuBase.git my-docs

Project Structure

Here’s an overview of the project structure:

src/
├── content/
│   ├── docs/           # Documentation pages
│   ├── blog/           # Blog posts
│   └── tutorials/      # Tutorials and guides
├── layouts/
│   └── DocsLayout.astro
├── components/         # Reusable components
└── pages/
    └── index.astro

Creating Content

Documentation Pages

Create new documentation pages by adding MDX files to src/content/docs/:

---
title: My Page Title
description: A brief description
order: 1
category: Getting Started
---

Your content here...

Blog Posts

Add blog posts to src/content/blog/:

---
title: My Blog Post
description: Post description
pubDate: 2024-01-15
author: Your Name
tags: [announcement, feature]
---

Post content here...

Tutorials

Create tutorials in src/content/tutorials/:

---
title: Tutorial Title
description: What you'll learn
difficulty: beginner
duration: 30 minutes
prerequisites: [Basic JavaScript]
tags: [javascript, basics]
---

Tutorial content here...

Using Components

DocuBase includes several built-in components for your MDX content:

Use callouts to highlight important information:

<Callout type="warning">
  This is a warning message.
</Callout>

Available types: note, tip, warning, danger, info

Group related content with tabs:

<Tabs labels={["npm", "pnpm", "yarn"]}>
  <div>npm install package</div>
  <div>pnpm add package</div>
  <div>yarn add package</div>
</Tabs>

Create expandable sections:

<Collapsible title="Click to expand">
  Hidden content here...
</Collapsible>

Building for Production

When you’re ready to deploy, build your site:

npm run build

pnpm build

yarn build

The output will be in the dist/ directory, ready to deploy to any static hosting provider.

Info

DocuBase is optimized for static deployment on platforms like Cloudflare Pages, GitHub Pages, Vercel, and Netlify.

Next Steps

Explore the Components documentation
Read the Configuration guide
Check out the Tutorials for hands-on examples