Host a static website with GithubPage

Host a static website with github

• Github Pages cho phép ta host một trang web miễn phí tại đường dẫn https://username.github.io
  • Miễn phí
  • CI/CD sẵn của github nên update/thêm mới dễ dàng
• Dùng Jeklly để generate website
  • Viết bài bằng Markdown, Liquid mà không cần kiến thức về HTML & CSS (tất nhiền có thì custom được đẹp hơn rồi)
  • Và nếu không biết HTML hay CSS mà vẫn muốn có site đẹp (nói thừa :D) thì ta có thể dùng community-maintained theme

Create a professional static webpage with Jeklly

Ta hoàn toàn không cần cài môi trưòng Jeklly ở local mà vẫn có thể deploy trực tiếp lên github vì bản thân GithubPage dùng Jekyll rồi.

• Nhằm mục đích xem trước các thay đổi mà không cần push lên github thì nên setup môi trường Jekyll ở local (dùng cách 2 dưới đây)

Setup Jeklly environment

• Có thể thực hiện theo hướng dẫn cài đặt tại Jekyll Installation. Tuy nhiên để tiết kiệm thời gian cài dependency các thứ, thì ở đây chúng ta dùng docker image bretfisher/jekyll cho nó nhanh.

• Có thể tạo mới một trang web bằng jekyll bằng lệnh jekyll new, nhưng như đã nói ở trên chúng ta sẽ không tạo site từ đầu mà sẽ từ một theme có sẵn. Chọn theme nào thật ưng là ưng rồi thực hiện theo một trong hai cách sau( trong ví dụ này ta dùng Jekyll Theme Chirpy:

  • Cách 1: Chỉ thao tác trên webUI: Làm theo hướng dẫn tại Getting started
    • Tạo github project mới bằng cách fork từ theme project hoặc từ theme template. Ở đây ta dùng template, truy cập Chirpy Starter, chọn Use this template > Create a new repository

    

    • Đặt tên repo dưới định dạng username.github.io, với username là github username của bạn

  • Cách 2: Tạo môi trườngChỉ dùng dòng lệnh thì làm như sau:

      # Clone theme
      $ git clone https://github.com/cotes2020/jekyll-theme-chirpy.git
      Cloning into 'jekyll-theme-chirpy'...
      remote: Enumerating objects: 8420, done.
      remote: Total 8420 (delta 0), reused 0 (delta 0), pack-reused 8420
      Receiving objects: 100% (8420/8420), 3.65 MiB | 174.00 KiB/s, done.
      Resolving deltas: 100% (4712/4712), done.
      # Start jekyll serve in current theme dir
      $ cd jekyll-theme-chirpy/
      $ docker run -p 8080:4000 -v $(pwd):/site bretfisher/jekyll-serve
      ...
      Auto-regeneration: enabled for '/site'
      Server address: http://0.0.0.0:4000/
      Server running... press ctrl-c to stop.
    
    

    • Để xem web, truy cập http://localhost:8080

Custom your page

• Để custom được thì ta phải biết sửa ở đâu đã
  • Xem Directory Structure để có cái nhìn tổng quan cấu trúc thư mục của một jekll site
• Chỉnh sửa một vài cấu hình trong file _config.yml

Host a static website with Github

• Nếu thực hiện theo cách 1 thì không cần làm gì thêm, bạn đã có thể truy cập vào địa chỉ https://<username>.github.io để xem
• Còn nếu làm theo cách 2 thì phải push lên đã :))