06/12/2018, 16:01

Xây dựng static web cực kì nhanh chóng với GitHub Pages và Cloudflare

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). Bạn muốn những gì ? Bạn muốn tự ...

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

Bài liên quan

Xây dựng static web cực kì nhanh chóng với GitHub Pages và Cloudflare

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). Bạn muốn những gì ? Bạn muốn tự ...

Tạ Quốc Bảo viết 4 ngày trước

Xây dựng chức năng tự động suggest tag với ngôn ngữ tiếng Nhật (P2)

Mở đầu Trong phần 1 mình đã giới thiệu cách sử dụng thuật toán tf-idf để tiếp cận bài toán phân tích ngôn ngữ tự nhiên, và cách sử dụng tool phân tích tiếng nhật mecab để phân tích 1 câu tiếng nhật thành các POS. Trong phần 2 này mình sẽ xây dựng demo một ứng dụng nhỏ do mình viết ra để demo ...

Trần Trung Dũng viết 08:47 ngày 07/09/2018

Hướng dẫn xây dựng chức năng đăng ký thành viên với php và mysql

Tìm hiểu session và cookie trong php Hướng dẫn kết nối cơ sở dữ liệu MYSQL sử dụng MYSQLI Tìm hiểu hàm isset() và empty() trong php Xây dựng chức năng đăng ký thành viên với php và mysql, đây là chức năng đơn giản rất hay được sử dụng dùng để kiểm tra username và mật khẩu bị trùng khi ...

Bùi Văn Nam viết 17:20 ngày 04/09/2018

Tạo website nhanh chóng với HTML5 Boilerplate

Khi xây dựng trang web mới, bạn cần trang web đó tương thích với HTML5 nhưng không muốn dành thời gian để tìm hiểu những kiến thức phức tạp về HTML5 từ đầu, bạn có thể sử dụng mẫu HTML5 Boilerplate. Đây là mẫu front-end đơn giản để tạo một trang web HTML5 chỉ ...

Trịnh Tiến Mạnh viết 11:24 ngày 22/08/2018

Xây dựng chức năng tự động suggest tag với ngôn ngữ tiếng Nhật

Mở đầu Do sắp tới dự án mình đang làm, KH mong muốn xây dựng chức năng tự động suggest keyword từ một đoạn text tiếng Nhật được nhập vào, và mình được giao cho nghiên cứu vụ này. Ban đầu mình cũng cảm thấy bế tắc vì mình không biết tiếng Nhật, cộng thêm xử lý ngôn ngữ tự nhiên cũng là một lĩnh ...

Tạ Quốc Bảo viết 18:22 ngày 12/08/2018
0