Github free web hosting for website

Ở các bài viết trước tôi đã giới thiệu cho bạn 1 vài hosting lưu trữ code miễn phí cho website như GoogleDrive, Dropbox, OneDrive, Firebase, GoogleSite,...tuy nhiên hosting free mà tôi ưng ý nhất đó là Github. Trong bài viết này chúng ta sẽ tìm hiểu cách sử dụng Github làm hosting miễn phí cho blog/website

Github thì quá nổi tiếng rồi, là 1 lập trình viên mà không biết đến Github chắc hàng tàu :). Vì vậy xin phép được bỏ qua lý thuyết giới thiệu về Github

Sở dĩ tôi lựa chọn Github vì một số lý do sau

• Dễ dàng tạo tài khoản free
• Quản lý file chuyên nghiệp, có nhiều hình thức đẩy code (giao diện web, git command, git desktop,...)
• Không giới hạn băng thông (ai dùng onedrive, firebase hay dropbox sẽ hiểu được cảm giác khi bị limit bandwidth)
• Rawgit có mạng lưới CDN, vì vậy bạn có thể yên tâm mỗi khi đứt cáp vẫn đảm bảo ổn định cho việc vận hành website
• Với Github Pages bạn hoàn toàn có thể tạo ra 1 website 
• Sử dụng gists của Github bạn hoàn toàn có thể trình bày code dạng highlight
• ...

Ok giờ ta đi vào phần chính của bài viết. Trong bài viết này tôi sẽ thao tác với github qua giao diện web, nếu hứng thú bạn có thể tìm hiểu git command hoặc git desktop.

I. Upload file lên Github

Trước tiên bạn cần tạo cho mình 1 tài khoản Free bằng việc truy cập vào địa chỉ sau https://github.com/join.

Sau khi xác nhận mail và tiến hành đăng nhập bạn tiến hành tạo mới cho mình 1 project theo chỉ dẫn sau

Tiếp theo bạn sẽ tiến hành điền các thông tin cần thiết như sau

Khi đó project của bạn sẽ được tạo, bạn sẽ được chuyển đến trang quản lý file. Tại đây bạn có thể tạo file, upload file, clone project,... 

Ví dụ với upload 1 file js

Bạn có thể tải lên nhiều file 1 lúc, nhưng tối đa là 100 files một lần

* Để upload folder, bạn sẽ phải sử dụng thao tác kéo thả, và lưu ý github không cho phép folder trống, folder của bạn phải có ít nhất 1 file. Nói như vậy đồng nghĩa với việc nếu bạn muốn xóa folder khỏi github chỉ cần xóa tất cả file trong folder đó

II. Tạo URL và nhúng vào website

Lưu ý: tại thời điểm viết bài tác giả sử dụng dịch vụ rawgit để tạo link, trong tương lai dịch vụ này có thể ngừng hoạt động, nếu không may nó ngừng bạn hãy theo dõi các bài cùng chuyên mục để cập nhật phương thức raw link mới nhất

Như vậy đã xong công đoạn upload file. Bây giờ tiến hành tạo link để nhúng vào trang web

Trước tiên bạn cần nắm vững 2 dạng raw file của Github

* Dạng 1: Use this URL in production (sử dụng url cho sản phẩm)

Đây là dạng khuyên dùng vì nó không giới hạn băng thông, có phân phối qua CDN và tệp được lưu trữ vĩnh viễn thông qua url

* Dạng 2: Use this URL for development (sử dụng url cho phát triển)

+ Những thay đổi sẽ được làm mới trong vòng vài phút.

+ Lưu lượng truy cập quá nhiều sẽ bị điều chỉnh và cho vào danh sách đen.

+ Nếu lưu lượng truy cập quá mức, RawGit sẽ hiển thị thông báo lỗi

Cách 1: Làm thủ công

Bạn tiến hành mở 1 file và nhấn chọn Raw

Tới đây ta sẽ thu được địa chỉ dạng như này: https://raw.githubusercontent.com/hoanghung96cs/blog/master/jquery.min.js

Bạn sẽ có 2 lựa chọn sau

• Dạng 1: thay địa chỉ thành https://cdn.rawgit.com/hoanghung96cs/blog/master/jquery.min.js
• Dạng 2: thay địa chỉ thành https://rawgit.com/hoanghung96cs/blog/master/jquery.min.js

Trong cách này, khi bạn thay đổi nội dung file sẽ không cần thay đổi url

Cách 2: Sử dụng RawGit

Truy cập https://rawgit.com và dán địa chỉ github file của bạn vào, ví dụ https://github.com/hoanghung96cs/blog/blob/master/jquery.min.js. Lúc này nó cũng xuất ra cho bạn 2 URL

• Dạng 1: https://cdn.rawgit.com/hoanghung96cs/blog/6afecb35/jquery.min.js
• Dạng 2: https://rawgit.com/hoanghung96cs/blog/master/jquery.min.js

Bạn có thể thấy phần đánh màu xanh có sự khác biệt so với cách 1, theo cách này nếu host qua CDN file sẽ được lưu vĩnh viễn theo url, vì thế khi bạn thay đổi nội dung file, nó sẽ chuyển sang 1 địa chỉ url khác, nếu bạn có 1 file không cần thay đổi nội dung có thể dùng cách này

Cách 3: Sử dụng RawGit Hack

Dựa trên ý tưởng của RawGit, một tác giả đã tạo ra RawGit Hack, khác biệt ở server và RawGit Hack hỗ trợ nhiều hơn so với RawGit (RawGit chỉ hỗ trợ 1 mình Github)

Truy cập https://raw.githack.com và làm như cách 2 sẽ thu được 2 link

• Dạng 1: https://rawcdn.githack.com/hoanghung96cs/blog/master/jquery.min.js
• Dạng 2: https://raw.githack.com/hoanghung96cs/blog/master/jquery.min.js

Đến đây bạn có thể nhúng được file vào website rồi

Ví dụ

<!-- jquery via github -->
<script src='https://cdn.rawgit.com/hoanghung96cs/blog/master/jquery.min.js' type='text/javascript'/>

Hoàn toàn tương tự với file css

Với giao diện web này mỗi lần bạn chỉ upload được 100 files. Ví dụ muốn host font awesome lên thì bạn cần chia nhỏ folder ra để upload, hoặc khi đó bạn sẽ cần sử dụng đến git command hoặc git desktop, nói chung tùy cơ ứng biến :)

Như vậy qua bài viết này bạn đã biết cách biến github thành hosting lưu trữ code cho blog của mình rồi, hãy tập tành lưu tất cả các thư viện (jquery, bootstrap, fontawesome, js tự tạo...) hiện có trên website về 1 host để việc quản lý cũng như bảo trì thuận tiện hơn, không bị phụ thuộc quá nhiều vào các trang web khác

Chúc các bạn thành công !