Cài đặt Jekyll

Tùy chọn cài đặt Jekyll nếu bạn muốn preview trang trên máy tính cục bộ (localhost), nếu không cài trên máy sẽ khó và mất thời gian hơn chút khi tùy biến trang web. Tuy nhiên, nếu không cài m đẩy mã nguồn lên Github page vẫn có thể hiển thị website bình thường.

  • Hướng dẫn: tại đây
  • Chi tiết:
    • Tải Ruby Installer cho Windows
    • Mặc định chọn ridk install ở bước cài đặt cuối cùng của Wizard
    • Trong terminal/command prompt chạy sau khi kết thúc Wizard, nhập 3 cho tùy chọn tương ứng MSYS2 and MINGW development tool chain demo
    • Mở cửa sổ mới cho Terminal/command prompt, chạy lệnh gem install jekyll bundler
    • Cập nhật phiên bản mới theo hướng dẫn nếu cần. Ví dụ gem update --system 3.4.22
    • Kiểm tra phiên bản jekyll -v

YAT theme

Để sao chép giao diện đang hiển thị của trang web này, bạn có thể clone mã nguồn github tại đây

Bạn cũng có thể truy cập trang dự án của giao diện nguyên bản trên Github: yekyll theme yat

Thiết lập

  • File Gemfile chứa thông tin thiết lập về theme được sử dụng, các gói phụ thuộc cần được chỉ rõ. Trong hướng dẫn ban đầu tác giả nêu không đầy đủ do đó khi sử dụng sẽ gặp lỗi khi thiết lập và người dùng không có kinh nghiệm sẽ loay hoay.
  • File _config.yml chứa tất cả các cài đặt cho site. Uncomment và thay thế các giá trị mặc định để cập nhật.
  • Có thể cần chạy bundle install để cài đặt các gói phụ thuộc
  • Cuối cùng, chạy lệnh bundle exec jekyll serve để chạy local server và xem trước nội dung để có thể tùy biến trang web.
  • Để build (generate site) tại môi trường local, chạy lệnh bundle exec jekyll build từ thư mục dự án. Khi chạy lệnh buid, các thay đổi tự động được gán cho nhánh gh-

    Build local hay github action và github page?

  • Nên sử dụng local mặc dù mất công thiết lập môi trường (1 lần), về sau chạy lệnh build nhanh chóng và cho phép preview trang để dễ dàng debug. Sau khi thành công hãy push vào 1 nhánh riêng và đẩy lên github page branch để hiển thị.
  • Github page chạy mất thời gian, không thể preview, lỗi thì khó debug hơn hoặc reverse lại phiên bản cũ.

Tính năng

Viết bài

  • Diagram: Có thể sử dụng PlantUML hoặc Mermaid
  • Table: Hỗ trợ nhiều cài đặt như gộp ô, headless
  • Hỗ trợ đa dạng các cú pháp markdown cơ bản lẫn nâng cao.

Giao diện

  • Đặt properties sidebar: [] để ẩn TOC bên phải
  • Cấu hình sidebar tại file article_menu tại đường dẫn jekyll-theme-yat\_includes\sidebar
  • Thay đổi tên Dark/Light thành Tối/Sáng tại file jekyll-theme-yat/_includes/extensions/theme-toggle.html
  • Thay đổi màu sắc chủ đạo cho theme trong _config.yml

Phân tích

  • Sửa đổi đoạn mã theo dõi GA thành GTM (nếu cần) tại file jekyll-theme-yat/_includes/extensions/google-analytics.html