Hướng Dẫn Tạo và Xuất Bản Trang Web Trên GitHub Pages

Mục Lục

Giới Thiệu về GitHub Pages
Bước 1: Tạo Repository trên GitHub
Bước 2: Thêm Trang Web Đầu Tiên (index.html)
Bước 3: Thêm Favicon (tùy chọn)
Bước 4: Xuất Bản Trang Web với GitHub Pages
Mẹo và Thủ Thuật
Lưu Ý Thường Gặp
Kết Luận

Giới Thiệu về GitHub Pages

Bạn có muốn tạo một trang web cá nhân hoặc trang dự án mà không phải trả phí hosting? GitHub Pages cho phép bạn lưu trữ các trang web tĩnh (HTML/CSS/JS) miễn phí — và việc này dễ hơn bạn nghĩ. Trong bài viết này, bạn sẽ học được cách:

✅ Thiết lập GitHub Pages
✅ Tạo trang chủ index.html đầu tiên
✅ Thêm favicon tùy chỉnh
✅ Xuất bản trang web của bạn tại https://yourusername.github.io/

Bước 1: Tạo Repository trên GitHub

Truy cập GitHub
Đặt tên cho repository của bạn là:
Copy
```
yourusername.github.io
```
👉 Thay thế yourusername bằng tên người dùng GitHub thực của bạn (phải khớp chính xác).
Chọn Public
Để trống mọi thứ khác (không thêm README, .gitignore, vv.)
Nhấn Create repository

Bước 2: Thêm Trang Web Đầu Tiên (index.html)

Bạn có thể làm điều này bằng cách tải lên tệp trực tiếp qua giao diện của GitHub:

Nhấn “Add file” → “Upload files”
Tạo một tệp mới có tên là index.html

Dán mã sau vào tệp:

html Copy

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <title>Chào Mừng!</title>
  <link rel="icon" href="favicon.ico" />
</head>
<body>
  <h1>Xin chào, thế giới!</h1>
  <p>Đây là trang đầu tiên của tôi sử dụng GitHub Pages.</p>
</body>
</html>

Cuộn xuống và nhấn “Commit changes”

Bước 3: Thêm Favicon (tùy chọn)

Favicon là biểu tượng nhỏ mà bạn thấy trong các tab của trình duyệt.

Tạo hoặc tải xuống một favicon.ico (bạn có thể sử dụng favicon.io)
Tải nó lên cùng repository
Đảm bảo rằng dòng này có trong <head> của bạn:
html Copy
```
<link rel="icon" href="favicon.ico" />
```

Xong! Trang web của bạn giờ đã có một phong cách cá nhân.

Bước 4: Xuất Bản Trang Web với GitHub Pages

Bây giờ là phần kỳ diệu.

Truy cập tab Settings của repository của bạn
Cuộn xuống phần "Pages" trong thanh bên (hoặc tìm kiếm nó)
Dưới "Deploy from a branch", chọn:
- Source: main hoặc master
- Folder: / (root)
1. Nhấn Save

Trong vòng 30–60 giây, trang web của bạn sẽ được xuất bản tại:

Copy

https://yourusername.github.io/

🎉 Chúc mừng, bạn đã sống!

Mẹo và Thủ Thuật

Trang chủ của bạn luôn phải được đặt tên là index.html
Bạn có thể tạo thêm các trang khác (ví dụ: about.html, projects.html) và liên kết chúng
Để có cái nhìn chuyên nghiệp hơn, hãy thêm các kiểu CSS hoặc sử dụng trình tạo trang tĩnh (như Jekyll hoặc Hugo)

Lưu Ý Thường Gặp

Favicon không hiển thị: Kiểm tra xem tệp favicon.ico đã được tải lên đúng chưa và đường dẫn trong thẻ <link> có chính xác không.
Trang không hiển thị: Đảm bảo rằng bạn đã chọn đúng nhánh và thư mục trong cài đặt GitHub Pages.

Kết Luận

GitHub Pages là lựa chọn hoàn hảo cho:

Hồ sơ cá nhân
Trang tài liệu
Trình diễn dự án
Bài tập sinh viên
Thí nghiệm web

Và phần tốt nhất? Nó miễn phí và siêu nhẹ.

Bạn đã xuất bản trang của riêng mình chưa? Hãy để lại liên kết trong phần bình luận — tôi rất muốn xem nó! 👇

📌 Theo dõi tôi để nhận thêm mẹo phát triển web, thủ thuật GitHub và dự án DIY!

Cách Tạo và Xuất Bản Trang Web của Bạn trên GitHub Pages