MODULE 5

LÊN SÓNG TRÊN CLOUDFLARE


File index.html của cô Lan giờ đã đầy đủ: 9 section, khối thanh toán QR chạy thật. Việc còn lại chỉ là đưa đúng file đó lên internet — không cài phần mềm, không gõ lệnh, không cần biết "deploy" nghĩa là gì trước khi làm được.


Bước 5.1

Tạo tài khoản Cloudflare (miễn phí)

Xong bước này bạn có: Một tài khoản Cloudflare sẵn sàng nhận file.


Vì sao chọn Cloudflare Pages, không phải chỗ khác

  • Miễn phí không giới hạn băng thông cho trang tĩnh — khác với nhiều dịch vụ free tier khác giới hạn lượt xem/tháng.
  • Không cần thẻ tín dụng để đăng ký gói miễn phí.
  • Không cần biết git/GitHub — có đường kéo-thả file trực tiếp, gọi là Direct Upload.
  • Link nhận được ngay có dạng tencuaban.pages.dev — chạy HTTPS sẵn, cần cho khối thanh toán QR ở Module 4 hoạt động ổn định.

Các bước

  1. Vào dash.cloudflare.com, bấm Sign up.
  2. Điền email, đặt mật khẩu, xác nhận qua email.
  3. Đăng nhập vào — chưa cần thêm domain hay thanh toán gì cả.



Bước 5.2

Deploy bằng Direct Upload: kéo-thả, có link ngay

Xong bước này bạn có: Trang sống thật trên internet, ai cũng bấm vào xem được.


Các bước (đúng theo giao diện Cloudflare hiện tại)

  1. Trong Cloudflare dashboard, vào mục Workers & Pages.
  2. Bấm Create application → Pages (hoặc mục tương đương) → Get started → chọn Upload assets / Direct Upload.
  3. Đặt tên dự án — đây sẽ là phần đầu của link, ví dụ đặt tienganh-conglan thì link ra là tienganh-conglan.pages.dev. Chỉ dùng chữ thường, số, dấu gạch ngang, không dấu tiếng Việt.
  4. Kéo cả thư mục chứa index.html (hoặc file zip chứa nó) thả vào khung upload.
  5. Bấm Deploy site (hoặc Save and Deploy).
  6. Đợi vài giây — Cloudflare trả về link dạng https://<tên-dự-án>.pages.dev.

✅ Kết quả thật — đã deploy, không phải ảnh chụp dựng sẵn

File index.html của cô Lan (đúng bản đã qua Module 3 + Module 4, có khối thanh toán QR) đã được đưa lên Cloudflare Pages thật, project tên landingkit-demo-khoahoc. Kết quả:

✨ Deployment complete! Take a peek over at https://landingkit-demo-khoahoc.pages.dev

Mở link này bằng trình duyệt thật: trang tải đúng, tiêu đề tab hiện "Nói trọn ý trong cuộc họp tiếng Anh sau 8 tuần", cuộn hết trang không lỗi, mở tab Console (F12) — 0 dòng lỗi đỏ. Khối thanh toán ở cuối trang vẫn hoạt động y hệt như khi test trên máy ở Module 4 — vì đây chính là file đó, chỉ khác chỗ chứa.


⚠️ Ba lỗi hay gặp

Kéo nhầm cả thư mục chứa file thừa (DESIGN.md, prompt-code-hoa.md). Không hỏng trang, nhưng các file này sẽ công khai truy cập được qua link (ví dụ tencuaban.pages.dev/DESIGN.md). Chỉ nên upload đúng 1 file index.html (và các file ảnh nếu có), không kéo cả thư mục làm việc của bạn.

Đặt tên dự án có dấu hoặc khoảng trắng. Cloudflare tự động từ chối hoặc đổi ký tự — kiểm tra kỹ link nhận được có đúng như dự định không trước khi chia sẻ.

Tưởng phải "publish" hay "go live" thêm một bước nữa. Không có bước nào khác — deploy xong là link chạy được ngay lập tức, thật sự nhận khách được từ giây đó.




Bước 5.3

Test link thật trên điện thoại

Xong bước này bạn có: Bằng chứng trang chạy đúng trên chính thiết bị khách hàng sẽ dùng.


Vì sao không thể chỉ tin vào máy tính

Máy tính hiển thị đẹp không có nghĩa điện thoại cũng vậy — đây là lý do Module 3 đã bắt kiểm tra responsive trước khi deploy. Bước này kiểm tra lại lần cuối, trên bản đã sống thật, vì đôi khi phông chữ tải từ Google Fonts chậm hơn trên mạng di động so với khi mở file ngay trên máy.

Cách test

  1. Gửi link .pages.dev cho chính mình qua Zalo/tin nhắn.
  2. Mở bằng trình duyệt điện thoại, không mở qua app Zalo/Facebook (trình duyệt trong app đôi khi hiển thị khác trình duyệt thật).
  3. Cuộn hết trang, thử bấm nút CTA, thử điền form thanh toán, thử quét QR bằng app ngân hàng ngay trên máy đó.
  4. Tắt wifi, dùng 4G thử lại một lần — mạng di động thường chậm hơn, kiểm tra trang có tải được trong vài giây không.

⚠️ Ba lỗi hay gặp

Chỉ mở link qua trình duyệt trong app Messenger/Zalo tự mở. Một số trình duyệt nhúng trong app chặn tính năng clipboard hoặc mở link ngoài khác với trình duyệt thật (Chrome/Safari) — luôn test bằng trình duyệt gốc của điện thoại ít nhất một lần.

Test một loại điện thoại rồi coi là xong. Nếu có thể, mượn thêm một máy khác hệ điều hành (một máy Android, một máy iPhone) — hai hệ hiển thị font và khoảng cách hơi khác nhau.

Không thử mạng di động, chỉ test qua wifi nhà. Wifi thường nhanh hơn nhiều so với 4G — trải nghiệm tải trang có thể khác hẳn.




Bước 5.4

Gắn domain riêng (không bắt buộc)

Xong bước này bạn có: Link đẹp hơn, ví dụ khoahoc.tencuaban.com thay vì .pages.dev — chỉ cần làm nếu bạn đã có sẵn domain.


Khi nào nên làm bước này

Nếu bạn chưa có domain riêng, bỏ qua bước này — link .pages.dev vẫn chạy đầy đủ, HTTPS đầy đủ, không thiếu tính năng gì so với domain riêng. Domain riêng chỉ giúp link dễ nhớ hơn khi in poster/danh thiếp.

Các bước (nếu đã có domain)

  1. Trong dự án Pages vừa tạo, vào tab Custom domains.
  2. Bấm Set up a custom domain, gõ domain hoặc subdomain bạn muốn (ví dụ khoahoc.tenban.com).
  3. Cloudflare chỉ dẫn bạn thêm 1 bản ghi DNS (thường là CNAME) — nếu domain đã dùng Cloudflare để quản lý DNS, bước này tự động; nếu domain ở nhà cung cấp khác, làm theo đúng hướng dẫn Cloudflare hiện ra.
  4. Đợi vài phút tới vài giờ để DNS cập nhật, sau đó domain riêng trỏ đúng về trang của bạn.

⚠️ Ba lỗi hay gặp

Cố gắn domain riêng dù chưa từng mua domain nào. Mua domain là một bước riêng (qua Namecheap, Cloudflare Registrar...), không nằm trong phạm vi bước này — làm khi thực sự cần.

Xoá nhầm bản ghi DNS cũ đang dùng cho email công ty. Nếu domain đang dùng cho email, chỉ thêm bản ghi mới theo đúng hướng dẫn, không xoá bản ghi có sẵn.

Nôn nóng vì domain chưa chạy ngay. DNS cần thời gian lan truyền — đợi ít nhất 1-2 giờ trước khi kết luận có lỗi.




Bước 5.5

Cách cập nhật trang sau này

Xong bước này bạn có: Biết cách sửa nội dung trang đã sống mà không làm mất link cũ.


Không có CMS — nghĩa là sửa file, upload lại

Trang này không có ô "chỉnh sửa nội dung" như website WordPress. Muốn đổi một câu chữ, một mức giá, cách làm luôn là:

  1. Mở lại file index.html gốc trên máy (hoặc nhờ AI mở/sửa như đã làm ở Module 3).
  2. Nhờ AI sửa đúng chỗ cần đổi — dùng đúng nguyên tắc ở bước 3.3: nói rõ section nào, sai cái gì, nên thành gì.
  3. Vào lại dự án Pages trên Cloudflare, vào tab Deployments, tạo bản deploy mới bằng cách kéo-thả lại file đã sửa.
  4. Link .pages.dev (hoặc domain riêng) giữ nguyên — chỉ nội dung thay đổi.

Khi nào việc này bắt đầu bất tiện

Nếu bạn thấy mình sửa giá/lịch khai giảng nhiều lần mỗi tuần, đây là dấu hiệu nên tách phần hay đổi (giá, ngày khai giảng, số chỗ còn lại) ra một chỗ dễ sửa hơn — nhưng với tần suất sửa vài lần mỗi tháng như hầu hết khoá học, quy trình sửa-file-upload-lại là đủ dùng, không cần thêm hệ thống phức tạp.


⚠️ Ba lỗi hay gặp

Tạo dự án Pages mới mỗi lần sửa thay vì deploy đè lên dự án cũ. Việc này tạo ra link mới, làm hỏng mọi link cũ đã chia sẻ (poster, tin nhắn, quảng cáo đang chạy). Luôn vào đúng dự án cũ, thêm deployment mới.

Sửa file nhưng quên đổi luôn cả CONFIG thanh toán nếu đổi giá. Nếu tăng/giảm giá khoá học, phải sửa cả price trong khối thanh toán Module 4, không chỉ sửa chữ ở section GIÁ.

Không lưu bản backup trước khi nhờ AI sửa. Luôn giữ lại bản index.html đang chạy tốt (đổi tên thành index-backup.html trên máy) trước khi để AI sửa bản đang dùng.