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
User โ†’ User DetailsRead
Account โ†’ Cloudflare PagesEdit
Account โ†’ Account 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 domains โ†’ Add 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:

Have ideas? Email me cnyfdr@gmail.com