Architecture

Nocturne is a Docusaurus 3 project with a premium theme and Decap CMS pre-configured.

This page documents the folder structure and how the pieces fit together.

---

Top-Level Structure

nocturne/
├── blog/               ← Blog posts
├── docs/               ← Documentation
├── src/
│   ├── components/     ← React components
│   ├── css/            ← Stylesheets
│   ├── data/           ← JSON data files
│   └── pages/          ← Static pages
├── static/
│   ├── admin/          ← Decap CMS config
│   └── img/            ← Images
├── docusaurus.config.ts
├── sidebars.ts
├── package.json
└── README.md

---

docs/ — Documentation

The docs/ folder contains all documentation pages.

docs/
├── intro.md
├── getting-started/
│   ├── _category_.json
│   ├── index.md
│   ├── installation.md
│   ├── local-setup.md
│   └── cloud-setup.md
├── configuration/
│   ├── _category_.json
│   ├── index.md
│   ├── docusaurus-config.md
│   ├── sidebar-config.md
│   ├── decap-cms.md
│   └── data-files.md
├── customization/
│   ├── _category_.json
│   ├── index.md
│   ├── theme.md
│   ├── components.md
│   └── css.md
├── developer-guide/
│   ├── _category_.json
│   ├── index.md
│   ├── architecture.md
│   ├── add-new-doc.md
│   └── add-new-category.md
└── changelog.md

Every .md file becomes a documentation page.

Every folder with _category_.json becomes a sidebar category.

---

src/ — React Source

src/
├── components/         ← React components
│   ├── Home/           ← Homepage sections
│   ├── Blog/           ← Blog components
│   ├── Navbar/         ← Navbar
│   └── Footer/         ← Footer
├── css/
│   └── nocturne.css    ← Main stylesheet
├── data/               ← JSON data
│   ├── site.json
│   ├── navbar.json
│   ├── widgets.json
│   └── home.json
└── pages/
    ├── index.tsx       ← Homepage
    ├── about.md
    └── pricing.md

Components read from src/data/*.json. No hardcoded content.

Pages in src/pages/ are standalone — not in the sidebar.

---

static/ — Static Assets

static/
├── admin/
│   ├── config.yml      ← Decap CMS config
│   └── index.html      ← Decap CMS entry
└── img/
    ├── nocturne-favicon.webp
    ├── nocturne-og.webp
    └── mockup/
        ├── nocturne-hero.webp
        └── ...

Files in static/ are copied to the build root.

static/admin/ powers the Decap CMS admin panel.

---

Root Files

File	Purpose
docusaurus.config.ts	Docusaurus configuration
sidebars.ts	Sidebar structure
package.json	Dependencies and scripts
README.md	Setup guide
LICENSE	End User License Agreement

---

File Flow

Here's how a page gets built:

docs/getting-started/installation.md
        │
        ▼
Docusaurus reads frontmatter
        │
        ▼
Renders Markdown + MDX to HTML
        │
        ▼
Applies Nocturne theme
        │
        ▼
Writes to build/getting-started/installation/index.html

Same flow for blog posts, static pages, and the homepage.

---

Data Flow

Here's how a homepage section renders:

src/data/home.json
        │
        ▼
src/components/Home/Hero.tsx reads the JSON
        │
        ▼
Renders React component with data
        │
        ▼
src/pages/index.tsx imports and uses the component
        │
        ▼
Homepage shows the hero section

This is why Decap CMS works — it edits the JSON, not the component.

---

Build Process

When you run npm run build:

1. Docusaurus reads all .md, .mdx, .json, .ts, .tsx files
2. Renders every page to static HTML
3. Runs Pagefind to index all pages
4. Outputs everything to build/

No server. No database. Just static files.

---

Deployment

The build/ folder is ready to deploy anywhere:

Provider	Command
Cloudflare Pages	npm run build, output build
Vercel	npm run build, output build
Netlify	npm run build, output build
GitHub Pages	Push build/ to gh-pages

See Cloud Setup for details.

---

What's Next?

Now let's add a new documentation page.

👉 Next: Add New Doc →