Hotline

Hướng dẫn cài đặt website của bạn lên github và Cloudflare

githbcloudfare

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

  1. Bạn muốn xây dựng một trang chuyển hướng hoặc một custom server miễn phí
  2. Bạn muốn website của bạn dùng https nhưng không biết bắt đầu từ đâu 
  3. 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:

  1. Dễ dàng để cài đặt với hướng dẫn của Github
  2. Ứ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?

  1. Nó miễn phí
  2. Cloudflare với hỗ trợ SSL(https) .  (Vấn đề của HTTPS.)
  3. Bộ quản lý DNS đơn giản nhưng hiệu quả
  4. Tính năng đặt thời gian cache của trình duyệt cho assets
  5. Tự động minify các file assets tĩnh của bạn
  6. Có thể chỉnh sửa điều hướng của các trang, như luôn là https, …
  7. Hỗ trợ HTTP2/SPDY  cho trình duyệt
  8. 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ứ :

  1. Một tài khoản Github
  2. Một tài khoản Cloudflare
  3. 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

  b1

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

  1-9sl36t_sqrrfzwa6stiiza

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

1-ez5fm87x5wnrmglm81xybw

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

1-mun3w_gqkwlqn8x9saavg

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

1-6zrorfhvctrjhj15nbbt_q

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

1-zdsm49bdzlouvf2jle8jhq

Đă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

1-votzkj_bbuxduugo6iyvfg

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

1-y32xyz1c_omnchkwdf2rw

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 A DNS:

  1. 192.30.252.153
  2. 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

1-nsec2bmzvuf7fylc0blcaq

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)

1-7y0kzmp1e3ji5fl27x9slq

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

  1. igrock
  2. Namecheap
  3. GoDaddy

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.

1-fw2pbt2ixk9hkjkp5cfgpq1-t9vqtrw8o3uhirxubmt20q

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

1-my_6rgx2p9bpjwxesatw_w

Nameserver đang thay đổi

1-prrzoo77rnjpcaahhzemog

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

1-iprxjgnn4adrawmejrslkg

Đ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

1-bgoecbau-zzflod6bblida

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.

1-e-uqkvtlbkyoow2ca4fyca

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).

1-2y3opugp2n2et_7nsswoug1-mei3p9-5m-cjpftca7ntqq

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:

  1. Điều hướng tất cả request từ www.yourcustomdomain.com tới yourcustomdomain.com
  2. Đ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

cài đặt website 1

Để 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

cài đặt website 2

Để 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

1-pbo1cgjia4ffsoqksdlzcg

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

1-cny1enfc7rx0sflql1qo-w

Đ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 đây

1-eqkl-rh22ucxd5amoqbaoa

Xong rồi đó. Bạn  đã cài đặt mọi thứ để giới thiệu web của bạn cho thế giới được rồi. Nếu thấy hữu ích, hãy like và share vì nó miễn phí

Nguồn: Medium

  webfullstack