Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Xây dựng Trang web tĩnh Với Jekyll

by
Length:LongLanguages:

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

Một CMS quá nhiều tính năng hiếm khi cần thiết. Đôi khi, bạn chỉ cần tạo ra một trang web tĩnh và nhẹ nhàng... nhưng bạn có vừa đủ số trang để làm cho quá trình sao chép các tập tin template và việc tạo ra những sự thay đổi markup trên các trang trở thành một công việc khó chịu. Hôm nay, tôi sẽ minh hoạ một giải pháp đơn giản—Jekyll—sẽ làm cho việc tạo ra các trang web nhỏ trở nên dễ dàng.


Bước 0: Làm quen Với Jekyll

Jekyll là một chương trình tạo web tĩnh đơn giản cùng với tính năng blog aware.

Jekyll là một chương trình tạo web tĩnh đơn giản, blog aware. Đó là những gì mà trang web nói. Nhưng, điều đó có nghĩa là gì? Một chương trình tạo trang web tĩnh là một chương trình mà lấy một tập hợp các tập tin và tạo ra trang web của bạn với chúng. Như bạn sẽ thấy, chúng ta sẽ có thể sử dụng một bộ template, tạo các tập tin có nội dung riêng lẻ, và sau đó sử dụng Jekyll để tạo ra trang web của chúng ta. Về phần "blog aware" nó có nghĩa là chúng ta có thể sử dụng điều này để tạo một blog hoặc bất kỳ trang web nào mà có một loạt các mục tương tự như bài viết (chẳng hạn như portfolio). Hãy thử nó xem sao nhé!


Bước 1: Cài đặt Jekyll

Tham khảo tại đây để tìm hiểu thêm về Ruby Gems.

Chúng ta sẽ bắt đầu bằng cách cài đặt Jekyll; nó là một Ruby gem, vì vậy việc cài đặt nó là khá dễ dàng.

Đó là điều dễ dàng. Có một vài thứ nữa mà chúng ta có thể cài đặt nếu chúng ta có kế hoạch thực hiện một thiết lập phức tạp hơn, tuy nhiên, vì chúng ta không, nên như vậy là đủ.


Bước 2: Tạo Template Đầu tiên của Chúng ta

Mỗi tập tin hoặc thư mục không bắt đầu bằng một dấu gạch dưới sẽ được sao chép vào trang web được tạo ra.

Tiếp theo, hãy thiết lập các thư mục cho Jekyll. Tạo một thư mục, đặt tên là example-app cho hướng dẫn này; chúng ta sẽ tạo một trang web portfolio (danh mục) nho nhỏ, ví dụ, trang web cho một nhiếp ảnh gia. Đây là một ví dụ tuyệt vời về nơi mà Jekyll tỏa sáng: đó là một trang web nhỏ mà sẽ không được cập nhật quá thường xuyên, nhưng đủ lớn để bạn không muốn phải mở mọi trang khi bạn cần thực hiện thay đổi markup.

Trong example-app, hãy tạo một thư mục có tên là _layouts. Lưu ý dấu gạch dưới ở phía trước tên thư mục này: bất kỳ thư mục hoặc tập tin nào bắt đầu với một dấu gạch dưới sẽ không phải là một phần của trang web mà Jekyll tạo ra. Nếu chúng có tên mà Jekyll nhận biết được (chẳng hạn như _config.yml hoặc _layouts), thì nội dung của chúng sẽ được sử dụng trong việc tạo ra trang web, nhưng bản thân các tập tin sẽ không hiển thị trong trang web. Hãy nhớ điều này: mọi tập tin hoặc thư mục không bắt đầu bằng một dấu gạch dưới thì sẽ được sao chép vào trang web được tạo ra (mặc định là vào thư mục con _site)

Như vậy, hãy tạo một bố cục. Chúng ta sẽ bắt đầu với một bố cục trang web chung bao gồm toàn bộ "chrome" cho trang web của chúng ta. Tạo một tập tin mới, đặt tên là default.html bên trong thư mục _layouts (tên gọi không quan trọng), và thêm code sau vào nó:

Một số điều cần ghi nhớ ở đây...

Thứ nhất, Jekyll sử dụng hệ thống template Liquid (mặc định). Điều này có nghĩa là, bất cứ điều gì mà bạn có thể làm với Liquid, thì bạn có thể làm trong một template trong Jekyll. Ví dụ, trong thẻ <title>, chúng ta đang sử dụng cả hai kiểu markup của Liquid: output markuptag markup. Output markup có thể xuất văn bản (nếu tồn tại biến được tham chiếu đến), trong khi tag markup thì không. Output markup được phân cách bởi cặp dấu ngoặc nhọn, trong khi tag markup được phân cách bởi bộ đôi dấu nháy/dấu phần trăm.

Điều tiếp theo cần lưu ý ở trên là những gì bên trong các thẻ Liquid: những thứ như page.titlecontent. Đây là những biến được cung cấp bởi Jekyll; Bạn có thể xem danh sách dữ liệu mẫu có sẵn trong tài liệu hướng dẫn. Chúng ta cũng có thể tạo ra dữ liệu mẫu tùy biến, như chúng ta sẽ sớm tìm hiểu.

Cuối cùng, hãy lưu ý đến CSS mà chúng ta đang liên kết đến: tạo một thư mục css trong thư mục gốc của dự án và thêm một ít phong cách vào tập tin style.css:

Ngoài ra, hãy tạo một thư mục img và thêm một hình ảnh, đặt tên là banner.jpg; chúng ta sẽ sớm sử dụng nó. Bất kỳ hình ảnh nào; chỉ cần cắt nó thành 960px x 300px ;.

Bạn có thể tự hỏi tại sao chúng ta lại sử dụng câu lệnh if ở trên nếu biến page.title sẽ không hiển thị nếu nó tồn tại? Vâng, nếu nó tồn tại, tôi muốn bao gồm thanh dọc phía sau nó; một cách khác để viết điều đó sẽ là như sau:

Như vậy, làm thế nào chúng ta sử dụng template này? Vâng, chúng ta cần phải tạo một trang sẽ sử dụng template này. Trong thư mục gốc của dự án, tạo một tập tin index.html. Dưới đây là nội dung:

Đây là nội dung của tập tin index.html của chúng ta. Hãy lưu ý những thứ ở đầu của tập tin: Jekyll gọi đây là YAML front matter. Bất kỳ tập tin nào (không bắt đầu bằng một dấu gạch dưới) mà có YAML front matter sẽ được tạo ra bởi Jekyll trước khi đưa vào thư mục _site (nếu nó không có dấu gạch dưới hoặc YFM, thì nó sẽ chỉ được sao chép vào _site). Trong trường hợp này, YAML front matter chỉ cần nói với Jekyll template nào mà chúng ta muốn nó sử dụng.

Bây giờ, hãy mở terminal, cd vào thư mục dự án của bạn, và chạy jekyll build. Bạn sẽ thấy một vài thứ tương tự như sau:

Hãy bỏ qua cảnh báo; rồi chúng ta sẽ sớm đến đó. Còn bây giờ, bạn có thể thấy rằng trang web đã được xây dựng trong một thư mục _site hoàn toàn mới được tạo ra. Nếu bạn mở tập tin _site/index.html trong trình duyệt của bạn, bạn sẽ thấy... một thất bại. Vấn đề đó là đường dẫn của chúng ta (url và stylesheet) bắt đầu bằng một dấu gạch chéo. Điều này có nghĩa là chúng ta không thể chỉ xem chúng dưới dạng tập tin, mà chúng ta cần phải xem chúng trên một máy chủ. Tất nhiên, bạn có thể khởi động W/MAMP, nhưng tại sao lại phải rắc rối như vậy? Jekyll có một máy chủ được tích hợp sẵn. Vì vậy, hãy chạy jekyll server, và truy cập localhost:4000 sẽ thấy một thứ tương tự như hình ảnh dưới đây:

Tutorial Image

Nếu hình ảnh ở trên là không đủ, thì hãy nhìn vào code của _site/index.html. Bạn sẽ thấy rằng template mà chúng ta đã chỉ định đã được trộn với nội dung mà chúng ta cung cấp và—đây rồi!—chúng ta đã có trang web của chúng ta.

Tôi muốn nhắc nhở bạn rằng, đó là YAML front matter làm cho điều ma thuật này xảy ra; nếu một tập tin không bắt đầu bằng ba dấu gạch ngang, một hoặc nhiều dòng thuộc tính, và một dòng gồm ba dấu gạch ngang khác, thì tập tin sẽ chỉ được sao chép vào thư mục _site mà không thực thi quá trình tạo trang.


Bước 3: Tạo một Template Portfolio

Bây giờ chúng ta đã nắm vững những kiến thức cơ bản, hãy tạo một portfolio cho nhiếp ảnh gia tưởng tượng của chúng ta. Còn nhớ tôi đã lưu ý rằng Jekyll là "blog aware" như thế nào không? Vâng, chúng ta sẽ sử dụng tính năng blog aware này cho lợi thế của chúng ta: thay vì các bài viết, chúng ta sẽ có các mục portfolio.

Các bài viết thuộc về một thư mục, được gọi là _posts, vì vậy hãy tạo ra nó ngay bây giờ. Mẫu đặt tên tập tin cho các bài viết cũng phải cụ thể: năm-tháng-ngày-tiêu đề.ext. Các bài viết—à, bất kỳ tập tin nào trong trang web Jekyll của bạn, thật sự—có thể là Markdown hoặc HTML.

Như vậy, hãy tạo một vài bài viết: hãy nhớ rằng, chúng sẽ thật sự là các mục trong portfolio của chúng ta:

_posts/2010-03-04-bikes.md

_posts/2010-10-01-wing.md

_posts/2011-06-05-bridge.md

_posts/2011-07-09-road.md

Khá đơn giản, phải không? Lưu ý cách chúng ta tạo một trường YAML front matter tuỳ biến: image. Đây là URL trỏ đến hình ảnh cho mục đó. Tất nhiên, chúng ta có thể xây dựng toàn bộ mục HTML ở trong tập tin này, nhưng nếu chúng ta muốn thay đổi nó thì sao? Chúng ta phải quay trở lại và thay đổi nó trong mỗi mục. Bằng cách này, chúng ta có thể thay vào đó sử dụng template portfolio_entry để kết xuất chúng. Template đó trông như thế nào? Nó cũng khá đơn giản:

_layouts/portfolio_entry.html

Nếu bạn nhìn vào trang dữ liệu template, bạn sẽ biết rằng bất kỳ front matter tuỳ biến nào mà chúng ta đã thêm sẽ sẵn có trong page; vì vậy, ở đây, chúng ta có thể truy cập page.image. Chúng ta cũng sử dụng page.titlecontent (tất cả mọi thứ phía sau dòng có ba dấu gạch ngang cuối cùng).

Tôi cần phải nói rằng, mặc dù title của bài bài viết được cho là sẵn có trên đối tượng post, nhưng tôi chỉ có thể làm cho nó hoạt động trên đối tượng page. Dù sao thì cũng hoạt động!

Đồng thời, hãy lưu ý rằng template này của chúng ta sử dụng bố cục default (mặc định) của chúng ta. Bạn có thể lồng các template giống như vậy, và làm cho công việc của bạn trở nên dễ dàng hơn.

Điều này cho chúng ta mục (post) page của chúng ta, nhưng còn trang portfolio chính thì sao? Khi viết thanh điều hướng trong bố cục mặc định của chúng ta, tôi nhận thấy rằng chúng ta muốn nó là /portfolio/. Vì vậy, hãy tạo một thư mục, đặt tên là portfolio trong thư mục gốc, và tạo tập tin index.html bên trong nó và dán code sau đây vào.

Đây là phần phức tạp nhất của chúng ta từ trước đến nay. Hãy nhớ rằng, đây không phải là một template: đó là một tập tin "bình thường", nhưng nó vẫn có thể bao gồm thẻ Liquid. Chúng ta bắt đầu bằng cách thiết lập layout thành defaulttitle thành "Portfolio".

Lưu ý rằng, trong HTML, chúng ta có một vòng lặp Liquid for-in. Chúng ta truy vấn tất cả các bài viết với site.posts; Sau đó, chúng ta lặp qua các bài viết đó bằng for post in site.posts / endfor Nếu bạn đã từng làm việc với WordPress, hoặc bất kỳ hệ thống blog nào khác, thì bạn chắc đã quen với khái niệm về vòng lặp. Đó là tất cả những gì đang nói ở đây! Bên trong, như bạn có thể thấy, chúng ta có thể có các thuộc tính tiêu chuẩn, cũng như bất kỳ front matter nào mà chúng ta đã định nghĩa (chẳng hạn như image).

Bây giờ nếu chúng ta chạy jekyll server để tạo lại trang web và khởi động máy chủ, thì localhost:4000/portfolio/ sẽ hiện ra như sau:

Tutorial Image

Và đây là khi truy cập vào một trang:

Tutorial Image

Tuyệt! Bạn đã tạo được một portfolio. Tôi chắc rằng bạn cũng đã thấy, nó hoạt động như thế nào đối với một trang blog. Bây giờ hãy tìm hiểu một số tùy chọn cấu hình cho Jekyll.


Bước 4: Viết một Tập tin Cấu hình

Có vô số tuỳ chọn cho Jekyll. Thật tuyệt vời khi tất cả chúng đều có giá trị mặc định thật sự dễ hiểu, nhưng nếu bạn muốn thay đổi chúng, thì cũng không có gì khó.

Có hai cách để thiết lập các tùy chọn.

  • Trước hết, khi bạn chạy chương trình trong dòng lệnh, bạn có thể truyền vào các tham số. Chúng ta đã thấy tham số server, cái dùng để khởi động máy chủ sau khi tạo ra trang web.
  • Một cách khác, và cách mà chúng ta sẽ sử dụng ở đây, là ở trong một tập tin cấu hình, được gọi là _config.yml; đây là một tập tin YAML, do đó mỗi dòng là một cặp key: value (khoá: giá trị), cũng giống như trong YAML front matter. Jekyll sẽ tìm kiếm tập tin này trước khi tạo ra trang web.

Vì vậy, hãy tạo tập tin _config.yml và hãy xem một số tùy chọn phổ biến nhất.

Để có danh sách đầy đủ các tùy chọn, hãy xem lại tài liệu hướng dẫn cấu hình.

  • auto: Thêm auto: true vào tập tin cấu hình của bạn sẽ giữ cho Jekyll chạy liên tục, giám sát thư mục dự án của bạn để phát hiện các thay đổi và tạo lại trang web ngay lập tức.
  • source: Nếu các tập tin mã nguồn của bạn nằm trong một thư mục khác so với thư mục bạn đang chạy Jekyll, thì bạn sẽ cần thiết lập thư mục đó với thuộc tính source.
  • destination: Mặc định, thư mục đích cho trang web được tạo ra của bạn là ./_site. Nếu bạn muốn một thư mục khác, hãy thiết lập nó ở đây.
  • permalink: Permalink là đường dẫn đến các bài viết của bạn. Mặc định, đó là /year/month/day/title.html. Tuy nhiên, bạn có thể tùy chỉnh điều đó nếu bạn muốn. Trong số những biến khác, bạn có thể sử dụng các biến :year, :month, :date, :title, và :categories. :categories đến từ front matter; tất cả những biến khác đến từ tên tập tin bài viết. Sau đó, bạn có thể thiết lập permalink thành những thứ như /:year/:month/:title/ hoặc /:categories/:title.html. Mẹo: nếu bạn có một thuộc tính permalink trong front matter bài viết, nó sẽ thay thế cái mặc định trên toàn bộ trang web.
  • exclude: Giống như tôi đã nói ở trên, Jekyll sẽ không tạo các tập tin trong thư mục bắt đầu với một dấu gạch dưới. Tuy nhiên, nếu bạn có các thư mục mà bạn muốn nó bỏ qua, nhưng nó không bắt đầu bằng một dấu gạch dưới, thì bạn có thể làm điều đó với exclude trong tập tin cấu hình của bạn.

Bước 5: Triển khai Trang web

Vậy, giả sử bạn đã tạo trang web và muốn thiết lập nó miễn phí trên mạng. Làm thế nào để bạn làm điều đó?

Có một số cách để thực hiện điều này. Tất nhiên, nếu đó là một trang web nhỏ mà bạn sẽ không cập nhật quá thường xuyên, thì chỉ cần FTP nó lên máy chủ của bạn; đây có thể là lựa chọn duy nhất của bạn nếu bạn đang sử dụng host chia sẻ.

Nếu bạn có một VPS hoặc host chuyên dụng, bạn có thể chạy một cách tự động. Hãy tham khảo tài liệu hướng dẫn triển khai để có được một danh sách các ý tưởng hay. Nếu bạn không chắc phải làm gì, hãy thử làm theo các chỉ dẫn sử dụng hook post-receive của git; Tôi đã thử nó, và nó khá tuyệt.


Bước 6: Nâng cao

Đây chỉ là một mẹo về Jekyll.

  • Có một kiến ​​trúc plugin cho phép bạn sửa đổi cách nội dung của bạn được tạo ra.
  • Có nhiều điều bạn có thể làm với Liquid và một số extension của Liquid mà Jekyll thêm vào.
  • Có rất nhiều dữ liệu template mà chúng ta chưa nhắc đến. Hãy kiểm tra nó và xem những gì bạn có thể làm!

Tóm tắt

Vâng, đó là phần giới thiệu của bạn với Jekyll - trình tạo trang web tĩnh, đơn giản, blog aware. Lần tới nếu bạn xây dựng một trang web quảng cáo nho nhỏ, kinh doanh, portfolio, thiết nghĩ bạn sẽ thử Jekyll chứ? Hãy cho tôi biết trong phần nhận xét và cảm ơn bạn rất nhiều vì đã theo dõi!

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.