Đưa deck lên mạng bằng Cloudflare

Deck này là site tĩnh: chỉ có HTML, CSS, JS và ảnh. Không có backend, không có database, không có gì phải chạy trên server. Nên "đưa lên mạng" ở đây đơn giản là copy thư mục này lên Cloudflare, không phải dựng server.

Địa chỉ hiện tại: https://met-deck.met-deck.workers.dev

0. Bốn chữ cần hiểu trước

1. Đẩy bản mới lên — việc bạn sẽ làm thường xuyên

Mở terminal, vào đúng thư mục met-deck, chạy một dòng:

cd /home/hieutao/meschool/met-deck
npx wrangler deploy

Hết. Khoảng 10 giây, cuối màn hình hiện ra:

Uploaded met-deck (6.12 sec)
Deployed met-deck triggers (1.20 sec)
  https://met-deck.met-deck.workers.dev
Current Version ID: 313685eb-...

Thấy dòng Deployed là xong, bản mới đã live ngay, không phải chờ.

Lệnh là wrangler deploy, không phải wrangler pages deploy. Pages bản cũ dùng pages deploy; project này nằm trên bản mới đã gộp vào Workers.

Nếu máy chưa đăng nhập

Lần đầu trên một máy mới sẽ báo lỗi chưa xác thực. Chạy:

npx wrangler login

Nó mở browser cho bạn bấm Allow. Token lưu lại, các lần sau không phải làm nữa. Kiểm tra đang đăng nhập bằng ai:

npx wrangler whoami

Nếu output có dòng WARNING về missing OAuth scopes thì bỏ qua — mấy scope đó dành cho tính năng khác, không liên quan tới việc đẩy site tĩnh.

2. Ba file cấu hình trong thư mục

Đừng xoá ba file này, nhưng cũng gần như không bao giờ phải sửa.

wrangler.jsonc

{
  "name": "met-deck",          // tên project trên Cloudflare — đổi là tạo project khác
  "compatibility_date": "...", // để nguyên
  "observability": { "enabled": true },
  "assets": { "directory": "." }  // đẩy toàn bộ thư mục này lên
}

.assetsignore

assets.directory là . nghĩa là cả thư mục, kể cả file không phải nội dung site. .assetsignore liệt kê những gì không đẩy lên. Cú pháp giống .gitignore:

.wrangler
wrangler.jsonc
tools
docs
plans

Vì sao cần: không có file này thì wrangler.jsonc và .wrangler/cache/wrangler-account.json (chứa Cloudflare account ID của bạn) bị phục vụ công khai trên web. Thêm thư mục mới không muốn public thì thêm một dòng vào đây.

_headers

Khai thêm HTTP header cho file tĩnh. Hiện chỉ có một việc:

/*.md
  Content-Type: text/markdown; charset=utf-8

Vì sao cần: Cloudflare trả file .md với Content-Type: text/markdown không kèm charset, browser bèn đoán là windows-1252 và tiếng Việt vỡ hết dấu. File HTML không bị vì có sẵn thẻ <meta charset> bên trong; markdown thô thì không có gì để bấu víu.

Lưu ý khi sửa file này: mỗi file chỉ nên khớp đúng một rule. Nếu viết cả /README.md lẫn /*.md thì Cloudflare nối hai giá trị lại thành text/markdown; charset=utf-8, text/markdown; charset=utf-8 — sai chuẩn.

_redirects

Đẩy các link .md cũ sang bản HTML đọc được:

/README.md                  /huong-dan            301
/docs/deploy-cloudflare.md  /docs/deploy-cloudflare  301

Vì sao cần: nút Hướng dẫn từng trỏ thẳng vào README.md. Browser nhận Content-Type: text/markdown nên đổ ra mã nguồn thô — dấu #, dấu |, dấu backtick — chứ không phải văn bản có định dạng. Nay nút trỏ vào huong-dan.html do tools/build-guide.js sinh ra; rule trên lo nốt cho ai còn giữ link cũ.

Đích viết không có đuôi .html vì Cloudflare tự bỏ đuôi khỏi URL — xem mục 7.

3. Xem project trên dashboard

Vào https://dash.cloudflare.com, đăng nhập.

Đường đi: sidebar bên trái → Workers & Pages → bấm vào met-deck trong danh sách.

Lối tắt: https://dash.cloudflare.com/?to=/:account/workers/services/view/met-deck/production — Cloudflare tự điền account của bạn vào chỗ :account. Nếu link này không vào đúng chỗ (Cloudflare đổi giao diện khá thường xuyên) thì đi theo đường menu ở trên, đường đó luôn đúng.

Bên trong project có mấy tab đáng biết:

4. Gắn domain riêng

Bạn đã có domain trên Cloudflare nên bước này không phải sửa DNS tay, không phải xin certificate.

1. Vào project met-deck → Settings → Domains & Routes
2. Bấm Add → Custom Domain
3. Nhập subdomain muốn dùng, ví dụ met.tendomain.com
4. Bấm xác nhận

Cloudflare tự tạo DNS record và tự cấp SSL. Chờ khoảng một phút là vào được bằng https://met.tendomain.com. Địa chỉ .workers.dev cũ vẫn chạy song song.

5. Quay về bản cũ khi đẩy lên bị sai

Cách nhanh nhất qua dashboard: project → tab Deployments → tìm bản chạy tốt trước đó → mở menu của dòng đó → Rollback.

Qua dòng lệnh, xem danh sách bản trước:

npx wrangler deployments list

Cách chắc chắn và dễ hiểu nhất: sửa lại file cho đúng rồi npx wrangler deploy lần nữa. Deploy rẻ và nhanh, không cần tiếc.

6. Kiểm tra sau khi deploy

Mở browser vào site là cách kiểm tra thật nhất. Muốn kiểm nhanh bằng lệnh:

B=https://met-deck.met-deck.workers.dev
for p in / /outline.html /decks/00-nen-mong.html /data/cards-00.js; do
  printf "%-32s %s\n" "$p" "$(curl -sLo /dev/null -w '%{http_code}' $B$p)"
done

Tất cả phải ra 200.

Kiểm tra file không được public đã bị loại đúng chưa:

curl -sLo /dev/null -w '%{http_code}\n' $B/wrangler.jsonc   # phải ra 404

7. Mấy điều khác với lúc chạy offline

Đuôi .html bị bỏ khỏi URL. Vào /outline.html sẽ bị chuyển sang /outline. Đây là hành vi mặc định của Cloudflare, không phải lỗi. Mọi link trong deck vẫn chạy đúng: ảnh và JS resolve giống cũ vì cùng thư mục gốc, còn link trích dẫn sang PDF cũng đúng vì assets/js/deck.js tính đường dẫn từ thẻ <script> chứ không đọc URL.

Tiến độ học không chuyển từ bản offline sang. Tiến độ nằm trong localStorage, gắn chặt với địa chỉ. Bản mở bằng file:// và bản trên https:// là hai kho riêng, không thấy nhau. Ai đang học dở thì dùng khối sao lưu tiến độ ở trang chủ để xuất ra rồi nhập lại sau khi lên web.

Tiến độ vẫn riêng từng máy, từng browser. Không có server thì không có đồng bộ. Cùng một người học trên máy tính và điện thoại là hai tiến độ khác nhau. Muốn đồng bộ thì phải thêm backend, là việc lớn hơn nhiều.

Thư mục sources/ đang công khai. Ba file tong-quan-met.pdf, ke-hoach-hanh-dong-met-2026.pdf, action-plan-met-2026.xlsx ai có link đều tải được, và Google có thể index. Đây là lựa chọn có ý thức để 139 link trích dẫn trong deck chạy được. Muốn đổi thì có hai đường: thêm robots.txt để chặn crawler (link vẫn chạy), hoặc bật Cloudflare Access để khoá cả site theo email (free tới 50 người).

8. Gặp lỗi thì làm gì

9. Hạn mức miễn phí

Gói free thừa sức cho deck này:

Không có gì phải lo về chi phí.