Xây dựng static web cực kì nhanh chóng với GitHub Pages và Cloudflare
github pages
5
cloudflare
3
static web
1
White

Derek Nguyen viết ngày 06/05/2017

Nếu bạn muốn xây dựng một website mà chỉ bao gồm HTML, CSS và Javascript. Bạn có thể xây dựng 1 static web hoàn toàn miễn phí phục vụ cho việc học tập hoặc thậm chí cho mục đích kinh doanh với GitHub Pages (https://pages.github.com).

alt text

Bạn muốn những gì ?

  • Bạn muốn tự cấu hình chuyển hướng hoặc máy chủ khác miễn phí đối với GitHub page của bạn.
  • Bạn muốn URL trang web của bạn sẽ là https://trangwebcuaban.domain

Tại sao lại là Github ?

  • Dễ dàng cài đặt và bắt dầu với GitHub Pages.
  • Dễ dàng thay đổi với các commit mới.

Tại sao lại là Cloudflare ?

  • Nó miễn phí
  • Hỗ trợ SSL (HTTPS)
  • Quản lý DNS cực kì đơn giản
  • Hỗ trợ cache
  • Minify CSS, Javascript,...
  • Điều chỉnh chuyển hướng, luôn là HTTPS với page rule.
  • HTTP2/SPDY
  • Cho phép cấu hình HSTS (HTTP Strict Transport Security)

Trước khi bắt đầu chúng ta cần một số thứ :

  • Github account
  • Cloudflare account
  • Một domain (Bạn có thể mua ở GoDady).

Đó là tất cả những gì chúng ta cần. Bạn đã sẵn sàng chưa ?

Bước 1: Tạo một Github repo

Ở đây mình dùng Jekyll theme, có rất nhiều blog template có sẵn để bạn chọn: dbyll, jekyll-bootstrap việc bạn cần chỉ là clone theme đó, tùy chỉnh các cài đặt ở file _config.yml cho site của bạn như tên, address,... hoặc bạn tự xây dựng riêng một blog template cho mình. Sau đó bạn push toàn bộ code đó lên repo vừa mới tạo.

Tiếp theo, vào phần setting của repo và làm theo như hình:

alt text

Chọn branch sẽ dùng làm content cho trang web của bạn.

alt text

Truy cập https://.github.io/repository và bạn sẽ thấy thành quả của mình.

Bước 2: Thêm domain cho trang web

alt text

Save lại và bây giờ chúng ta đã có một trang web host github với domain của riêng mình.

Tiếp theo chúng ta sẽ cài đặt Cloudflare cho nó.

Bước 3: Cài đặt domain trên Cloudflare

alt text

Đăng nhập vào Cloudflare và Add Site. Sau đó Begin Scan.

Bước 4: Cài đặt DNS Records cho domain của bạn

alt text
alt text

Ở bước này chúng ta biết được GitHub Pages dùng 2 A Record DNS là:

  • 192.30.252.153
  • 192.30.252.154

Khi bạn cài đặt xong, tất cả request đến domain của bạn sẽ được chuyển đến website của bạn trên github mà bạn đã thực hiện ở bước 2.

alt text

Continue

Bước 5: Cập nhật Nameservers cho domain của bạn

Ở đây mình dùng GoDaddy :D

alt text

nên sẽ như thế này:

alt text

Chúng ta vào Overview và đã thấy có kết quả:

alt text
alt text

Bước 6: Cài đặt Minify, Browser Cache Expiration, SSL

alt text
alt text
alt text
alt text

Bước 7: Cài đặt Page Rules

Chúng ta muốn 2 thứ:

Vào page rules và tạo mới 1 rule:

alt text

http://www.yourcustomdomain.com/ thành chuyển hướng thành yourcustomdomain.com

alt text

Save and Deploy.

http://yourcustomdomain.com/ chuyển hướng thành https://yourcustomdomain.com/

alt text
Save and Deploy.

Bước 8: Cài đặt HSTS

alt text

Vào Crypto và kéo xuống đến phần HTTP Strict Transport Security (HSTS). Click Enable HSTS

alt text

Đó là tất cả, và bây giờ chúng ta có một website tĩnh host trên GitHub có thể dễ dàng cập nhật,và đặc biệt là có SSL :smile: Chúc các bạn thành công.

Happy Coding

Tham khảo : An illustrated guide to setting up your website using GitHub and Cloudflare

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Derek Nguyen

9 bài viết.
19 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
7 0
Nội dung của bài viết này có thể đã có rất nhiều người đã biết, nhưng mình cũng xin được chia sẽ lại cho những ai chưa biết. Hoàn Cảnh Data cons...
Derek Nguyen viết gần 2 năm trước
7 0
White
7 0
Hello React Native Chắc hẳn các bạn không còn xa lạ với React Native (RN) nên mình sẽ không giới thiệu nó là cái gì nữa mà sẽ bắt tay vào làm một ...
Derek Nguyen viết hơn 1 năm trước
7 0
White
7 7
Kiểm tra url có tồn tại hay không ? Ngôn ngữ Ruby ruby require 'net/http' require 'openuri' def working_url?(url_str) url = URI.parse(ur...
Derek Nguyen viết hơn 1 năm trước
7 7
Bài viết liên quan
White
12 1
Trước đây vài ngày, tôi có chuyển hẳn website từ (Link) sử dụng Namecheap hosting sang (Link) sử dụng (Link) lưu trữ website trực tiếp trên Github....
Nguyễn Việt Anh viết 1 năm trước
12 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
9 bài viết.
19 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!