menu

Thiết kế website Jekyll hoàn chỉnh (bài 1)

Đăng lúc 30/12/2017, trong chuyên mục Liquid và Jekyll

Tôi bắt đầu viết loạt bài thiết kế một trang web Jekyll từ chưa có gì. Chúng ta sẽ đi vào tìm hiểu cấu trúc chung, cách sử dụng framework Materializecss để áp dụng vào việc xây dựng một trang web cá nhân Jekyll hoàn chỉnh. Tôi dùng loạt bài này để thiết kế lại cho trang cá nhân dinhanhthi.com.

Những điều chuẩn bị và lưu ý

  • Tôi không tự mình viết nên một trang web từ con số 0 mà dựa chủ yếu vào một số frameworks có sẵn, trong đó cái chính là Materializecss. Framework sẽ giúp ta “làm nhanh” các quá trình thiết kế chứ không cung cấp sẵn template hoàn chỉnh. Hai lựa chọn framework khác cũng rất hay là BootstrapBulma.
  • Tôi là một dân không chuyên, học Jekyll và thiết kế web từ nhu cầu thực tế và mang tính “cần gì học đó” chứ không có xuyên suốt. Bài viết này cũng theo nhu cầu đó, tôi sẽ chỉ đưa ra những gì cần thiết cho mục đích thiết kế một trang web Jekyll.
  • Để có thể hiểu về Jekyll một cách đầy đủ và trọn vẹn, bạn có thể tham khảo trang chủ dự án.
  • Bạn hoàn toàn có thể không cần tự mình thiết kế mà có thể dựa trên những templates có sẵn, chỉ việc sửa lại đôi chút theo ý mình là được. Đọc thêm bài viết này để biết cách làm kiểu “mì ăn liền” này.
  • Jekyll sử dụng ngôn ngữ là Liquid nên nếu bạn cần tham khảo thêm ngôn ngữ này, bạn có thể xem tại đây, hoặc cheat sheet ngắn gọn tại đây.
  • Việc xây dựng web site Jekyll này kết hợp với Github Pages, hoàn toàn miễn phí. Đọc thêm bài viết này để biết cách tạo trang web với Github Pages.

Tạo trang local

Chúng ta tạm thời chưa xuất bản trang web lên Github Pages mà chỉ thiết kế và làm hoàn toàn trên localhost (trên máy của mình). Bạn đọc thêm bài viết này để biết cách build local jekyll site. Bên dưới là các bước làm cơ bản

Tạo một thư mục, ví dụ tên git, để chứa hết các dự án git của bạn, trong đó có thư mục chứa trang web mà bạn đang xây dựng.

Bạn sử dụng một phần mềm commander (Windows) hoặc Terminal (Linux hoặc MacOS) để gõ các câu lệnh bash cần thiết. Ở đây tôi dùng phần mềm cmder.

Sau đó bạn cd đến thư mục git đã tạo ở trên và sang bước tiếp theo.

Cài Ruby từ trang web này. Bạn có thể kiểm tra phiên bản hiện tại của Ruby trên máy bằng dòng lệnh ruby -v.

Sau đó bạn cần cài đặt jekyll,

gem install jekyll

Tạo một site jekyll mới bằng dòng lệnh, nó sẽ tạo ra một thư mục, ví dụ tôi đặt tên siteLocal, chứa tất cả các files/thư mục cần thiết cho trang jekyll của bạn.

jekyll new siteLocal

Sau đó bạn cần cd đến thư mục siteLocal

cd siteLocal

Trong siteLocal sẽ chứa các files và thư mục mở đầu dạng

siteLocal
|--_posts
|--.gitignore
|--_config.yml
|--404.html
|--about.md
|--Gemfile
|--Gemfile.lock
|--index.md
  • face Ý nghĩa của files/folders ở trên

    Tôi sẽ nói chi tiết hơn ý nghĩa của chúng trong bài viết, dưới đây là sơ lược:

    • _posts: nơi chứa các bài post trên trang web của bạn.
    • .gitignore: chứa các files/folders mà git sẽ bỏ qua, không đưa vào vùng stage và commit.
    • _config.yml: các thiết lập cho trang jekyll.
    • 404.html: trang 404 mỗi khi ai đó truy cập một đường dẫn không có trên trang của bạn.
    • about.md: trang giới thiệu (http://localhost:4000/about).
    • Gemfile: chứa các gems cần thiết để chạy trang jekyll. Các gems này giống như các plugins vậy.
    • Gemfile.lock: khóa.
    • index.md: trang chủ trang web của bạn.

Bước này là bước chuẩn bị để sau này bạn xuất bản site lên Github Pages, bạn cần cài bundler bằng câu lệnh

gem install bundler

Bây giờ, cơ bản bạn đã có một site jekyll local “có thể chạy được”. Bạn hãy gõ dòng lệnh sau để chạy server local

bundle exec jekyll serve

Mở trình duyệt, truy cập http://localhost:4000/ để xem trang web sơ khai này.

Trang jekyll mở đầu

Ở bài tiếp theo, chúng ta sẽ đi tìm hiểu cấu trúc chính của một trang jekyll.

jekyll
git
tạo website
liquid
thiết kế web
Top