Login

Đưa website tĩnh lên mạng miễn phí với GitHub Pages

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Làm xong trang web đầu tiên mà chỉ mình bạn xem được thì hơi tiếc. GitHub Pages cho phép bạn xuất bản website tĩnh (HTML, CSS, JavaScript) lên Internet miễn phí chỉ bằng vài thao tác, và là cách tuyệt vời để khoe portfolio hay sản phẩm học tập.

GitHub Pages phù hợp với loại website nào

GitHub Pages phục vụ các tệp tĩnh: trang HTML, hình ảnh, CSS và JavaScript chạy phía trình duyệt. Nó không chạy PHP, Node.js hay cơ sở dữ liệu phía máy chủ. Vì vậy nó rất hợp cho trang giới thiệu bản thân, landing page, tài liệu dự án, blog tạo bằng trình tạo trang tĩnh, hoặc ứng dụng React/Vue đã được build ra thư mục tĩnh.

Về giới hạn, dịch vụ có quy định về dung lượng và lưu lượng sử dụng hợp lý, và không dành cho mục đích thương mại nặng hoặc lưu trữ thông tin nhạy cảm. Bạn nên đọc điều khoản hiện hành của GitHub để biết chi tiết.

Bước 1: Chuẩn bị repository

Giả sử bạn đã có thư mục dự án với file index.html ở gốc. Hãy tạo repository mới trên GitHub (chế độ công khai), rồi đẩy code lên:

git init
git add .
git commit -m "Trang web đầu tiên"
git branch -M main
git remote add origin https://github.com/ten-ban/my-site.git
git push -u origin main

Hãy chắc chắn file trang chủ tên đúng là index.html (chữ thường), vì máy chủ phân biệt hoa thường và dùng tên này làm trang mặc định.

Bước 2: Bật GitHub Pages

  1. Trong repository, vào tab Settings.
  2. Chọn mục Pages ở thanh bên.
  3. Ở phần nguồn xuất bản (Build and deployment), chọn Deploy from a branch.
  4. Chọn nhánh main và thư mục / (root), rồi bấm Save.

Sau một hai phút, trang Settings sẽ hiện địa chỉ website, thường có dạng https://ten-ban.github.io/my-site/. Mở thử địa chỉ đó. Nếu thấy lỗi 404, hãy chờ thêm một chút và kiểm tra lại tab Actions xem quá trình triển khai đã xong chưa.

Bước 3: Sửa lỗi đường dẫn thường gặp

Vì website nằm ở đường dẫn con /my-site/, các đường dẫn tuyệt đối bắt đầu bằng dấu gạch chéo sẽ bị sai. Hãy dùng đường dẫn tương đối:

<!-- Dễ lỗi trên GitHub Pages -->
<link rel="stylesheet" href="/css/style.css">

<!-- An toàn hơn -->
<link rel="stylesheet" href="css/style.css">
<img src="images/anh.png" alt="Mô tả ảnh">

Một nguyên nhân khác hay gặp là sai chữ hoa chữ thường trong tên file. Trên Windows Anh.PNG và anh.png được coi như nhau, nhưng trên máy chủ thì không.

Bước 4: Cập nhật nội dung

Mỗi lần bạn đẩy commit mới lên nhánh đã chọn, GitHub Pages tự động xuất bản lại. Quy trình rất đơn giản:

git add .
git commit -m "Cập nhật trang giới thiệu"
git push

Nếu không thấy thay đổi, thử tải lại cứng trang bằng Ctrl + F5 vì trình duyệt có thể đang dùng bản lưu cũ.

Dùng tên miền riêng (tùy chọn)

Nếu bạn có tên miền, vào mục Pages, nhập tên miền ở ô Custom domain. Sau đó cấu hình bản ghi DNS tại nhà cung cấp tên miền theo hướng dẫn trong tài liệu của GitHub: thường là bản ghi CNAME cho tên miền phụ, hoặc các bản ghi A cho tên miền gốc. Bật tùy chọn Enforce HTTPS khi có thể để trang được bảo vệ bằng chứng chỉ.

Với dự án React hoặc Vue

Các framework này cần bước build để tạo ra thư mục tĩnh. Bạn có thể build cục bộ rồi đưa thư mục kết quả lên, hoặc dùng GitHub Actions để tự build và triển khai mỗi lần đẩy code. Đừng quên đặt đúng đường dẫn gốc (ví dụ tùy chọn base trong Vite) cho trùng với tên repository, nếu không các tệp JS và CSS sẽ không tải được.

Mẹo nhỏ

  • Đặt tên repository đặc biệt ten-ban.github.io để có website chính ở địa chỉ gốc.
  • Thêm tệp 404.html để có trang báo lỗi gọn gàng.
  • Kiểm tra giao diện trên điện thoại sau khi xuất bản.
  • Đừng đưa dữ liệu bí mật vào repository công khai.

Kết luận

GitHub Pages là cách nhanh nhất để đưa sản phẩm đầu tay lên mạng, đồng thời giúp bạn làm quen với quy trình triển khai: sửa code, commit, push, trang tự cập nhật. Một liên kết có thể gửi cho bạn bè hoặc nhà tuyển dụng có giá trị hơn rất nhiều so với thư mục nằm trên máy.

Để tiếp tục xây dựng những website hoàn chỉnh hơn, bạn có thể khám phá các khóa học phát triển web tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment