Hành trình chuyển đổi từ WordPress sang Astro khi là nontech

Hành trình chuyển đổi từ WordPress sang Astro khi là nontech

Tại sao tôi chuyển từ WordPress sang Astro?

Sau gần 5 năm chạy blog WordPress trên VPS, tôi quyết định chuyển sang Astro vì:

  • Miễn phí hoàn toàn — Không còn phải trả $5-10/tháng cho VPS
  • Nhanh hơn gấp 10 lần — Static site, không cần database
  • Không lo crash — Cloudflare infrastructure, uptime 99.99%
  • Bảo mật tốt hơn — Không có backend để hack
  • Viết bài trên điện thoại — PWA app riêng, không cần laptop

Và quan trọng nhất: Bạn KHÔNG CẦN biết code!


Yêu cầu

Phần mềm cần cài (miễn phí):

Dịch vụ cần đăng ký (miễn phí):

  • GitHub account
  • Cloudflare account

Thời gian: 2-3 giờ cho lần đầu


Bước 1: Export WordPress

1.1. Đăng nhập WordPress Admin

https://your-site.com/wp-admin

1.2. Export nội dung

Menu trái → Tools → Export
→ Chọn: All content
→ Click: Download Export File

→ Bạn sẽ có file .xml (ví dụ: myblog.WordPress.2026-02-18.xml)

Lưu file này vào máy tính, đây là toàn bộ nội dung blog của bạn.


Bước 2: Chuyển đổi XML sang Markdown

2.1. Mở Terminal/Command Prompt

Windows: Nhấn Win + R → gõ cmd → Enter

Mac: Nhấn Cmd + Space → gõ Terminal → Enter

2.2. Cài công cụ chuyển đổi

Copy dòng này vào Terminal, nhấn Enter:

npm install -g wordpress-export-to-markdown

Đợi vài giây cho đến khi thấy dòng “installed successfully”.

2.3. Chạy chuyển đổi

npx wordpress-export-to-markdown

Terminal sẽ hỏi từng câu:

Câu 1: Path to WordPress export file?

Kéo thả file .xml vào Terminal → Enter
Hoặc gõ đường dẫn đầy đủ đến file

Câu 2: Path to output folder?

Gõ: posts

→ Tạo folder posts để chứa bài viết

Câu 3: Create year folders?

Gõ: n

→ Không tạo folder theo năm

Câu 4: Create month folders?

Gõ: n

→ Không tạo folder theo tháng

Câu 5: Create a folder for each post?

Gõ: n

→ Tất cả bài viết nằm chung 1 folder

Câu 6: Prefix post folders/files with date?

Gõ: n

→ Tên file không có ngày tháng

Câu 7: Save images attached to posts?

Gõ: all

→ Tải toàn bộ ảnh về

Đợi công cụ chạy… Khi xong, bạn sẽ thấy folder posts với đầy đủ bài viết dạng .md và folder images.


Bước 3: Tạo blog Astro mới

3.1. Tạo project từ template

Vẫn trong Terminal, chạy:

npm create astro@latest my-blog -- --template starlog/astro-theme-creek --yes

Đợi vài phút để tải template…

3.2. Di chuyển bài viết vào project

cd my-blog

Copy tất cả file .md từ folder posts (bước 2.3) vào:

my-blog/src/content/posts/

Copy tất cả ảnh từ folder images vào:

my-blog/public/images/

Bước 4: Sửa đường dẫn ảnh

Ảnh từ WordPress có đường dẫn không đúng, cần fix hàng loạt.

4.1. Tạo script sửa tự động

Tạo file fix-images.js trong folder my-blog:

const fs = require('fs');
const path = require('path');

const postsDir = 'src/content/posts';
const files = fs.readdirSync(postsDir);

files.forEach(file => {
  if (!file.endsWith('.md')) return;
  
  const filepath = path.join(postsDir, file);
  let content = fs.readFileSync(filepath, 'utf8');
  
  // Sửa đường dẫn ảnh
  content = content.replace(/!\[\]\(images\//g, '![](/images/');
  content = content.replace(/coverImage:/g, 'image:');
  
  fs.writeFileSync(filepath, content);
  console.log('Fixed:', file);
});

console.log('Done!');

4.2. Chạy script

node fix-images.js

→ Tất cả đường dẫn ảnh được sửa tự động.


Bước 5: Test blog trên máy

npm install
npm run dev

Mở browser, vào: http://localhost:4321

→ Bạn sẽ thấy blog của mình chạy!

Kiểm tra:

  • Các bài viết hiển thị đúng không?
  • Ảnh có load được không?
  • Các link có hoạt động không?

Nếu OK → Tiếp tục bước 6. Nếu có lỗi → Xem phần Troubleshooting cuối bài.


Bước 6: Đưa code lên GitHub

6.1. Tạo repository trên GitHub

  1. Vào github.com → Đăng nhập
  2. Click nút “New” (góc trái trên)
  3. Điền:
    • Repository name: my-blog
    • Description: My personal blog
    • Chọn: Public
  4. Click “Create repository”

6.2. Push code lên GitHub

Copy 3 dòng lệnh GitHub hiện ra (dạng như sau), paste vào Terminal:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/my-blog.git
git push -u origin main

→ Code đã lên GitHub!


Bước 7: Deploy lên Cloudflare Pages

7.1. Tạo Cloudflare account

Vào dash.cloudflare.com → Sign up (miễn phí)

7.2. Tạo Pages project

Dashboard → Workers & Pages → Create → Pages
→ Connect to Git → GitHub
→ Chọn repository: my-blog
→ Framework preset: Astro
→ Build command: npm run build
→ Build output directory: dist
→ Click: Save and Deploy

Cloudflare sẽ build blog của bạn (~2-3 phút).

Xong! Bạn sẽ có URL kiểu: https://my-blog-abc.pages.dev


Bước 8: Kết nối domain riêng (tùy chọn)

Nếu bạn có domain (ví dụ: myblog.com):

8.1. Thêm domain vào Cloudflare

Dashboard → Add site → Nhập domain → Add site
→ Chọn plan Free → Continue

8.2. Đổi Nameservers

Cloudflare sẽ cho 2 nameservers, ví dụ:

alice.ns.cloudflare.com
bob.ns.cloudflare.com

→ Vào nhà cung cấp domain (GoDaddy/Namecheap/…) → Đổi nameservers

8.3. Kết nối domain với Pages

Pages project → Custom domains → Set up a custom domain
→ Nhập domain: myblog.com
→ Activate domain

Chờ vài phút → Domain hoạt động!


Bước 9: Setup auto-deploy

Giờ mỗi khi bạn đẩy code mới lên GitHub, blog tự động build và deploy.

9.1. Tạo GitHub Actions workflow

Tạo file .github/workflows/deploy.yml:

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      
      - name: Install dependencies
        run: npm install
      
      - name: Build
        run: npm run build
      
      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: my-blog
          directory: dist
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

9.2. Thêm Cloudflare secrets

Lấy API Token:

Cloudflare → My Profile → API Tokens
→ Create Token → Edit Cloudflare Workers
→ Permissions: Account - Cloudflare Pages - Edit
→ Create Token → Copy

Lấy Account ID:

Dashboard → Workers & Pages → Account ID (góc phải)

Thêm vào GitHub:

GitHub repository → Settings → Secrets and variables → Actions
→ New repository secret

Name: CLOUDFLARE_API_TOKEN
Value: (paste token)

Name: CLOUDFLARE_ACCOUNT_ID
Value: (paste account ID)

9.3. Enable GitHub Actions permissions

Repository → Settings → Actions → General
→ Workflow permissions
→ Chọn: Read and write permissions
→ Save

Xong! Giờ mỗi khi push code:

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

→ Blog tự deploy sau 2-3 phút.


Bước 10: Viết bài mới

Cách 1: Viết trực tiếp trên máy

Tạo file mới trong src/content/posts/, ví dụ hello-world.md:

---
title: "Bài viết đầu tiên"
date: 2026-02-18
categories: blog
tags:
  - hello
  - first-post
image: ""
---

Nội dung bài viết ở đây...

Sau đó:

git add .
git commit -m "Add new post"
git push

Cách 2: Viết trên điện thoại (cao cấp)

Sử dụng Toolbox PWA (hướng dẫn riêng) - viết và publish trực tiếp từ iPhone/Android.


Chi phí so sánh

Hạng mụcWordPress (VPS)Astro (Cloudflare)
Hosting$5-10/tháng$0
Domain$10-15/năm$10-15/năm
SSLMiễn phí (Let’s Encrypt)Miễn phí (Cloudflare)
BackupTự setupTự động (Git)
CDNTrả thêmMiễn phí
Tổng/năm$60-120$10-15

Tiết kiệm 80-90% chi phí


Troubleshooting

Lỗi: “Module not found”

rm -rf node_modules package-lock.json
npm install

Lỗi: Ảnh không hiển thị

Kiểm tra đường dẫn trong file .md:

  • Đúng: ![](/images/photo.jpg)
  • Sai: ![](images/photo.jpg)

Lỗi: GitHub Actions failed

Actions tab → Click workflow failed → Xem logs
Thường do: thiếu secrets hoặc sai tên project

Build lỗi: “Cannot find module”

Kiểm tra package.json có đầy đủ dependencies không:

npm install

Kết luận

Sau khi hoàn thành, bạn có:

  • Blog tĩnh siêu nhanh
  • Miễn phí hosting vĩnh viễn
  • Auto-deploy khi push code
  • SSL miễn phí
  • CDN toàn cầu miễn phí
  • Backup tự động qua Git

Không còn lo: ❌ VPS crash ❌ WordPress bị hack ❌ Database lỗi ❌ Hết tiền hosting


Câu hỏi thường gặp

Q: Tôi không biết code, có làm được không?
A: Có! Chỉ cần copy/paste các lệnh trong bài hướng dẫn.

Q: Mất bao lâu để chuyển đổi?
A: 2-3 giờ cho lần đầu. Lần sau nhanh hơn vì đã quen.

Q: Có mất phí không?
A: 100% miễn phí cho blog cá nhân (traffic < 100K/tháng).

Q: Nếu muốn quay lại WordPress?
A: Giữ file XML export, bạn luôn có thể import lại.

Q: SEO có ảnh hưởng không?
A: Không, Astro tốt hơn WordPress về SEO (tốc độ nhanh hơn).


Tài liệu tham khảo


Toàn bộ hành trình dịch chuyển hệ thống từ Wordpress của mình sang Astro, đơn giản là nhẹ nhàng, viết dạng Markdown vì mình dùng Obisidian khá nhiều.