Dùng GitHub Pages đăng web, khỏi cài thêm gì

GitHub Pages lấy file trang web tĩnh trong repo để dựng thành trang web có link cho mọi người mở xem. Bạn cứ hiểu repo là nơi cất mọi file của trang trên GitHub.

Đọc xong bài này, bạn sẽ tự đăng được trang web lên mạng ngay trên trình duyệt. Bạn chỉ cần một tài khoản trên GitHub, nền tảng lưu mã nguồn quen thuộc của dân công nghệ.

Bạn được dùng miễn phí ở gói Free khi để repo ở chế độ công khai.

Nhiều bạn nhờ AI viết xong file trang web đẹp mê mà chưa biết gửi sao cho bạn bè mở xem liền. Tuấn thích chỉ cách này nhất vì khỏi cài phần mềm hay gõ lệnh.

Chỉ với vài dòng gõ trong file index.md ở Bước 2, trang web hiện lên đã có sẵn tiêu đề lớn, chữ đậm và danh sách gọn gàng.

1. GitHub Pages là gì? Trang web tĩnh lấy thẳng từ repo

Trang web tĩnh là trang chỉ gồm các file HTML, CSS, JavaScript có sẵn như file HTML bạn nhờ AI viết, không cần máy chủ chạy code PHP, Python hay Ruby. Còn GitHub Pages là dịch vụ lấy thẳng các file đó hoặc file .md từ repo của bạn để dựng thành trang web.

Khi mở trang, HTML dựng khung chữ, CSS chỉnh màu sắc với bố cục, JavaScript xử lý chỗ bấm tương tác. Còn file .md gõ kiểu Markdown có # làm tiêu đề, ** chữ đậm, - danh sách sẽ được GitHub chuyển thành trang.

Ngược lại, những trang cần máy chủ chạy code PHP, Python hay Ruby ở phía sau thì GitHub Pages không gánh được đâu nha.

Vậy mấy bản portfolio, trang giới thiệu sản phẩm nhờ AI xuất ra file HTML hay trang tài liệu thì sao? Mấy món đó đều là trang web tĩnh, nên Tuấn thấy người mới bỏ lên đây vừa lẹ vừa đỡ đau đầu nhất.

Trong bài này, Tuấn hướng dẫn bạn làm kiểu trang dự án, cứ mỗi repo tạo được một trang riêng. Link của trang có dạng https://your-username.github.io/ten-repo/, trong đó your-username là tên tài khoản GitHub còn ten-repo là tên repo bạn đặt.

Ngoài ra GitHub Pages còn kiểu trang tài khoản không có đuôi tên repo, cho link gọn https://your-username.github.io/ khi bạn đặt tên repo đúng bằng your-username.github.io. Mỗi tài khoản chỉ làm được tối đa một trang kiểu này thôi, mình hẹn xem ở mục 7 nhé.

2. Cần gì trước khi dùng GitHub Pages

Bạn chỉ cần một tài khoản GitHub ở gói Free giá 0 USD và để repo công khai.

Ngay trên bảng giá GitHub, dòng “Pages and wikis” ở cột Free cũng ghi rõ điều kiện là “Public repositories”.

Nguồn ảnh: github.com/pricing

Còn nếu muốn để repo riêng tư mà vẫn bật được GitHub Pages, tài khoản của bạn cần dùng gói trả phí như Pro, Team hoặc Enterprise.

Thế để repo riêng tư ở gói trả phí thì trang web tạo ra có giấu kín cho riêng mình xem được không? Không đâu bạn nhé.

Trang GitHub Pages vẫn mở công khai cho mọi người trên mạng xem, kể cả khi repo để riêng tư. Chỉ tổ chức dùng gói GitHub Enterprise Cloud mới làm được trang riêng cho người được phép xem.

Bởi vậy thói quen của Tuấn là luôn rà lại repo trước lúc bật, hễ còn dính mật khẩu hay dữ liệu nhạy cảm nào thì gỡ sạch ra trước cho yên tâm.

2.1 Trang nào không nên đưa lên, giới hạn dung lượng

Dù miễn phí nhưng GitHub không cho dùng Pages để kinh doanh online, mở trang bán hàng, làm phần mềm thu phí hay trang chủ yếu để giao dịch mua bán. Chính sách hãng cũng quy định mục đích chính của nội dung đăng qua Pages không được là quảng cáo, tiếp thị.

Tài liệu không kê riêng trang giới thiệu sản phẩm mà xét theo mục đích chính của trang, nên bạn đừng mặc định trang giới thiệu shop là được phép nếu lập ra chủ yếu để quảng cáo, tiếp thị hay bán hàng. Ngoài ra, bạn cũng đừng dựng trang nhận mật khẩu hay số thẻ tín dụng.

Theo quy định về giới hạn của GitHub, trang đăng lên được nặng tối đa 1 GB, và cả repo của bạn cũng nên giữ dưới mức 1 GB. Mỗi tháng trang còn được cấp 100 GB băng thông, tức tổng dung lượng dữ liệu khách tải về khi mở xem trang.

Mức băng thông 100 GB mỗi tháng này không phải ngưỡng chặn cứng: khi trang vượt mức, GitHub có thể tạm không cho mở trang hoặc gửi email đề nghị bạn giảm tải.

Còn với trang portfolio hay trang giới thiệu gọn nhẹ gồm chữ và vài tấm ảnh, cả trang thường chỉ nặng vài chục MB nên bạn cứ dùng thoải mái. Thật tình làm mấy trang kiểu này, Tuấn chẳng mấy khi phải bận tâm tới ngưỡng 1 GB kia.

3. Cách dùng GitHub Pages: đưa trang đầu tiên lên mạng

Khi dựng web, GitHub sẽ tìm file index.html, index.md hoặc README.md ở thư mục gốc của repo để làm file trang chủ. Thư mục gốc là chỗ file hiện ngay lúc bạn mở repo chứ không nằm trong thư mục con, trên ô chọn ghi là / (root).

Từ repo mới tới khi có link github.io, bạn chỉ làm bốn bước ngay trên web.

Khi bạn thêm file đầu tiên vào repo mới, GitHub tạo sẵn nhánh main và bài chỉ dùng nhánh này. Riêng ô Branch ở Settings → Pages lúc đầu vẫn mặc định là None, tới Bước 3 bạn mới đổi sang main.

Theo hướng dẫn tạo trang của GitHub, bài cho Pages lấy thẳng file ở nhánh main, thư mục gốc /. Tài liệu nguồn xuất bản của hãng khuyên dùng cách lấy từ nhánh khi bạn để GitHub tự dựng trang mặc định, khỏi dùng lựa chọn GitHub Actions ở Bước 3.

Chọn đường này khoẻ ở chỗ cứ mỗi lần bạn lưu thay đổi mới vào nhánh main, trang web sẽ tự cập nhật theo luôn.

Bước 1: Tạo repo công khai

Đăng nhập GitHub trên trình duyệt xong, bạn tạo một repo mới cho trang web qua ba thao tác:

1. Bấm dấu + ở góc trên bên phải của trang GitHub rồi chọn New repository để mở trang tạo repo.
2. Gõ tên repo vào ô Repository name, thấy báo is available nghĩa là tên chưa bị trùng. Tên này nằm thẳng trong link của trang nên Tuấn khuyên đặt ngắn, chữ thường không dấu, nối bằng gạch ngang.
3. Giữ Choose visibility là Public, để Add README ở mức Off như mặc định rồi bấm nút Create repository. Để Off giúp repo còn trống nên màn hình mới hiện khung Quick setup cho Bước 2 dùng, dù thật ra file README.md vẫn làm file trang chủ được.

Để Public thì ai trên mạng cũng vào xem repo được, còn ai được sửa đổi file bên trong vẫn do bạn quyết định. Riêng Private chỉ cho bạn và người được bạn chia quyền mở repo, hoặc thêm một số thành viên nếu đó là repo của tổ chức.

Bước 2: Thêm file index.md hoặc index.html

Đã có sẵn file HTML nhờ AI viết thì bạn đổi tên file trang chủ thành chữ thường index.html trên máy trước, bởi màn hình tải lên không có chỗ đặt tên file. Sau đó ngay khung Quick setup của repo trống, bạn chọn dòng uploading an existing file.

Bạn thả file vào khung hoặc chọn choose your files, nhấn Commit changes lưu vào repo rồi sang Bước 3, chi tiết màn hình tải lên nằm ở mục 4.1.

Còn nếu chưa có file sẵn, bạn bấm dòng chữ creating a new file trong khung Quick setup để tạo file mới ngay trên web.

Tiếp theo bạn đặt tên và gõ nội dung mẫu cho trang đầu tiên:

1. Tại ô tên file cạnh chữ in main, bạn gõ đúng chữ thường index.md.
2. Bấm xuống khung soạn thảo bên dưới để gõ nội dung bằng Markdown đúng sáu dòng y như khung mẫu, kể cả hai dòng để trống:

# Trang thử GitHub Pages

Trang này viết bằng **Markdown** trong file `index.md`.

- Mục một
- Mục hai

Gõ xong, bạn bấm nút Commit changes… để tạo một lần commit (lưu một thay đổi).

Hộp thoại hiện ra có sẵn dòng ghi chú cho lần commit này, bạn cứ để mặc định rồi bấm Commit changes lần nữa.

Nếu chưa quen dấu # hay cặp dấu sao vừa gõ, bạn ghé đọc bài cú pháp viết file .md của Tuấn là nắm được ngay.

Bước 3: Bật Pages trong Settings

Có file trang chủ rồi, lúc mới mở mục Pages bạn sẽ thấy dòng "GitHub Pages is currently disabled" vì tính năng này mặc định đang tắt. Bạn bật trang lên mạng qua bốn thao tác:

1. Bấm tab Settings trên thanh ngang của repo.
2. Ở cột trái, tìm nhóm Code, planning, and automation rồi bấm mục Pages.
3. Dưới Build and deployment, giữ ô Source là Deploy from a branch.
4. Tại dòng Branch, đổi None sang main, giữ thư mục / (root) rồi bấm Save.

Trong menu Source bạn sẽ thấy thêm dòng GitHub Actions, nhưng cách của bài này không dùng tới lựa chọn đó mà giữ nguyên Deploy from a branch.

Bấm Save xong vài giây, màn hình sẽ báo GitHub đã bắt đầu dựng trang GitHub Pages của bạn từ nhánh main.

Bước 4: Đợi trang lên rồi bấm Visit site

Sau khi bấm Save, trong một lần đo trang mất 47 giây để lên mạng, còn tài liệu GitHub cho biết có lúc cần tới 10 phút. Trong vài chục giây đầu GitHub đang dựng trang nên link vẫn trả về lỗi 404 "File not found", đó là chuyện bình thường chứ không phải bạn làm sai đâu nha.

Bạn cứ đợi một lát rồi tải lại trang Settings → Pages để khung Your site is live at kèm link trang hiện ra ở đầu mục. Nếu chờ quá hạn trên mà tải lại vẫn chưa thấy khung báo thì bạn qua tab Actions kiểm tra lượt dựng, hoặc xuống mục 5 xem cách xử lý lỗi 404.

Tại khung Your site is live at, bấm Visit site là mở thẳng trang. Chỉ khi tự gõ link https://your-username.github.io/<tên-repo>/ thì bạn mới thay your-username bằng tên tài khoản, <tên-repo> bằng tên repo, không gõ dấu < >.

Nhờ Jekyll, công cụ GitHub dùng dựng file .md thành web, trang đã có giao diện gọn gàng. Tên repo nằm ở đầu trang, còn dòng # Trang thử GitHub Pages ở Bước 2 thành tiêu đề lớn.

Lần đầu thấy mấy dòng nháp biến thành trang web có link thật nhanh gọn mà chẳng tốn đồng thuê máy chủ nào, Tuấn thấy khoái cực kỳ.

4. Thêm trang và sửa nội dung trên web GitHub

Khi trang đã chạy, muốn thêm trang mới bạn cứ đứng ở trang chính của repo bấm nút Add file với hai lựa chọn Create new file và Upload files.

Tuấn ưng nhất là mình khỏi quay lại tab Settings bật lại gì hết, cứ mỗi lần commit lưu file mới là GitHub Pages tự dựng lại trang.

4.1 Tải file HTML có sẵn lên bằng Upload files

Cầm sẵn file .html AI viết trên máy thì đưa lên sao? Bạn kéo thẳng vào repo qua ba bước:

1. Ở trang repo, bấm Add file chọn Upload files; nếu repo trống thì chọn uploading an existing file trong khung Quick setup.
2. Thả file vào khung giữa trang hoặc bấm choose your files, ví dụ gioi-thieu.html.
3. Giữ nguyên dòng Commit directly to the main branch bên dưới rồi bấm Commit changes.

Bấm lưu xong, bạn cũng chờ GitHub dựng trang giống như ở Bước 4 rồi mới mở xem trang gioi-thieu.html.

Link của mỗi trang mới nối theo đúng tên file và thư mục trong repo, nên file đặt ở thư mục gốc vừa rồi sẽ mở tại https://your-username.github.io/ten-repo/gioi-thieu.html. Khi gõ link này, bạn bỏ đuôi .html mà chỉ để tới /gioi-thieu thì trang vẫn mở ngon lành.

Muốn lấy trang AI viết làm trang chủ, bạn nhớ đổi tên file trang chủ thành index.html trên máy rồi tải lên thư mục gốc của repo. Tài liệu GitHub không nói rõ file nào sẽ hiện nếu thư mục gốc có cả index.md lẫn index.html, nên nếu Bước 2 đã tạo index.md thì bạn xoá bớt file cũ đi cho gọn.

Bước xoá file lẻ này chưa thử trực tiếp, nhưng theo tài liệu GitHub thì bạn mở file index.md trong repo, bấm menu … ở góc trên bên phải, chọn Delete file rồi bấm Commit changes.

4.2 Sửa file rồi xem bản mới

Muốn sửa lại vài câu chữ trên trang, bạn cũng làm ngay trên trình duyệt theo ba bước:

1. Bấm vào tên file cần chỉnh như index.md trong danh sách file của repo.
2. Nhìn góc phải thanh ngang trên khung chữ, bấm biểu tượng cây bút chì Edit this file.
3. Sửa nội dung rồi bấm Commit changes…, giữ lựa chọn Commit directly to the main branch và xác nhận lưu.

Lưu xong, bạn đợi trang dựng lại như ở Bước 4 rồi tải lại để xem; chờ lâu quá chưa đổi thì qua tab Actions kiểm tra lượt dựng.

Nhưng sao nhiều lúc lưu xong mấy phút, mở lại link cũ vẫn thấy chữ y nguyên chưa đổi?

Khi trả trang về cho bạn mở xem, GitHub Pages cho phép giữ bản lưu tạm trong 600 giây, tức 10 phút. Từ đó suy ra trình duyệt có thể giữ bản cũ tới khoảng 10 phút đầu, dù bài chưa đo trực tiếp trên trình duyệt.

Chỉ khi lượt pages build and deployment ở tab Actions đã có dấu xanh mà vẫn thấy bản cũ, bạn mới thử thêm ?v=2 vào cuối link lúc tự mở xem. Theo cách lưu tạm trên, có thể suy ra link kèm đuôi khác với link trình duyệt đang giữ nên có thể tải bản mới về.

Tài liệu GitHub không nói mẹo này và nó cũng không làm trang dựng nhanh hơn; khi gửi cho người khác thì bạn vẫn gửi link gốc không có đuôi nhé.

4.3 Xem GitHub dựng trang ở tab Actions

Làm sao biết file vừa lưu đã dựng xong hay đang gặp trục trặc phía sau?

Mỗi lần bạn commit lên nhánh main, GitHub tự chạy một lượt dựng tên pages build and deployment ở tab Actions mà bạn khỏi cài thêm gì.

Repo để Public thì mọi lượt dựng đều miễn phí. Còn repo Private chỉ tính phí khi tổng thời gian GitHub chạy các lượt dựng vượt quá hạn mức Actions có sẵn của gói trả phí.

Mở tab Actions thấy dòng mới nhất hiện dấu tích xanh lá nghĩa là GitHub đã dựng xong lượt mới của trang.

Mỗi bận sửa gấp nội dung, Tuấn hay ngó cái dấu xanh này để biết chắc lượt dựng không bị lỗi rồi mới gửi link đi. Có điều dấu xanh chỉ báo GitHub đã dựng xong thôi, còn ai từng mở trang trước đó vẫn có thể thấy bản cũ thêm ít phút do bản lưu tạm 600 giây ở mục 4.2.

5. Trang báo 404 hoặc chưa thấy bản mới

Đôi khi mở link trang GitHub Pages, bạn gặp màn hình trắng hiện số 404 kèm chữ "File not found" báo không tìm thấy file ở link này. Dưới đó màn hình còn nhắc muốn mở link gốc của trang thì cần có file index.html.

Gặp cảnh này bạn khoan xoá repo làm lại nha, cứ rà ba chỗ hay vướng theo tài liệu sửa lỗi 404 của GitHub:

• Sai tên hoặc sai chỗ file: Ngoài index.html thì index.md hay README.md ở thư mục gốc nhánh main đều chạy được, nhưng tên phân biệt hoa thường nên Index.html sẽ lỗi. Tài liệu GitHub đòi repo có commit từ người giữ quyền admin; tự tạo repo cá nhân là bạn làm chủ toàn quyền nên suy ra đã đủ quyền này, chỉ cần xem file đã commit lên nhánh main chưa.
• Trang vừa bật hoặc vừa sửa: Có lúc GitHub còn đang dựng trang trong khoảng chờ như ở Bước 4, nên bạn khoan vội sửa gì mà hãy đợi thêm một lát rồi tải lại.
• Lượt dựng gặp lỗi: Bạn mở tab Actions xem các lượt dựng pages build and deployment, thấy dòng mới nhất hiện dấu đỏ thì bấm vào xem chỗ kẹt.

Còn nếu trang vẫn mở được, lượt pages build and deployment ở tab Actions đã hiện dấu xanh mà chữ trên trang chưa đổi sang bản mới, bạn có thể thử thêm đuôi ?v=2 vào cuối link để tự kiểm tra theo cách ở mục 4.2.

6. Gỡ trang xuống: Unpublish site khác xoá repo

Trang đăng thử đã hết việc và bạn không muốn trang mở trên mạng nữa thì có cần xoá cả repo không?

Khỏi xoá repo bạn nhé. Theo hướng dẫn gỡ trang của GitHub, gỡ trang chỉ xoá bản đang chạy trên mạng, còn file và cài đặt trong repo vẫn giữ nguyên.

Để tắt riêng phần web, bạn vào Settings → Pages sẽ thấy nút Unpublish site nằm ngay cạnh nút Visit site.

Tuấn khuyên thường bạn chỉ cần bấm Unpublish site để gỡ trang là đủ. Có điều repo để Public thì ai cũng vào repo xem file được, nên muốn giấu hẳn file thì chỉ gỡ trang vẫn chưa đủ nha.

Bước bật lại chưa bấm thử, theo tài liệu GitHub bạn vào Settings → Pages để Source là Deploy from a branch, nếu chưa đúng nhánh main và / (root) thì chọn lại rồi bấm Save. Sau đó bạn sửa hoặc thêm một file để commit vào nhánh main, rồi chờ trang lên như Bước 4.

Muốn xoá cả repo, bạn bấm tab Settings là trang General mở sẵn; nếu đang ở mục Pages thì bấm General ở cột trái trước. Xong bạn kéo xuống khung Danger Zone cuối trang General rồi bấm Delete this repository.

Hộp thoại hiện ra, bạn bấm I want to delete this repository, bấm I have read and understand these effects, rồi gõ tên repo your-username/tên-repo và bấm Delete this repository. Sau cùng, GitHub yêu cầu xác nhận tài khoản qua mật khẩu, passkey, email hay cách khác.

Theo tài liệu GitHub, bạn vẫn khôi phục lại được repo đã xoá trong vòng 90 ngày, ngoại trừ repo thuộc một mạng fork hiện chưa trống.

7. Đổi giao diện, dùng tên miền riêng

Khi trang đã chạy, bạn còn đổi được giao diện hay gắn tên miền riêng; các ý này chỉ theo tài liệu GitHub, chưa bấm thử.

• Giao diện trang Markdown: File _config.yml trong repo là file cấu hình lưu các cài đặt Jekyll như giao diện, tiêu đề và mô tả trang. Repo ở Bước 1–2 chưa có file này; muốn đổi giao diện, bạn tạo _config.yml rồi tra cách ghi dòng theme trong hướng dẫn thêm theme của GitHub.
• Trang tài khoản không dính tên repo: Bạn tạo repo tên your-username.github.io để lấy link gọn không đuôi tên repo, mỗi tài khoản có tối đa một trang kiểu này.
• Tên miền riêng: Bạn nhập tên miền tại ô Custom domain trong Settings → Pages, nhưng hãng khuyên xác minh tên miền đó trước lúc gắn vào repo kẻo bị người khác chiếm. Bài không dạy bước xác minh này, bạn xem cách làm ở tài liệu dùng tên miền riêng.
• HTTPS có sẵn: Trang đuôi github.io tạo sau ngày 15/06/2016 đều tự bật HTTPS mã hoá kết nối, trình duyệt hiện sẵn ổ khoá.

Cá nhân Tuấn thấy lúc mới bắt đầu bạn cứ xài ngay link github.io có sẵn HTTPS đó cho khoẻ, bao giờ trang đông khách ghé thăm thật sự rồi hẵng sắm tên miền riêng gắn vào sau.

Làm một vòng trên trình duyệt là bạn đã nắm trọn cách dùng GitHub Pages để biến file nằm trên máy thành trang web có link gửi đi khắp nơi rồi đó.

Bạn đang tính đưa trang gì lên đầu tiên — một bản portfolio cá nhân, trang giới thiệu nhờ AI viết hay bộ tài liệu ghi chép — bình luận dưới bài kể cho Tuấn nghe với nha!