Đưa web lên mạng miễn phí bằng cách nào?

Với trang tĩnh (chỉ HTML/CSS/JS), có nhiều dịch vụ hosting miễn phí: GitHub Pages (đưa code lên GitHub là có web), Netlify và Vercel (kéo-thả thư mục hoặc nối GitHub là tự deploy). Bạn không cần mua máy chủ hay tên miền — mỗi dịch vụ cho sẵn một địa chỉ web miễn phí để chia sẻ ngay.

GitHub Pages và Netlify khác nhau thế nào?

GitHub Pages gắn liền với GitHub: bạn đẩy code lên kho rồi bật Pages, hợp nếu đã quen Git. Netlify (và Vercel) linh hoạt hơn: có thể kéo-thả cả thư mục dự án lên là xong, hoặc nối GitHub để tự động deploy mỗi khi cập nhật. Người mới muốn nhanh nhất có thể dùng cách kéo-thả của Netlify; muốn gắn với quy trình Git thì chọn GitHub Pages.

Trang web lên mạng rồi có mất tiền không?

Các dịch vụ trên đều miễn phí cho trang tĩnh cá nhân với hạn mức rất thoải mái, đủ cho portfolio, trang giới thiệu, blog nhỏ. Bạn chỉ tốn tiền nếu muốn dùng tên miền riêng (ví dụ tenban.com) hoặc khi trang có lượng truy cập rất lớn/tính năng nâng cao. Với người mới học, hoàn toàn miễn phí.

Web cơ bản Bài 11: Đưa web lên mạng miễn phí (30 phút)

Bài 10 bạn đã có một trang cá nhân hoàn chỉnh chạy trên máy. Nhưng trang chỉ nằm trong máy bạn thì chưa ai xem được. Bài này đưa nó lên mạng miễn phí — có một địa chỉ web thật để gửi cho bạn bè, nhà tuyển dụng, hay đính vào CV. Không cần mua máy chủ, không cần tên miền: chỉ vài bước.

⏱️ Cách học bài này (~30 phút): chọn cách deploy (5’), làm theo từng bước đưa trang lên (20’), kiểm tra + xử lý lỗi (5’).

Mục tiêu bài học

Sau bài này bạn sẽ:

Hiểu hosting tĩnh miễn phí là gì.
Đưa trang lên mạng bằng GitHub Pages hoặc Netlify.
Lấy được một địa chỉ web thật để chia sẻ.
Biết cách cập nhật trang sau khi đã lên mạng.

Hai cách phổ biến (chọn một)

	GitHub Pages	Netlify (kéo-thả)
Hợp với	người đã quen Git/GitHub	người muốn nhanh nhất
Cách làm	đẩy code lên kho → bật Pages	kéo-thả thư mục dự án
Cập nhật	push code mới	kéo-thả lại (hoặc nối GitHub)

Nếu bạn đã học đưa dự án lên GitHub, chọn GitHub Pages. Muốn xong trong 2 phút mà chưa rành Git, chọn Netlify.

Cách 1: GitHub Pages

Đưa dự án lên GitHub. Tạo kho mới (ví dụ trang-ca-nhan) — để chế độ Public (tài khoản miễn phí chỉ bật được Pages với kho public) — rồi đẩy các file index.html, style.css, script.js lên (xem lại bài Git & GitHub).
Bật Pages. Trong kho, vào Settings → Pages.
Ở Source, chọn “Deploy from a branch”; rồi ở ô Branch bên dưới chọn nhánh main và thư mục / (root), bấm Save. (Kho phải có ít nhất một commit thì nhánh main mới hiện ra trong danh sách.)
Đợi 2–5 phút (lần đầu có thể hiện 404 một lúc rồi mới lên), GitHub cấp cho bạn địa chỉ dạng https://ten-ban.github.io/trang-ca-nhan/.
Cập nhật sau này: chỉ cần git add → commit → push, trang tự cập nhật.

💡 File trang chủ phải tên index.html để hiện ra khi vào địa chỉ gốc. Địa chỉ GitHub Pages cũng phân biệt hoa–thường và thường cần dấu / ở cuối — gõ thiếu dễ ra 404.

Cách 2: Netlify (kéo-thả, nhanh nhất)

Vào netlify.com, đăng ký tài khoản miễn phí.
Bấm Add new site → Deploy manually để mở khu vực kéo-thả.
Kéo cả thư mục dự án (chứa index.html) thả vào đó.
Netlify tự deploy và cấp địa chỉ dạng https://ten-ngau-nhien.netlify.app (đổi tên được trong Site settings).
Cập nhật sau này: kéo-thả lại thư mục mới, hoặc nối GitHub để tự động deploy.

Kiểm tra sau khi lên mạng

Mở địa chỉ trên điện thoại để chắc chắn responsive vẫn đẹp.
Bấm thử các nút/liên kết — JavaScript có chạy không.
Gửi link cho một người bạn nhờ mở thử ở máy khác.

Lỗi thường gặp & cách sửa

Vào địa chỉ ra trang trắng / 404 → thiếu index.html ở thư mục gốc, chọn sai nhánh, hoặc kho để Private (tài khoản free phải để Public mới bật được Pages).
CSS/JS không áp dụng khi lên mạng → đường dẫn sai chữ hoa/thường. Trên máy Windows và macOS thường không phân biệt, nhưng máy chủ phân biệt hoa–thường: Style.css khác style.css.
Ảnh không hiện → đường dẫn ảnh sai, hoặc quên đẩy file ảnh lên.
Cập nhật rồi mà web chưa đổi → trình duyệt lưu cache; thử tải lại bằng Ctrl/Cmd+Shift+R.

💾 Mang về — checklist đưa web lên mạng

[ ] File trang chủ tên đúng index.html
[ ] Đường dẫn CSS/JS/ảnh đúng chữ hoa–thường
[ ] Chọn: GitHub Pages (đã quen Git) hoặc Netlify (kéo-thả)
[ ] Deploy → lấy địa chỉ web
[ ] Mở thử trên điện thoại + máy khác
[ ] (Tuỳ chọn) đổi tên site / nối GitHub để tự deploy

Thuật ngữ chốt

Thuật ngữ	Giải thích ngắn
hosting tĩnh	Nơi lưu & phục vụ trang chỉ có HTML/CSS/JS
deploy	Đưa trang lên mạng
GitHub Pages	Hosting miễn phí gắn với kho GitHub
Netlify / Vercel	Dịch vụ deploy nhanh (kéo-thả hoặc nối GitHub)
index.html	File trang chủ mặc định

Tự kiểm tra

File trang chủ phải tên gì? (Đáp án: index.html)
Vì sao CSS chạy ở máy mà lên mạng lại lỗi? (Đáp án: máy chủ phân biệt chữ hoa–thường trong đường dẫn)
Muốn deploy nhanh không cần Git dùng gì? (Đáp án: kéo-thả thư mục lên Netlify)

Ghi nhớ nhanh

Trang tĩnh lên mạng miễn phí bằng GitHub Pages hoặc Netlify.
Trang chủ phải là index.html; đường dẫn đúng chữ hoa–thường.
Cập nhật: GitHub Pages push code; Netlify kéo-thả lại hoặc nối GitHub.

Bài tập về nhà: đưa trang cá nhân (Bài 10) lên mạng và gửi địa chỉ cho một người bạn xem thử. Bài tiếp theo — bài cuối series: Bài 12 — Học gì tiếp sau khoá Web cơ bản (sắp đăng).

Bài 11: Đưa web lên mạng bằng hosting miễn phí (GitHub Pages, Netlify)