3 posts tagged with "Tutorial"

Nocturne outputs pure static HTML. That means you can host it for free on Cloudflare Pages.

Here's the full walkthrough.

Prerequisites​

• Nocturne installed locally
• A GitHub account
• A Cloudflare account (free)

Step 1 — Push to GitHub​

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/YOUR_USERNAME/nocturne-docs.git
git push -u origin main

Step 2 — Test the Build​

npm run build

You should see:

[SUCCESS] Generated static files in "build".

Step 3 — Connect to Cloudflare Pages​

1. Go to pages.cloudflare.com
2. Click Create a project
3. Click Connect to Git
4. Authorize Cloudflare
5. Select your repository

Step 4 — Configure Build​

Step 5 — Deploy​

Click Save and Deploy.

After 1–2 minutes, your site is live at:

https://your-project.pages.dev

Step 6 — Custom Domain​

1. Project → Custom domains
2. Click Set up a domain
3. Enter your domain
4. Follow the DNS instructions

Automatic Rebuilds​

Every push to main triggers a new build:

git add .
git commit -m "Update docs"
git push

Cloudflare rebuilds automatically.

Get Nocturne​

Get Nocturne on Gumroad — $145 →

Decap CMS is a Git-based CMS. It gives you a browser-based editor for your Docusaurus site — no backend needed.

Here's how to add it.

Why Decap CMS?​

• Git-based — content lives in your repo
• No backend — no server to maintain
• Free — runs from a CDN
• Open source — no lock-in

Step 1 — Create the Admin Files​

Create two files:

static/admin/index.html
static/admin/config.yml

static/admin/index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Content Manager</title>
</head>
<body>
  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
</body>
</html>

static/admin/config.yml:

backend:
  name: proxy
  proxy_url: http://localhost:8081/api/v1
  branch: main

local_backend: true

media_folder: "static/img"
public_folder: "/img"

collections:
  - name: "blog"
    label: "Blog Posts"
    folder: "blog"
    create: true
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }

Step 2 — Run Locally​

Open two terminals:

Terminal 1:

npx decap-server

Terminal 2:

npm start

Open:

http://localhost:3000/admin/index.html

Step 3 — Log In​

Click Login. No password required in local mode.

Step 4 — Edit Content​

1. Click a collection
2. Click a file
3. Edit the fields
4. Click Save

What Nocturne Adds​

Nocturne ships with Decap CMS pre-configured for:

• Site settings
• Navbar & footer
• Sidebar widgets
• Homepage content
• Documentation
• Blog posts

No setup required.

Get Nocturne​

Get Nocturne on Gumroad — $145 →

GitBook is a hosted documentation platform. It's convenient — but it comes with monthly costs and vendor lock-in.

Docusaurus is the open-source alternative. You own everything.

Here's how to migrate.

Why Migrate​

Docusaurus saves you $96–$600 per year.

Step 1 — Export GitBook Content​

1. Open your GitBook space
2. Click Settings → Export
3. Choose Markdown
4. Download the .zip

Step 2 — Organize Content​

Move the Markdown files to your Docusaurus docs/ folder:

mkdir docs/
mv gitbook-export/*.md docs/

Step 3 — Fix Frontmatter​

GitBook uses --- frontmatter. Docusaurus does too. But some fields differ.

Most frontmatter carries over unchanged.

Step 4 — Add to Sidebar​

Edit sidebars.ts:

{
  type: 'category',
  label: 'Guides',
  items: [
    'getting-started',
    'advanced',
  ],
},

Step 5 — Deploy​

Push to GitHub, deploy to Cloudflare Pages.

See Deploy Nocturne → for details.

What About GitBook Features?​

Get Nocturne​

Get Nocturne on Gumroad — $145 →