Hướng dẫn deloy web trên github github.io

Bạn có thể tạo ra website bằng cách sử dụng GitHub Pages. Dùng để giới thiệu một số project, trang blog hoặc thậm chí chia sẻ sơ yếu lý lịch của mình. Hướng dẩn dưới đây sẽ giúp bạn dể dàng tạo ra website bằng gitHub Pages hơn.

Domain website khi được tạo bằng Github Page sẽ có dạng username.github.io.

Bước 1. Ở trên cùng bên phải của trang, sử dụng trình đơn thả xuống và chọn New repository.

Hướng dẫn deloy web trên github github.io

Bước 2. Tại mục Reponsitory name chọn tên là username.github.io trong đó username chính là tên username GitHub của bạn. Ví dụ nickname của bạn trên GitHub là lundev, vậy thay vào đây là lundev.github.io.

Hướng dẫn deloy web trên github github.io

Bước 3. Sau khi đã push code lên git. nhấn vào setting để đến với phần cài đặt.

Bước 4. Tại thanh menu bên trái, tìm đến Pages và nhấn vào nó.

Bước 5. Tại mục này hãy tìm đến Branch kiểm tra xem hệ thống đang sử dụng Branch nào để đẩy code lên website cho bạn. Nếu là none hãy chọn nhánh khác.

Hướng dẫn deloy web trên github github.io

Bước 6. Chờ vài phút để hệ thống cập nhật và truy cập vào trang web của mình để trải nghiệm với domain username.github.io.

Video hướng dẩn chi tiết

Nguồn tham khảo

  • docs.github.com/fr/pages/quickstart (document english).

Bạn có một trang web rất rất nhỏ như những demo sản phẩm, profile cá nhân. Chúng chẳng hề có database và việc phải thuê một domain để public những trang web này thật quá tốn kém? Vậy một static web (web tĩnh) sẽ là một giải pháp dành cho bạn.

Static web (web tĩnh) là gì?

Static web là website có nội dung tĩnh, không chứa cơ sở dữ liệu, chỉ đơn thuần là html,css,js và ảnh. Mọi thay đổi trên web đều phải thông qua chỉnh sửa code. Đây thường là những website chứa ít nội dung như profile, giới thiệu, demo,...

Do static web không có những thứ to lớn như database mà chỉ đơn thuần là những dòng code nên việc phải thuê một tên miền, chạy thêm một server quả thật là rất tốn kém và không hiệu quả. Bài viết hôm nay sẽ hướng dẫn các bạn sử dụng tên miền của github để public một trang web tĩnh của riêng mình nhé.

Lưu trữ và tạo Static web với Github

1. Tạo một tài khoản github

Hầu hết chúng ta đều có tài khoản github rồi :D. Trong trường hợp các bạn đã có tài khoản chúng ta skip qua bước 2 nhé.

Trong trường hợp các bạn chưa có tài khoản, hãy truy cập https://github.com/join để tạo cho mình một tài khoản nhé, và nó cực kỳ tiện lợi cho những dự án sau này đấy.

Bạn có thể tham khảo hướng dẫn chi tiết tại sử dụng git/github từ cơ bản đến nâng cao

Hướng dẫn deloy web trên github github.io

2. Login vào tài khoản của bạn và tạo một repository

Nhập các thông tin cần thiết sau:

  • Repository name: Tên của Repository phải là tên tài khoản của bạn và có đuôi .github.io
  • Để chế độ “Public“

Hướng dẫn deloy web trên github github.io

3. Clone repsitory về máy của bạn

Đối với các bạn đã quen sử dụng github, chúng ta có thể sử dụng lệnh` git` để làm từ bước này.

Trong trường hợp các bạn mới sử dụng lần đầu và chưa quen, mình đề xuất các bạn tải về và sử dụng Github Desktop có giao diện trực quan và dễ nhìn.

Hướng dẫn deloy web trên github github.io

Hướng dẫn deloy web trên github github.io

Thực hiện clone project về máy tính

4. Code thôi nào

Các bạn đến thư mục vừa clone và bắt đầu code

Chú ý: Luôn có trang "index.html" vì github sẽ sử dụng trang này làm trang chủ.

Hướng dẫn deloy web trên github github.io

5. Commit và push trang web bạn vừa tạo lên repository

Hướng dẫn deloy web trên github github.io

Nhập tin nhắn ở kế avatar của bạn sau đó chọn Commit to master

Hướng dẫn deloy web trên github github.io

Cuối cùng là Push origin

6. Cài đặt

Quay lại repository trên github của bạn, chuyển sang tab setting và kéo xuống mục Github Page để xem trang web của mình đã được publish chưa

Hướng dẫn deloy web trên github github.io

Truy cập vào đường dẫn và tận hưởng thành quả thôi nào :D

Hướng dẫn deloy web trên github github.io

Tạm kết

Vừa rồi mình đã hướng dẫn các bạn tạo một trang web tĩnh với tên miền là github.io. Đây có thể là trang web demo cũng có thể là trang web chứa profile sau này của bạn, các bạn hãy đặt tên và trình bày nó thật đẹp để gây ấn tượng tốt với mọi người xung quanh cũng như những nhà tuyển dụng sau này nhé.