Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Jekyll
Webdesign

Thiết lập Jekyll cho GitHub Pages trong 60 Giây

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called 60 Second Video Tutorials.
Start Learning Web Design in 60 Seconds
Adobe XD in 60 Seconds

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Jekyll có thể được sử dụng với GitHub Pages để tạo các trang web tĩnh đơn giản, dạng blog-aware. Video này sẽ chỉ cho bạn cách thiết lập cấu trúc tập tin phẳng của Jekyll trong 60 giây!

Một khi bạn đã sẵn sàng và cần một nguồn cảm hứng, thì hãy kiểm tra những thứ sẵn có trong số các theme cho Jekyll trên Envato Market.

Nếu bạn thích một bài hướng dẫn hơn, thì dưới đây là toàn bộ tiến trình được mô tả trong các bước rõ ràng:

Dự án mới

Đầu tiên, tạo một thư mục trên hệ thống của bạn cho một repo (kho chứa) mới. Thực hiện điều này bằng cách sử dụng trình gõ lệnh để chuyển đến thư mục mà bạn muốn, sau đó nhập: mkdir mysite. Thư mục mới của chúng ta được gọi là "mysite", nhưng bạn có thể đặt tên nó tuỳ ý bạn.

Chuyển đến thư mục mới này bằng cách nhập cd mysite - một khi ở đó tạo một tập tin cấu hình bằng cách nhập lệnh vim _config.yml. Cửa sổ dòng lệnh của bạn sẽ hiển thị cho bạn nội dụng của tập tin này, vì vậy nhấn i để chuyển sang chế ộ nhập, sau đó thêm nội dung sau:

Nhấn phím Esc để thoát khỏi chế độ nhập, sau đó nhấn :x để lưu các thay đổi mà bạn đã làm.

Tạo Index

Tiếp theo chúng ta cần tạo tài liệu index, vì thế nhập vim index.md và rất giống với việc bạn đã làm trước đây, thêm nội dung sau:

Thêm thư mục Layouts

Bây giờ tạo một thư mục mới bằng cách nhập mkdir _layouts và chuyển đến thư mục đó với cd _layouts. Cho nó một template mặc định vim default.html và thêm nội dung sau:

Khởi tạo một Repo mới

Bây giờ chúng ta cần khởi tạo thư mục như là một repo mới và commit các thay đổi. Vì thế bắt đầu bằng cách điều hướng trở lại thư mục gốc của dự án với cd ... Sau đó nhập git init, theo sau là git add --all && git commit --all.

Đẩy lên GitHub

Chuyển qua GitHub thông qua trình duyệt và tạo một repo mới.

Bạn sẽ được cho một số tuỳ chọn ở thời điểm hiện tại, vì thế hãy chụp lấy các lệnh nơi mà bạn thấy push an existing repository from the command line. Các dòng lệnh sẽ đọc một số thứ giống như sau:

Dán các lệnh này vào trong trình gõ lệnh của bạn để đẩy repo cục bộ của bạn lên GitHub.

Các thiết lập của GitHub

Cuối cùng, trong Settings của repo trên GitHub, chọn sử dụng master branch cho GitHub Pages, sau đó nhấn Save.

Jekyll đã được thiết lập xong, và trang web của bạn đã sẵn sàng để xây dựng!

Cấu trúc file Jekyll, Diễn giải

  • _config.yml hoạt động như là tập tin cấu hình Jekyll. Đây là những gì mà GitHub Pages đọc các thiết lập tổng quát chẳng hạn như các biến toàn cục, và nhiều thứ khác.
  • index.md là tài liệu chỉ mục gốc của trang web GitHub Pages.
  • _layouts/default.html là tập tin template mặc định mà index.md sẽ dựa trên nó.

Các tài nguyên hữu ích

Để học thêm về việc xây dựng các trang web tĩnh sử dụng Jekyll, hãy xem các nguồn tài liệu sau xung quanh Envato Tuts+!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.