Hướng dẫn dùng Github làm host cho website tĩnh

Khi bắt tay vào làm website chắc hẳn bạn sẽ có lần tìm hiểu và thấy rằng 1 website gồm tĩnh và động.

  • Website tĩnh là website không có hệ thống quản lý nội dung, hoặc có nhưng về nội dung website thì không thay đổi được, được dựng lên bằng HTML, CSS, Javascript.
  • Website động là những website có hệ thống quản lý nội dung và người dùng có thể chỉnh sửa nội dung được. Ngoài HTML, CSS, Javascript thì web động còn sử dụng 1 ngôn ngữ lập trình server như PHP, Java… và 1 hệ quản trị cơ sở dữ liệu như MySQL, SQL Server… vì vậy web động phải chạy trong máy chủ.

Đối với web động, ta có thể sử dụng Google Cloud Platform, Heroku hay 1 host nào đó để upload lên sử dụng nhưng đối với web tĩnh thì sao? Đối với web tĩnh thì ta sẽ sử dụng GitHub để làm host cho nó nhé. Về độ tin cậy cũng như chất lượng của GitHub thì khỏi bàn cãi rồi. Đến đây, chắc có bạn sẽ hỏi rằng: “Vậy up demo web tĩnh lên đó làm gì?” thì mình có thể trả lời rằng mình up lên để làm demo cho khách hàng hoặc đơn giản là 1 nơi lưu trữ để sau phòng khi máy tính của bạn có bị vấn đề gì ta vẫn còn source code trên GitHub.

Thực ra bài này mình định viết lâu rồi và viết bên blog cũ của mình nhưng sẵn tiện có web mới dùng nền tảng WP rồi thì mình ra bài bên này luôn nên các ví dụ hình ảnh bên dưới mình vẫn để tên phucuongblogger.

 

Đăng kí tài khoản GitHub và tải GitHub Desktop

Việc đầu tiên là bạn phải đăng kí tài khoản tại GitHub nhé. Cách đăng kí cực kì dễ dàng và nếu bạn không rõ thì có thể search từ khóa “Cách đăng kí tài khoản GitHub” trên Google sẽ ra nhiều bài lắm nhé. Cái này có rồi nên mình không viết lại.

Khi đã đăng kí xong cho mình 1 tài khoản thì bạn truy cập trang web này và tải bản GitHub Desktop để sử dụng cho tiện nhé, không cần phải can thiệp quá nhiều thao tác online trên trang chủ của họ. Bạn tải và cài đặt bình thường như các phần mềm khác. Hoàn tất cài đặt thì bạn đăng nhập vào để chúng ta bắt đầu các bước chính.

Làm việc với GitHub Desktop

1. Tạo và public 1 repository mới

Ta tạo repository làm gì? Để làm nơi lưu trữ toàn bộ source code của bạn và cũng là chính là địa chỉ sau để demo cái web tĩnh của bạn đó. Bạn mở GitHub Desktop lên. Trên thanh công cụ chọn FileNew repository…

Giao diện tạo repository mới hiện lên, bạn hãy điền đầy đủ thông tin và bấm chọn Create repository

  • Name: tên của repository
  • Description: mô tả cho repository (tùy ý)
  • Local path: chọn thư mục (folder) lưu trữ repository mới
  • Initialize this repository with a README: nếu tích vào thì nó sẽ tự tạo thêm cho bạn 1 file tên readme cho bạn điền nội dung kiểu văn bản vào thôi, thích thì tích vào không thì bỏ cũng không sao.
  • Git ignore: None
  • License: None

Sau khi click chọn Create repository xong, bạn hãy để ý thanh tác vụ thứ 2 từ trên xuống sẽ thấy có chữ Public repository, hãy click vào đó để ta upload repository lên trang chủ GitHub nhé.

Tại cửa sổ hiện lên ngay sau đó, bạn chọn tab là GitHub.com và kiểm tra lại thông tin như hình sau đó click chọn Public repository để hoàn tất quá trình.

2. Tùy chỉnh cài đặt repository trên trang chủ GitHub

Sau khi public repository xong, bạn mở trình duyệt lên và truy cập vào trang chủ GitHub. Tiếp đó, đăng nhập vào sẽ thấy giao diện như hình dưới. Khung hiện tất cả repository của bạn nằm bên trái ngay dưới ảnh đại diện, hãy chọn đúng repository bạn vừa mới tạo nhé. Phía trên mình đã tạo 1 repository mới tên là phucuongblogger nên mình sẽ chọn đúng repository đó theo cấu trúc username/repository_name (trong đó username là tên người dùng để đăng nhập vào GitHub khi bạn đăng kí tài khoản)

Tại giao diện tổng quan của 1 repository, bạn click chọn Settings để ta bắt đầu cài đặt.

Bạn kéo thẳng xuống dưới đến mục GitHub Pages. Phần Source ngay ở đầu, bạn kích hoạt chế độ GitHub Pages lên bằng cách chuyển từ None sang master branch nhé.

Ngay sau khi chuyển đổi, GitHub sẽ hiện 1 dòng thông báo có nội dung là website đã sẵn sàng được công khai tại địa chỉ này.

Tạm thời mình cứ để đây và đợi 1 tí cho họ public website của bạn. Nhưng hiện tại website của bạn đang trắng tinh, không có gì. Bây giờ các bạn hãy cùng mình đến với bước đẩy giao diện vào repository mới tạo cho nó hiển thị trên GitHub nhé.

3. Khởi tạo code với Code Editor và đẩy code lên GitHub

Hiện nay có khá nhiều Code Editor cho các bạn lựa chọn như Sublime Text, Atom hay Visual Studio Code…, cái này tùy vào mỗi người và với mình thì hôm nay mình sẽ viết bài dựa trên Code Editor mình quen dùng và nhẹ là Sublime Text 3 nhé.

Mở Sublime Text 3 lên, trên File chọn Open Folder…, tìm đến thư mục có tên là tên của repository ta đã tạo ở trên và click chọn Select Folder.

Trong giao diện Sublime Text 3, bạn tạo 1 file mới nằm trong thư mục bạn vừa mới mở ra với tên file là index.html để ta code trong này nhé. Lưu ý là do thuật toán của GitHub có chút thay đổi nên bắt buộc bạn phải có 1 file tên index.html thì mới có thể upload và demo website tĩnh đó ra nhé và file index.html này cũng bắt buộc phải để ngay đầu tiên trong thư mục mới mở ra luôn.

Ví dụ: Mình mở thư mục tên phucuongblogger thì ngay trong thư mục này, mình sẽ tạo 1 file index.html luôn. Nó sẽ có đường dẫn là …/phucuongblogger/index.html luôn chứ không thể là …/phucuongblogger/tên_thư_mục_khác/index.html nhé. Mình đã test thử và thấy chỉ còn cách này. Nếu bạn có cách mới thì hãy để lại bình luận để mình cho vào bài nhé.

Tạo xong index.html rồi thì việc code gì trong này là tùy ở bạn nhé. Chắc chắn khi làm đến bước này, mình nghĩ các bạn cũng đã có kiến thức code củng cơ bản rồi đúng không? Vì vậy, mình sẽ không viết chi tiết phần này nữa nhé. Hình dưới là ví dụ 1 đoạn code ngắn của mình, mục đích là làm hiển thị dòng chữ Welcome to Phú Cường Blogger lên khi ta truy cập vào địa chỉ GitHub Pages đã kích hoạt ở bước trên.

Code xong xuôi thì bạn lưu lại. Lúc này, bạn chuyển qua bên GitHub Desktop sẽ thấy ở tab Changes sẽ thấy file index.html ta mới thêm vào thư mục phucuongblogger. Bạn hãy điền chú thích vào ô 1 (nội dung ví dụ như bạn đã vừa thay đổi gì ở file đó thì ghi vào tùy bạn) và click Commit to master ở ô 2.

Tiếp đến, ta tiến hành đẩy toàn bộ file lên GitHub bằng cách click vào Push origin và đợi vài giây cho nó làm việc nhé.

Để kiểm tra xem đã làm đúng hay chưa thì giờ ta lại bật trình duyệt lên và truy cập vào trang chủ GitHub để xem toàn bộ file trong repository bạn đã tạo nhé. Như hình các bạn có thể thấy mình đã đẩy lên thành công rồi vì nó có file index.html kèm dòng chú thích create my homepage và thời gian mới đẩy lên cách đó 1 phút.

Ngay lúc này, bạn tiến hành qua phần Settings của repository xem thử dòng thông báo khi nãy tại mục GitHub Pages đã thay đổi chưa?! Nếu nó đã chuyển thành như này thì khi đó bạn đã hoàn toàn truy cập được website tĩnh của bạn rồi nhé.

Đường dẫn sẽ có dạng chung chung là https://username.github.io/tên_repository. Nếu bạn muốn đổi đường dẫn sang đường dẫn mới dạng .com, .info, .tk… hay gì tùy ý thì sử dụng mục Custom domain ngay phía dưới nhé. Cái này bạn tự tìm hiểu thêm nhé vì nó là mục tùy chọn nên mình không đề cập thêm.

Giao diện web tĩnh mình làm ví dụ sau khi hoàn tất sẽ như sau:

Đó, bạn thấy tuyệt vời không? Giờ đây, thay vì chỉ có mỗi mình bạn xem được demo website tĩnh theo đường dẫn local tại máy tính thì ta có thể up lên host và cho mọi người cùng xem 1 cách dễ dàng rồi. Sau này khi bạn có muốn chỉnh sửa gì trong code thì vẫn sửa hay thêm các thứ bình thường và thêm chú thích rồi đẩy lên như bước này là được nhé.

Lời kết

Vậy là mình vừa hướng dẫn xong cho các bạn cách dùng GitHub làm host cho website tĩnh. Tuy các bước khá dài nhưng mình nghĩ nên viết chi tiết nhất có thể để các bạn không bị khó khăn tại bước nào cả. Đối với cá nhân mình thấy rằng GitHub rất hay và việc khai thác hết chức năng của GitHub thực sự rất tuyệt vời. Bạn yên tâm là nó miễn phí nữa nhé nên mong qua bài viết này của mình, các bạn đã biết thêm được 1 kiến thức, thủ thuật nho nhỏ nữa. Nếu thấy bài viết hay và bổ ích thì hãy chia sẻ dùm mình nhé. Nút chia sẻ ngay dưới đó. Cảm ơn các bạn!

Created by: PCDevShare.Com

20
Bình luận

avatar
7 Comment threads
13 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
8 Số người bình luận
Cuong NguyenHieu DevStar QuốcNguyễn PhúQuốc Bảo Blog Người mới bình luận
  Đăng kí  
mới nhất cũ nhất nhiều vote nhất
Nhận thông báo từ
Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

cái này hay lắm luôn á anh :p thích hơp cho mấy đứa chưa rành về host như em

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

ok anh :p
link:https://www.quocbaoblog.xyz
tên: Quốc Bảo Blog
mô tả: Tâm sự và sẻ chia

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

ok anh ;p

NAD | 5 comments
Khách
NAD | 5 comments

Bài cầu kỳ vãi.

Sorry Cường xem giúp a cái này vs đc ko: link

a áp dụng mà ko đc, ad bên đó nghỉ r 🙁

Trần Nhật Sinh | 11 comments
Khách
Trần Nhật Sinh | 11 comments

Cái này làm mấy web landing là phê luôn

Trần Nhật Sinh | 11 comments
Khách
Trần Nhật Sinh | 11 comments

Wow, wp nó có chức năng thống kê bình luận của mỗi người luôn kìa, tiện lợi thật

Hưng Star - IT | 3 comments
Khách
Hưng Star - IT | 3 comments

chất vãi

Nguyễn Phú | 3 comments
Khách
Nguyễn Phú | 3 comments

cái này hay lắm anh 😀

Star Quốc | 4 comments
Khách
Star Quốc | 4 comments

Cái này hay lắm nè ông

Hieu Dev | 1 comments
Khách
Hieu Dev | 1 comments

Chào anh Cường đi vờ lớp phơ nha <3