Khi học HTML, CSS, JS làm các trang web tĩnh chắc hẳn bạn phải push code lên github và sử dụng github page để share project của mình. Trong bài này mình sẽ nói qua về cách tạo github page, sau đó là custom domain cho github.
1. Dựng github page
- B1: Tại repo github của bạn, click vào setting
- B2: Tại mục Code and automation, click chọn Pages. Lưu ý chỉ có owner hay admin của repo mới có những lựa chọn này
- B3: Mặc định vào chọn cho bạn là Deploy from a branch, tại đây bạn có thể chọn branch bạn muốn chạy project của mình. Sau đó nhấn Save.
- B4: Một cách khác thay vì Deploy from a branch, bạn có thể Deploy từ github Action. Cách này dùng trong trường hợp bạn không có project web tĩnh trực tiếp, mà phải build qua công cụ như react, webpack, hugo,... thì github action sẽ build cho bạn và lưu vào nhánh riêng trên repo đấy.
Ví dụ:
Cách deploy qua github action nâng cao hơn nên mình sẽ lấy ví dụ cụ thể ở đây. Dưới đây là một project hugo
-
Tại đây github đã dò ra được repo của mình sử dụng hugo, vì vậy đã hỗ trợ cho mình ngay Hugo configure (ô bên trái), chỉ cần bấm vào Configure đã ra luôn file github workflow cần để deploy hugo.
-
Trường hợp bạn không muốn chạy workflow mặc định bạn có thể thay đổi file hugo.yml bên trái. Hoặc nếu bạn muốn dùng một file build được hỗ trợ khác, bạn có thể tìm kiếm tại mục Marketplace bên phải
-
Sau khi xong commit file và push lên là xong.
Như vậy bạn đã lập web tĩnh thành công với tên miền là <username>/<organization>.github.io/<tên repo>
2. Cách custom domain
Custom domain rất đơn giản, chỉ cần vào github Pages, gõ tên miền bạn muốn cho repository của bạn là xong
Nhưng như bất kỳ tên miền nào cũng phải đăng ký mua và cấu hình tại một nhà cung cấp dịch vụ DNS. Ở đây mình dùng Namecheap. Bước đăng ký mua tên miền bạn tự làm, còn dưới đây là hướng dẫn cấu hình.
Tại tên miền bạn đăng ký, bấm vào Manage
Sau đó vào Advanced DNS
Tại Host Records, thay đổi Value của CNAME Records trỏ về URL github của bạn: <username>/<organization>.github.io
Và bổ sung thêm các A records trỏ về address của github như sau:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
Sau khi bổ sung ta bấm save all và load lại trang để đảm bảo đã được lưu
Giờ tất cả những gì ta cần làm là chuyển sang việc khác, chờ đợi cấu hình được nhận. Sẽ mất vài giờ, có khi cả ngày. Vì thế đừng mất kiên nhẫn nếu chưa được luôn.