Build a blog with Chirpy theme Jekyll
Set Up and Deploy a Documentation Site With Jekyll, Chirpy, Giscus
Introduction
Ở bài viết trước (link), tôi có giới thiệu về cách tạo trang Blog bằng Github Page và Giscus. Sau một thời gian dạo chơi trên internet, nhờ đọc các writeup CTF, để ý răng có nhiều người sử dụng Chirpy theme này. Tại thời điển tôi viết bài này, theme vẫn đang được cập nhật.
Thấy rất ưng ý sau 1 thời gian sử dụng, ở bài viết này là chia sẻ của tôi về cách sử dụng theme này, thực ra nó có sẵn document ở trang chính thức, tôi chỉ chia sẽ những gì mà tôi thấy là cần thiết.
Dành cho tất cả đối tượng.
Requirements
Github Account
Điều tiên quyết ở đây là phải có tài khoản Github, up nó lên Github Page mà 🤡🤡🤡
IDE
Dùng IDE để chỉnh sửa nội dung sau khi clone, recommended sử dụng Visual Studio Code, tải về cài rồi nét nét nét nét là xong…
Understanding Markdown files
Các bài viết được sử dụng ở đây có dạng Markdown(.md) hoặc HTML(.html), nên sử dụng Markdown file để viết vì nó tiện và được cấu hình cho mục đích viết blog trên Github Page. Tham khảo tại đây
Installation
Use Chirpy Template
Hướng dẫn cài đặt đã có chi tiết ở đây
Giscus
Tiến hành cài Giscus theo hướng dẫn. Nó được dùng cho chức năng comment bằng tài khoản Github
Configuration
Sau khi đã hoàn tất việc setup và chạy được trên local, tiến hành cấu hình:
_config.yml File
Đây là file cấu hình chính cho dự án, mọi thay đổi ở đây đều cần phải chạy lại lệnh khỏi động trên local để thay đổi nôi dung của page. các nội dung cơ bản cần thay đổi:
- title: tên của
blog
- tagline:
subtitle
cho blog - url: đường dãn tới
Github Page
của bạn, dùng để chuyển hướng - github: thay
username
bằngGithub Username
- social: thay
name
bằng tên của bạn, nó được hiển thị sau phầnBy
trong mỗi bài viết, tức tên của người viết - avatar: sử dụng đường dẫn tương đối hoặc đường dẫn tuyệt đối đến hình ảnh bên ngoài.
- comments: chọn
giscus
làm hệ thốngcomments
chính, thêm cấu hình cho giscus ở bên dưới, đã được lấy ở cài đặt giscus. Mặc định, tính năngcomments
được bật, sử dụngcomments: false
ở header bài viết cần tắt.
_data/locales/en.yml File
Mặc định file này chưa được tạo, tạo file và copy nội dụng từ en.yml chỉnh thức để cấu hình.
- meta: ở phần
Footer
bạn sẽ thấy dòngUsing the Chirpy theme for Jekyll.
, nhìn rất ngữa mắt. Đặtmeta: ""
để tắt nó. - copyright: thay đổi nội dung nếu cần.
assets/img/favicons/favicon.ico File
Để thay đổi favicon, bạn cần tạo 1 tập các favicon theo cách sau: Truy cập vào site sau để tạo tập favicon
Sau đó tải tập các favicon này về và giải nén
Cuối cùng xóa 2 file browserconfig.xml
và manifest.json
rồi copy tập favicon vào assets/img/favicons
post File
Mọi bài viết phải được đặt tên ở dạng year-month-day-name-of-article.md. Tham khảo chuẩn viêt tại đây
Sau khi cấu hình, chỉ cần push nó lên lại, đợi cho Github Action chạy 1 thời gian rồi vào reload để cập nhật nội dung mới.
Conclusion
Hoàn thành được hết các bước ở trên, bạn đã có trang blog cho riêng mình.
Goodluck! 🍀🍀🍀