Đưa website lên mạng an toàn

Vấn đề thật

Website chạy đẹp trên máy bạn. Giờ bạn muốn gửi link cho khách. Bạn tìm “cách đưa web lên mạng” và gặp hàng chục khái niệm: hosting, server, DNS, SSL, CI/CD. Hoặc tệ hơn: bạn làm app có gọi AI, đưa lên mạng, và vài ngày sau nhận hóa đơn lớn vì khóa API bị lộ trong code.

Bài này đi con đường an toàn và đơn giản nhất.

Website tĩnh và website có backend

	Tĩnh (static)	Có backend
Là gì	Chỉ gồm file HTML, CSS, JS, ảnh; máy chủ chỉ việc gửi file	Có máy chủ chạy code, thường có cơ sở dữ liệu
Ví dụ	Landing page, portfolio, blog, trang tài liệu	Đăng nhập, đặt hàng, lưu dữ liệu người dùng
Chi phí	Nhiều nơi miễn phí cho dự án nhỏ	Thường mất phí, cần quản trị
Rủi ro bảo mật	Thấp	Cao hơn nhiều

Dự án đầu tiên: làm web tĩnh. Cần nhận thông tin khách? Dùng nút mở Zalo, Messenger, email, hoặc nhúng Google Form, thay vì tự viết backend.

Ba con đường deploy web tĩnh

Các dịch vụ dưới đây đều có gói miễn phí cho website tĩnh nhỏ tại ngày kiểm tra. Điều khoản có thể thay đổi; đọc trang chính thức (link ở cuối bài).

Đường 1: Kéo thả thư mục (nhanh nhất, để thử)

Netlify có tính năng kéo thả thư mục website lên trang web của họ để nhận link ngay.

• Ưu: vài phút, không cần Git.
• Nhược: mỗi lần sửa phải kéo thả lại; không có lịch sử.
• Dùng khi: muốn gửi bản xem thử cho khách ngay hôm nay.

Đường 2: GitHub Pages

Đưa kho Git lên GitHub, bật Pages trong phần Settings của kho.

• Ưu: miễn phí, gắn liền với Git; mỗi lần đẩy (push) code mới là website tự cập nhật.
• Nhược: cần tài khoản GitHub; với tài khoản miễn phí, kho thường phải để công khai.

Đường 3: Cloudflare Pages, Vercel, Netlify (nối với GitHub)

Kết nối kho GitHub, dịch vụ tự build và deploy mỗi lần bạn push.

• Ưu: có bản xem trước (preview) cho từng thay đổi trước khi lên chính thức; quay lại bản cũ bằng một nút (rollback).
• Nhược: thêm một tài khoản để quản lý.
• Dùng khi: dự án bạn sẽ sửa lâu dài. Đây là con đường Bụi Code khuyên.

Nhờ AI hướng dẫn từng bước theo đúng công cụ của bạn:

Tôi có website tĩnh trong thư mục [tên], đã có Git và đã đẩy lên GitHub ở kho [tên kho].
Hãy hướng dẫn tôi deploy lên [Cloudflare Pages / Vercel / Netlify] từng bước,
cho người chưa làm bao giờ. Mỗi bước: tôi bấm vào đâu, nhập gì, kết quả đúng trông thế nào.
Nếu giao diện dịch vụ có thể đã thay đổi so với hiểu biết của bạn, hãy nói rõ và
dẫn link tài liệu chính thức để tôi đối chiếu.

Gắn tên miền

1. Mua tên miền tại nhà đăng ký (ở Việt Nam có nhiều nhà đăng ký cho đuôi .vn; đuôi .com mua ở đâu cũng được).
2. Trong dịch vụ deploy, tìm mục Custom domain, nhập tên miền.
3. Dịch vụ sẽ đưa các bản ghi DNS (CNAME hoặc A). Vào trang quản lý tên miền, thêm đúng các bản ghi đó.
4. Chờ cập nhật (từ vài phút tới vài giờ). Kiểm tra trang mở bằng https:// và có biểu tượng ổ khóa.

Bí mật: quy tắc sống còn

Khóa API (API key) giống chìa khóa thẻ tín dụng: ai có nó có thể dùng dịch vụ và bạn trả tiền.

Quy tắc 1: Website tĩnh không giấu được bí mật. Mọi thứ trong HTML, CSS, JS đều ai cũng xem được (chuột phải → Xem nguồn trang). Không bao giờ đặt khóa API của OpenAI, Anthropic, Google, cổng thanh toán… vào code phía trình duyệt.

Quy tắc 2: Bí mật nằm trong biến môi trường (environment variable) ở phía máy chủ, file .env trên máy bạn, và file .env không bao giờ được commit lên Git.

Tạo file .gitignore ở thư mục gốc dự án:

.env
.env.*
!.env.example
node_modules/
.DS_Store

Và file .env.example (được commit) để ghi tên biến, không có giá trị:

# Chép file này thành .env và điền giá trị thật. KHÔNG commit .env
CONTACT_FORM_ENDPOINT=

Câu cần thêm vào yêu cầu mỗi khi app có gọi dịch vụ bên ngoài:

Kiểm tra bảo mật trước khi tôi deploy:
1. Có khóa API, mật khẩu, token nào nằm trong code phía trình duyệt không? Liệt kê file và dòng.
2. File .env có trong .gitignore chưa? Lịch sử Git đã từng commit file bí mật nào chưa?
3. Có chỗ nào gọi dịch vụ trả phí trực tiếp từ trình duyệt không?
Chỉ báo cáo, chưa sửa.

Lỡ để lộ khóa thì làm gì

1. Thu hồi (revoke) khóa ngay trên trang quản lý của dịch vụ, tạo khóa mới. Xóa khỏi code là chưa đủ, vì nó vẫn nằm trong lịch sử Git và có thể đã bị sao chép.
2. Kiểm tra trang thanh toán/sử dụng của dịch vụ xem có lượt dùng lạ không.
3. Đặt giới hạn chi tiêu (spending limit) nếu dịch vụ hỗ trợ.

Kiểm tra trước khi gửi link cho ai

• Mở link trên điện thoại thật, không chỉ trên máy tính.
• Bấm mọi nút, mọi liên kết.
• Console (F12) không có lỗi đỏ.
• Không có chữ “Lorem ipsum”, “[GIÁ]”, số điện thoại giả.
• Dán link vào Zalo/Facebook: thấy đúng tiêu đề và ảnh xem trước.
• Không có bí mật trong mã nguồn trang (Xem nguồn trang, tìm chữ key, token, secret).

Checklist đầy đủ: xem Checklist trước khi deploy trong mục Checklist.

Lỗi hay gặp

• Dùng khóa API trong web tĩnh “tạm thời”. Không có “tạm thời”: bot quét mã nguồn công khai liên tục.
• Deploy thẳng bản chưa kiểm. Dùng bản preview, kiểm xong mới đưa lên chính thức.
• Quên gia hạn tên miền. Bật tự động gia hạn hoặc đặt nhắc lịch.

Việc làm ngay

1. Tạo .gitignore như mẫu trên trong dự án của bạn và commit.
2. Deploy bản hiện tại bằng đường 1 để có link thử.
3. Đi hết “Kiểm tra trước khi gửi link” và ghi kết quả vào NOTES.md.

Tóm tắt

• Bắt đầu bằng web tĩnh; nhận thông tin qua Zalo, email, Google Form.
• Ba đường deploy: kéo thả (thử nhanh), GitHub Pages, Cloudflare/Vercel/Netlify (lâu dài).
• Web tĩnh không giấu được bí mật. Khóa API không bao giờ nằm phía trình duyệt.
• Lộ khóa: thu hồi ngay, xóa code là chưa đủ.

Prompt dùng ngay cho bài này

• Quét bí mật trước khi deploy: Tìm khóa API, mật khẩu, token lọt vào code hoặc lịch sử Git trước khi đưa lên mạng.
• Soát lỗi trước khi đưa lên mạng: Danh sách kiểm tra cuối cùng trước khi deploy: link gãy, ảnh vỡ, bí mật lộ, mobile.