Bí kíp tạo website nhờ vào GitHub và Cloudflare

Bạn nên đọc bài này nếu:

Bạn muốn xây dựng một trang chuyển hướng hoặc một custom server miễn phí
Bạn muốn website của bạn dùng https nhưng không biết bắt đầu từ đâu
Bạn phân vân giữa quá nhiều lựa chọn ( như Netlify, Surge, BitBalloon, Now, ..)

Tại sao nên chọn Github:

Dễ dàng để cài đặt với hướng dẫn của Github
Ứng dụng được cập nhật code mới nhất bạn push lên ngay lập tức

Tại sao nên chọn Cloudflare?

Nó miễn phí
Cloudflare với hỗ trợ SSL(https) . (Vấn đề của HTTPS.)
Bộ quản lý DNS đơn giản nhưng hiệu quả
Tính năng đặt thời gian cache của trình duyệt cho assets
Tự động minify các file assets tĩnh của bạn
Có thể chỉnh sửa điều hướng của các trang, như luôn là https, …
Hỗ trợ HTTP2/SPDY cho trình duyệt
Cho phép cài đặt HSTS (HTTP Strict Transport Security)

Trước khi bắt đầu, bạn sẽ cần vài thứ :

Một tài khoản Github
Một tài khoản Cloudflare
Quyền truy cập vào domain của bạn. Bạn có thể mua domain tại một số nơi như: Namecheap, GoDaddy, BigRock, etc.

Bước 1: Tạo repository Github với code của bạn

Chọn ProjectSite để bắt đầu

Vào https://pages.github.com
Chọn Project Site để tìm hướng dẫn cách tạo một web đơn giản từ scractch hoặc một custom theme

Bước 2: Cài đặt Github Page cho repository của bạn

Vào settting trong repository của bạn

Chọn cài đặt web của bạn từ master branch

Đi tới Setting của repository của bạn. Trên lựa chọn Github Pages, chọn nhánh master để cài đặt web bạn từ nó. Sau khi hoàn thành, bạn có thể vào địa chỉ https://<username>.github.io/<repositoryName> để thấy website của mình như hình dưới

Bước 3: Thêm domain của bạn vào Github

Thêm domain của bạn vào trang web

Thêm domain mà bạn đã mua và lưu nó. Web của bạn bây giờ có thể truy nhập đc từ domain của bạn

Vậy là chúng ta đã cài đặt mọi thứ xong trên Github. Tiếp theo chúng ta sẽ tiếp tục với Cloudflare để cài đặt website của bạn với đầy đủ tính năng tôi đã đề cập ở phần bắt đầu của bài post này

Bước 4: Cài đặt domain của bạn trên Cloudflare

Đăng nhập vào Cloudflare. Nếu đây là lần đầu bạn sử dụng nó, bạn sẽ nhìn thấy một màn hình giống hình dưới đây. Nếu bạn đã từng sử dụng nó rồi, hãy click vào Add Site ở thanh navigation ở trên đầu web bên tay phải để thêm domain mới. Ấn vào domain bạn muốn cài đặt và ấn vào Begin Scan

Bước 5: Cài đặt bản ghi DNS cho domain của bạn

Cài đặt bản ghi DNS cho domain đầu tiên, với giá trị là @

Danh sách các bản ghi sau khi hoàn thành

Ở bước này, chúng ta sẽ thông báo cho Cloudflare để trỏ domain của chúng ta tới Github Pages server bằng cách sử dụng 2 bản ghi ADNS:

192.30.252.153
192.30.252.154

Sau khi hoàn thành xong bước này, mọi request tới domain của bạn sẽ đc chuyển hướng tới web của bạn trên Github ở bước 3

Còn một bước nữa liên quan trước khi chúng ta chuyển tới phần tiếp theo

Thường thường bạn sẽ muốn sử dụng sub domain như www cho website của mình, vd: www.yourcustomdomain.com. Muốn thế, bạn sẽ phải thêm một bản ghi CNAME DNS với giá trị www thay cho @

Sau khi hoàn thành cài đặt xong, tất cả requests trên subdomain www của bạn cũng sẽ được điều hướng tới web của bạn trên github

Lưu ý: đừng thử truy cập vào domain của bạn ngay bây giờ, nó chưa hoạt động đâu. chúng ta mới chỉ hoàn thành cài đặt cloudflare cho github, Chúng ta còn phải đăng ký DNS Registrar cho Cloudflare. Tôi sẽ hướng dẫn ở bước 7.

Bước 6: Chọn gói free của Cloudflare

Gói free của Cloudflare cung cấp rất nhiều tuỳ chọn, tính năng như đã đề cập ở phần đầu

Bước 7: Cập nhật Nameserver cho DNS Registrar( nơi đăng kí domain cua bạn)

Copy these two highlighted nameservers to your DNS registrar’s name server settings

Hãy giữ post này và mở một tab mới tới DNS Registrar của bạn (nơi bạn mua domain ý ). Nếu bạn sử dụng DNS Reigstrar của những nơi dưới đây, thì hãy vào để hiểu cách sửa NameServer

Bạn cần phải thay thế Nameservers hiện có trong cài đặt domain bằng cài đặt trên trang Cloudflare được mở trong tab khác.

ví dụ trước và sau khi cập nhật nameserver trên DNS registrar của bạn

YAYY! bạn đã cài đặt thành công domain của bạn sử dụng Cloudflare như một DNS provider. Bạn có thể vào Overview ở bên trên để thấy nó vẫn đang đợi Nameserver thay đổi xong

Nameserver đang thay đổi

Nameserver đã thay đổi xong

Khi tab overview thông báo Status: Active, bạn có thể thử truy cập web của bạn với domain của bạn, và đó sẽ hoạt động

Bước 8: Cấu hình cho Minification

ở Cài đặt Speed, phần Auto Minify, chọn auto-minify everything: Javascript, Css, HTML. Việc này sẽ hoàn thành bởi CloudFlare ngay khi bạn cài đặt xong. bất cứ khi nào bạn thay đổi assets trên web của bạn, Cloudflare sẽ tự động minify và cached lại cho bạn

Điểm lợi của minify là những file của bạn sẽ được thu gọn và trình duyệt sẽ tốn ít thời gian và không gian hơn để tải nó

Bước 9: Cấu hình thời gian cache của trình duyệt

Nếu bạn cuộn xuống trang giống như phần cài đặt Auto Minify, bạn sẽ thấy phần cài đặt Browser Cache Expiration. nó thường đặt mặc định là 30 ngày/ 1tháng, đó là thời gian lý tưởng mà WebpageTest sẽ không cảnh báo bạn. Thời gian đó cho biết , một khi web của bạn được load trên bất cứ trình duyệt nào, trình duyệt sẽ ko tải lại assets cho tới khi thời gian cache cho các assets đó hết.

Vd: Ảnh iphone.png được tải lần đầu từ server của bạn ( 22,3 kb trong 349 ms) Mọi request tải lại nó sẽ được tải từ trong bộ nhớ cache của trình duyệt, Điều đó có nghĩ là các request tải nó về sau sẽ xong gần như ngay lập tức

Trước khi chúng ta tới bước tiếp theo, hãy kiểm tra lại cài đặt Crypto trên Cloudlfare. Nó sẽ cho biết Active Certificate trong lựa chọn SSL (lưu ý: Đừng thử tải lại trang. Đôi khi nó sẽ không update đâu). Trong bước tiếp theo, chúng ta sẽ làm cho web của chúng ta luôn luôn được tải bằng https. Để làm được điều đó với không lỗi nào, bạn phải active certificate trên Cloudflare ( điều này rất quan trọng).

Phần SSL sẽ hiện Authorizing Certificate sau khi Nameserver của bạn trong quá trình thay đổi. Mỗi SSL certufucate bạn đc ban hành, Tin nhắn đó sẽ đổi thành Active Certificate

Bước 10: Cấu hình Page Rules:

Trong bước này, chúng ta sẽ làm 2 việc:

Điều hướng tất cả request từ www.yourcustomdomain.com tới yourcustomdomain.com
Điều hướng tất cả request từ http://yourcustomdomain.com tới https://yourcustomdomain.com

Đi tới cài đặt Page Rules và chọn Create Page Rule

Để xử lý điều hướng www.yourcustomdomain.com tới yourcustomdomain.com, thay thế tweetify.io bằng yourcustomdomain.com. Ấn Save and Deploy

Để xử lý điều hướng http://yourcustomdomain.com tới https://yourcustomdomain.com, thay thế tweetify.io bằng yourcustomdomain.com. Ấn Save and Deploy

Bước 11: Cấu hình HSTS

Đi tới cài đặt Crypto và kéo tới phần HTTP Strict Transport Security (HSTS).Chọn Enable HSTS. Nó sẽ hỏi bạn có hiểu việc bạn đang làm không, trước khi bạn chọn I understand, để tôi nói với bạn lý do chúng ta enable cài đặt này: Nếu 1 user mở web của bạn trước đó, từ đó với mỗi lần user đó truy cập vào web của bạn, nó sẽ luôn lấy https version của web bạn. Điều này khiến web bạn nhanh hơn với mỗi lần truy cập vì http chuyển hướng tới https sẽ được thực hiện ở client chứ ko qua Cloudlfare Page Rule chúng ta thêm ở bước 10 Khi bạn thực hiện bước tiếp theo, bạn nên cho phép mọi cài đặt ở dưới. Bạn có thẻ đọc thêm về chúng ở đây và đây