Tôi đã setup blog này như thế nào

Tôi đã setup blog này như thế nào 🚀

Hôm nay tôi muốn chia sẻ quá trình xây dựng blog cá nhân này. Đó là một hành trình thú vị, có những thử thách nhưng cuối cùng thành công!

🤔 Câu hỏi đầu tiên: “Cloudflare có giải pháp nào để lưu trữ static pages?”

Lý do: Tôi đang tìm kiếm một giải pháp hosting cho blog cá nhân mà:

• Free hoặc rẻ
• Dễ dàng quản lý
• Hiệu suất cao
• Hỗ trợ custom domain

Câu trả lời: Có! Cloudflare Pages là giải pháp hoàn hảo:

• 💰 Hosting miễn phí cho static sites
• 🔗 Tích hợp Git (GitHub, GitLab)
• ⚡ Global CDN - phân phối nội dung nhanh
• 🔐 SSL/TLS tự động
• 🌍 Hỗ trợ custom domain

Các lựa chọn khác của Cloudflare:

• Cloudflare CDN - Cache và phân phối assets
• KV Storage - Lưu trữ key-value
• R2 - Object storage tương tự S3

✨ Câu hỏi thứ hai: “Setup giúp tôi một blog cá nhân trên Cloudflare”

Tôi quyết định chọn stack sau:

• Hugo - Static site generator (nhanh & đơn giản)
• GitHub - Lưu trữ mã nguồn
• Cloudflare Pages - Hosting & auto-deploy
• Custom Domain - mountain.thaimeo.info

🛠️ Các bước setup chính

Bước 1: Cài đặt Hugo & tạo project

brew install hugo
hugo new site mountain-blog
cd mountain-blog

Bước 2: Chọn theme

Tôi chọn PaperMod - theme đẹp, lightweight:

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

Bước 3: Cấu hình hugo.toml

baseURL = 'https://mountain.thaimeo.info/'
title = 'Mountain Blog'
theme = 'PaperMod'
locale = 'vi'

[pagination]
pagerSize = 5

[params]
author = 'Phi'
description = 'A personal blog about tech, life, and everything'

[[params.social]]
name = 'github'
url = 'https://github.com/hongthaiphi'

Bước 4: Tạo bài viết đầu tiên

hugo new content posts/hello-world.md

Bước 5: Đẩy lên GitHub

git add .
git commit -m "Initial blog setup"
git push origin main

Bước 6: Deploy trên Cloudflare Pages

1. Vào https://dash.cloudflare.com
2. Chọn Pages → Create project
3. Kết nối GitHub repository mountain-blog
4. Cấu hình build:
   • Build command: hugo --minify
   • Output directory: public
5. Click Save & Deploy

⚠️ Những vấn đề gặp phải & giải pháp

Vấn đề 1: Hugo version deprecated config

Lỗi:

ERROR deprecated: site config key paginate was deprecated

Nguyên nhân: Hugo version trên Cloudflare (0.147.7) cũ hơn local (0.161.0)

Giải pháp:

• Thay paginate = 5 bằng [pagination] pagerSize = 5
• Thêm .env.production để set HUGO_VERSION=0.161.0

Vấn đề 2: Cloudflare auto-generate Wrangler config

Lỗi:

Executing user deploy command: npx wrangler deploy
ERROR: Missing entry-point to Worker script

Nguyên nhân: Cloudflare tự động detect và tạo Wrangler config cho static site, nhưng cấu hình sai

Giải pháp: Tạo minimal wrangler.jsonc:

{
  "name": "mountain-blog",
  "compatibility_date": "2026-04-29",
  "assets": {
    "directory": "public"
  }
}

📝 Cách viết bài viết mới

Quá trình thực sự đơn giản:

Bước 1: Tạo post mới

hugo new content posts/tên-bài-viết.md

Bước 2: Tạo folder cho ảnh (nếu có)

mkdir -p content/posts/tên-bài-viết
# Copy ảnh vào folder này
cp image.jpg content/posts/tên-bài-viết/

Bước 3: Edit markdown file

+++
date = '2026-04-29T16:00:00+07:00'
draft = false
title = 'Tiêu đề bài viết'
description = 'Mô tả ngắn'
tags = ['tag1', 'tag2']
+++

## Nội dung bài viết

Viết nội dung ở đây...

### Thêm hình ảnh

![Mô tả](image.jpg)

Bước 4: Test locally

hugo server
# Vào http://localhost:1313 để xem trước

Bước 5: Commit & push

git add .
git commit -m "Add new post: tên bài"
git push origin main

✅ Cloudflare Pages sẽ tự động build & deploy trong 1-2 phút!

🔄 Workflow tổng quát

Local (Edit) 
    ↓
Git Commit
    ↓
Git Push to GitHub
    ↓
Cloudflare Pages (Auto-detect)
    ↓
Hugo Build (hugo --minify)
    ↓
Deploy to Production
    ↓
Live on mountain.thaimeo.info 🎉

📊 Stack & Tools

Tổng chi phí: Chỉ tiền domain! 💰

💡 Những điều học được

1. Hugo rất nhanh - Build trong vài trăm mili-giây
2. Static sites là future - Nhanh, bảo mật, chi phí thấp
3. Automation là vàng - Auto-deploy via git push cực tiện
4. Version control không chỉ cho code - Blog posts cũng nên version control
5. Custom domain tạo tính chuyên nghiệp - Better than *.pages.dev subdomain

🎯 Điều tiếp theo

Blog này vẫn đang phát triển. Những kế hoạch tương lai:

• 📊 Thêm Google Analytics
• 💬 Thêm comment system
• 🏷️ Tối ưu hóa SEO
• 🎨 Tùy chỉnh giao diện thêm
• 📱 Responsive design improvements

📞 Kết luận

Setup blog này không phức tạp như tôi tưởng! Nhờ:

• Hugo - generator đơn giản & mạnh mẽ
• GitHub - version control & workflow
• Cloudflare Pages - hosting miễn phí + auto-deploy

Quá trình có vài lỗi nhỏ liên quan đến config Hugo, nhưng sau khi fix là chạy smooth.

Nếu bạn cũng muốn lập blog cá nhân, stack này thực sự rất khuyến nghị! 🚀

Cảm ơn bạn đã đọc! Nếu có câu hỏi về setup blog, hãy comment hoặc liên hệ với tôi! 👋