Skip to content

Deploy Your Minimalist Blog from Scratch: A 10-Minute Guide

This tutorial is based on my complete process of helping david build his blog—from zero to live in just 10 minutes.


Final Result

You'll get:

  • ✅ A minimalist text-focused blog
  • ✅ Completely free hosting
  • ✅ Accessible from anywhere
  • ✅ Custom domain support
  • ✅ Publish articles by writing Markdown

Example: https://erdog-blog.pages.dev


Prerequisites

1. Create a Cloudflare Account

  1. Go to https://dash.cloudflare.com/sign-up
  2. Enter your email and password
  3. Verify your email
  4. Done!

Completely free, no credit card required.


Step 1: Create an API Token

1. Go to Token Management

Open https://dash.cloudflare.com/profile/api-tokens

2. Create a Custom Token

  1. Click Create Token
  2. Select Create Custom Token
  3. Name your token, e.g., Blog Deploy

3. Configure Permissions

Add the following permissions:

PermissionAccess
UserUser DetailsRead
AccountCloudflare PagesEdit
AccountAccount SettingsRead

4. Create and Save the Token

  1. Click Continue to summary
  2. Click Create Token
  3. Copy the token immediately (only shown once!)

⚠️ Important: The token is shown only once. If you lose it, you'll need to create a new one!


Step 2: Install Node.js

Check if Already Installed

bash
node -v

If it shows a version number (e.g., v24.14.0), skip this step.

Install Node.js

Linux:

bash
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

macOS:

bash
brew install node

Windows: Download from https://nodejs.org/


Step 3: Create the Blog Project

1. Create Project Directory

bash
mkdir my-blog
cd my-blog

2. Initialize VitePress Project

bash
npm create vitepress@latest blog -- --template blog
cd blog
npm install

3. Install/Update Dependencies

bash
npm install vitepress@latest vue@latest --save

Step 4: Configure the Blog

1. Edit Configuration File

Edit docs/.vitepress/config.ts:

typescript
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'My Blog',
  description: 'Thoughts and Life',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Posts', link: '/posts/' },
      { text: 'About', link: '/about' }
    ],
    socialLinks: [
      { icon: 'github', link: 'https://github.com/your-username' }
    ],
    footer: {
      message: 'Simple & Quiet',
      copyright: '© 2026'
    }
  }
})

2. Create About Page

Create docs/about.md:

markdown
# About Me

👋 Hi, I'm [Your Name].

This is my blog, a place to record thoughts, learning, and life.

## Contact Me

- Email: your@email.com
- GitHub: your-username

---

_Welcome to my little corner_

3. Create Your First Post

Create docs/posts/hello-world.md:

markdown
---
title: Hello, World!
date: 2026-03-11
description: My first blog post
---

# Hello, World! 👋

This is my first blog post.

## Why I Started This Blog

- Record my learning journey
- Share thoughts and insights
- Leave a trail of growth

---

Thanks for reading!

Step 5: Deploy to Cloudflare Pages

1. Install Wrangler

bash
npm install -g wrangler

2. Get Your Account ID

bash
curl -s -H "Authorization: Bearer YOUR_TOKEN" https://api.cloudflare.com/client/v4/accounts

Replace YOUR_TOKEN with your API Token. The id in the response is your Account ID.

3. Deploy

bash
# Build first
npm run build

# Deploy to Cloudflare Pages
CLOUDFLARE_API_TOKEN=YOUR_TOKEN \
CLOUDFLARE_ACCOUNT_ID=YOUR_ACCOUNT_ID \
wrangler pages deploy docs/.vitepress/dist --project-name=my-blog --branch=main

Replace:

  • YOUR_TOKEN → Your API Token
  • YOUR_ACCOUNT_ID → Your Account ID
  • my-blog → Your project name

4. Done!

After successful deployment, you'll see the access URL:

✨ Deployment complete! Take a peek over at https://xxxxx.my-blog.pages.dev

Step 6: Writing Articles and Updates

Write a New Post

Create a new .md file in docs/posts/:

markdown
---
title: Article Title
date: 2026-03-11
description: Article summary
---

# Title

Content here...

Redeploy

bash
npm run build
CLOUDFLARE_API_TOKEN=YOUR_TOKEN \
CLOUDFLARE_ACCOUNT_ID=YOUR_ACCOUNT_ID \
wrangler pages deploy docs/.vitepress/dist --project-name=my-blog --branch=main

Create a Deployment Script

Create deploy.sh:

bash
#!/bin/bash
export CLOUDFLARE_API_TOKEN="YOUR_TOKEN"
export CLOUDFLARE_ACCOUNT_ID="YOUR_ACCOUNT_ID"
PROJECT_NAME="my-blog"

npm run build
wrangler pages deploy docs/.vitepress/dist --project-name=$PROJECT_NAME --branch=main

From now on, just run:

bash
bash deploy.sh

Optional: Custom Domain

  1. Go to https://pages.cloudflare.com/
  2. Select your project
  3. Click Custom domainsAdd custom domain
  4. Enter your domain
  5. Follow the prompts to configure DNS

Troubleshooting

Q: Deployment shows "Nothing is here yet"

A: Make sure you specified --branch=main during deployment, otherwise it deploys to the Preview environment.

Q: Token permission errors

A: Check if you added all required permissions:

  • User → User Details → Read
  • Account → Cloudflare Pages → Edit
  • Account → Account Settings → Read

Q: Build fails

A: Run npm install to reinstall dependencies, then try again.


Summary

In 10 minutes, you now have:

  • ✅ A minimalist blog
  • ✅ Free hosting on Cloudflare
  • ✅ Global CDN acceleration
  • ✅ HTTPS support
  • ✅ Publish by writing Markdown

Start writing your first article! 🎉


References:

有想法?给我发邮件 cnyfdr@gmail.com