×

Cài đặt thư viện Jekyll trong JavaScript

Avatar of admin
admin 0 Views

Jekyll là một công cụ tuyệt vời cho việc xây dựng trang tĩnh, thường được sử dụng cùng với GitHub Pages để triển khai các trang web một cách dễ dàng và hiệu quả. Dẫu vậy, đa số các tài liệu hướng dẫn liên quan đến Jekyll đều tập trung vào Ruby — ngôn ngữ mà Jekyll được viết bằng nó. Tuy nhiên, nếu bạn đang làm việc chủ yếu với JavaScript và mong muốn tích hợp Jekyll vào môi trường JavaScript của mình, dưới đây là hướng dẫn chi tiết về cách cài đặt và sử dụng thư viện Jekyll thông qua JavaScript.

Jekyll là gì?

Trước khi đi sâu vào việc cài đặt và tích hợp, hãy cùng tìm hiểu một chút về Jekyll. Jekyll là một generator trang tĩnh theo kiểu blog-aware, có khả năng biến các template văn bản đơn giản vào trong trang web tĩnh hoặc blog. Jekyll hoạt động bằng cách lấy nội dung từ các tệp Markdown hoặc Textile và dùng Liquid để render ra HTML.

Cài Đặt Jekyll

Điều Kiện Tiên Quyết

Trước khi cài đặt Jekyll, bạn cần đảm bảo rằng hệ thống của bạn đã được cài đặt Ruby và bundler, vì Jekyll chủ yếu dựa trên Ruby. Nếu bạn chưa có Ruby:

  • Cài đặt Ruby: Bạn có thể tải Ruby từ trang chính thức https://www.ruby-lang.org/en/downloads/ và làm theo hướng dẫn để cài đặt vào hệ thống của mình.
  • Cài đặt Bundler: Bundler giúp quản lý các phụ thuộc của Ruby. Sau khi cài đặt xong Ruby, bạn có thể cài đặt Bundler bằng cách chạy gem install bundler.

Cài Đặt Jekyll

Khi đã chuẩn bị đầy đủ các điều kiện tiên quyết, chúng ta có thể tiến hành cài đặt Jekyll:

gem install jekyll
gem install bundler

Sau khi cài đặt, bạn có thể kiểm tra lại bằng cách chạy:

jekyll -v

Lệnh này sẽ trả về phiên bản của Jekyll nếu việc cài đặt đã thành công.

Tích Hợp Jekyll với JavaScript

Tạo dự án Jekyll

Dưới đây là các bước cơ bản để bắt đầu một dự án Jekyll mới:

jekyll new my-jekyll-site
cd my-jekyll-site
bundle install

Điều này sẽ tạo ra cơ cấu thư mục cơ bản cho một dự án Jekyll điển hình, bao gồm các tệp và thư mục như _posts, _layouts, và _includes.

Sử Dụng NPM để Quản Lý Phụ Thuộc

Nếu bạn muốn quản lý phụ thuộc của mình bằng NPM, bạn có thể thêm các phần của Jekyll vào project của bạn bằng cách kết hợp nó với npm scripts.

  1. Khởi tạo NPM trong thư mục dự án Jekyll:

    npm init -y

  2. Cài đặt các gói cần thiết:

    Npm scripts sẽ giúp chúng ta chạy các lệnh Jekyll thông qua npm.

    npm install --save-dev concurrently

  3. Cấu hình package.json:

    Mở package.json và thêm các script mới cho Jekyll:

    "scripts": {
    "jekyll": "bundle exec jekyll serve",
    "build": "bundle exec jekyll build",
    "start": "concurrently \"npm run jekyll\""
}

Tích Hợp JavaScript trong Jekyll

Một trong những ưu điểm lớn khi sử dụng Jekyll là khả năng kết hợp nó một cách dễ dàng với JavaScript và nhiều thư viện JavaScript hiện đại như React, Vue.js hay Angular. Dưới đây là cách bạn có thể thêm các tệp JavaScript vào dự án Jekyll của mình.

Thêm tệp JavaScript

  1. Tạo thư mục JavaScript:

    Thêm thư mục assets/js và đặt các tệp JavaScript của bạn vào đây.

  2. Sử Dụng Webpack cho JavaScript:

    Webpack là một module bundler mạnh mẽ dành cho JavaScript, giúp bạn dễ dàng quản lý và build các tệp JavaScript. Bạn có thể cài đặt webpack thông qua npm và cấu hình nó cho dự án của mình.

    npm install --save-dev webpack webpack-cli

    Tạo một tệp webpack.config.js ở thư mục gốc của dự án và cấu hình nó như sau:

    const path = require('path');

module.exports = {
  entry: './assets/js/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'assets/js')
  },
  mode: 'development'
};

  3. Thêm script bundle vào layout:

    Trong tệp _layouts/default.html, thêm dòng sau vào thẻ <head> để bổ sung bundle JavaScript của bạn:

    <script src="{{ '/assets/js/bundle.js' | relative_url }}"></script>

Kiểm Tra Trình Bày

Sau khi đã tích hợp và xây dựng thành công, bạn có thể khởi động máy chủ Jekyll bằng lệnh:

npm start

Điều này sẽ chạy máy chủ Jekyll và bạn có thể truy cập trang web của mình thông qua địa chỉ http://localhost:4000.

Kết Luận

Bằng việc theo dõi các bước này, bạn có thể dễ dàng tích hợp Jekyll vào dự án JavaScript của mình và tận hưởng được lợi ích của cả hai công cụ mạnh mẽ này. Mặc dù Jekyll chủ yếu dựa trên Ruby, nhờ sự kết hợp với npm scripts và các công cụ JavaScript hiện đại như Webpack, việc sử dụng Jekyll trong môi trường JavaScript đã trở nên dễ dàng hơn bao giờ hết.

Comments

Bài viết liên quan