Nội dung
- Yêu cầu - Bước 1 - Cài đặt Jekyll - Bước 2 - Mở firewall - Bước 3 - Tạo một trang web phát triển mới - Bước 4 - Khởi động Server Web của Jekyll - Kết luận

Thứ ba, 20/03/2018 | 00:00 GMT+7

Cách thiết lập trang web phát triển Jekyll trên Ubuntu 16.04

Jekyll là một trình tạo trang web tĩnh cung cấp một số lợi ích của Hệ thống quản lý nội dung (CMS) trong khi tránh các vấn đề về hiệu suất và bảo mật do các trang web hướng database đó đưa ra. Nó “biết blog” và bao gồm các tính năng đặc biệt để xử lý nội dung được sắp xếp theo ngày tháng, mặc dù tính hữu ích của nó không giới hạn ở các trang blog. Jekyll rất phù hợp cho những người cần làm việc offline , thích sử dụng editor nhẹ cho các biểu mẫu web để bảo trì nội dung và muốn sử dụng kiểm soát version để theo dõi các thay đổi đối với trang web của họ.

Trong hướng dẫn này, ta sẽ cài đặt trang web phát triển Jekyll 3.7.3 trên Ubuntu 16.04. Trong các hướng dẫn sau, ta sẽ khám phá nội dung được tạo ở đây, xuất bản một trang web tĩnh lên cùng một server và cuối cùng triển khai đến một vị trí production .

Yêu cầu

Để làm theo hướng dẫn này, bạn cần :

Server Ubuntu 16.04 với user không phải root có quyền sudo : Bạn có thể tìm hiểu thêm về cách cài đặt user có các quyền này trong hướng dẫn Cài đặt server ban đầu với Ubuntu 16.04 của ta .

Khi bạn đã hoàn thành yêu cầu này, bạn đã sẵn sàng cài đặt Jekyll và các phụ thuộc của nó.

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

Ta sẽ bắt đầu bằng cách cập nhật danh sách gói của bạn đảm bảo rằng ta có thông tin mới nhất về các version mới nhất của gói và các phụ thuộc của chúng:

sudo apt-get update

Sau đó, ta sẽ cài đặt Ruby và các thư viện phát triển của nó cũng như make và build-essential để các thư viện của Jekyll sẽ biên dịch khi ta cài đặt Jekyll:

sudo apt-get install ruby ruby-dev make build-essential

Khi điều đó hoàn tất, ta sẽ chuyển sang thêm hai dòng vào file .bashrc của ta để hướng dẫn trình quản lý gói gem của Ruby đặt các viên đá quý vào folder chính của user của ta . Điều này tránh các biến chứng có thể phát sinh từ cài đặt trên toàn hệ thống, đồng thời thêm lệnh jekyll local vào PATH của user .

Mở .bashrc bằng lệnh như sau:

nano .bashrc

Ở cuối file , thêm các dòng sau:

.bashrc

# Ruby exports  export GEM_HOME=$HOME/gems export PATH=$HOME/gems/bin:$PATH

Lưu và đóng file . Để kích hoạt xuất, hãy chạy như sau:

source ~/.bashrc

Khi hoàn tất, ta sẽ sử dụng gem để cài đặt chính Jekyll cũng như Bundler, quản lý các phụ thuộc Gem:

gem install jekyll bundler

Tiếp theo, ta sẽ đảm bảo cài đặt firewall của ta cho phép lưu lượng truy cập đến và đi từ web server phát triển của Jekyll.

Bước 2 - Mở firewall

Ta sẽ bắt đầu bằng cách kiểm tra trạng thái firewall để xem nó có được bật hay không. Nếu vậy, ta sẽ đảm bảo lưu lượng truy cập vào trang web của ta được phép để ta có thể xem trang web phát triển của bạn trong trình duyệt web.

sudo ufw status

Trong trường hợp này, chỉ SSH được phép thông qua:

Output
Status: active To Action  From -- ------  ---- OpenSSH ALLOW   Anywhere OpenSSH (v6)   ALLOW   Anywhere (v6)

Bạn có thể có các luật khác hoặc không có luật firewall nào cả. Vì chỉ lưu lượng SSH được phép trong trường hợp này, ta cần mở cổng 4000, cổng mặc định cho server phát triển Jekyll:

sudo ufw allow 4000

Hãy kiểm tra kỹ trạng thái:

sudo ufw status

Bây giờ các luật firewall của ta trông giống như:

Output
To                         Action      From --                         ------      ---- OpenSSH                    ALLOW       Anywhere 4000                       ALLOW       Anywhere OpenSSH (v6)               ALLOW       Anywhere (v6) 4000 (v6)                  ALLOW       Anywhere (v6)

Với phần mềm được cài đặt và cổng cần thiết đang mở, ta đã sẵn sàng tạo trang web phát triển.

Bước 3 - Tạo một trang web phát triển mới

Từ folder chính của ta , ta sẽ sử dụng lệnh new của Jekyll để tạo giàn giáo cho một trang web trong folder con có tên www :

cd ~ 
jekyll new www

Lệnh jekyll new bắt đầu bundle install để cài đặt các phụ thuộc và tự động cài đặt một chủ đề có tên là Minima . Sau khi cài đặt thành công, bạn sẽ thấy kết quả như sau:

Output
New jekyll site installed in /home/sammy/www.

Lệnh new của Jekyll tạo các folder và file sau:

... ├── 404.html ├── about.md ├── _config.yml ├── Gemfile ├── Gemfile.lock ├── index.md ├── _posts │   └── 2018-03-19-welcome-to-jekyll.markdown └── _site

Đây không phải là các file trang web thực tế. Chúng là các file nguồn mà Jekyll sẽ sử dụng để tạo trang web tĩnh. Jekyll dựa vào các tên, mẫu đặt tên và cấu trúc folder cụ thể để phân tích cú pháp các nguồn nội dung khác nhau và tập hợp chúng thành một trang web tĩnh. Điều quan trọng là sử dụng cấu trúc hiện có và tuân theo các quy ước đặt tên của Jekyll khi thêm các bài đăng và trang mới.

Mẹo: tree là một lệnh hữu ích để xem cấu trúc file và folder từ dòng lệnh. Bạn có thể cài đặt nó bằng lệnh sau:

sudo apt-get install tree

Để sử dụng nó, hãy cd vào folder bạn muốn và nhập tree hoặc cung cấp đường dẫn đến điểm bắt đầu bằng tree /home/ sammy /www

Bước 4 - Khởi động Server Web của Jekyll

Web server nhẹ tích hợp sẵn của Jekyll được điều chỉnh để hỗ trợ phát triển trang web bằng cách theo dõi các file trong folder và tự động tạo lại trang web tĩnh bất kỳ khi nào có thay đổi được lưu. Vì ta đang làm việc trên một server từ xa, ta sẽ chỉ định địa chỉ server để duyệt trang web từ máy local của ta . Nếu bạn đang làm việc trên một máy local , bạn có thể chạy jekyll serve mà không cần cài đặt server và kết nối với http://localhost:4000 .

cd ~/www 
jekyll serve --host=203.0.113.0

Output of jekyll server
Configuration file: /home/sammy/www/_config.yml             Source: /home/sammy/www        Destination: /home/sammy/www/_site  Incremental build: disabled. Enable with --incremental       Generating...                     done in 0.645 seconds.  Auto-regeneration: enabled for '/home/sammy/www'     Server address: http://203.0.113.0:4000/   Server running... press ctrl-c to stop.

Khi ta gọi jekyll serve , Jekyll đã phân tích cú pháp các file cấu hình và nội dung vào một folder mới, _site và bắt đầu cung cấp nội dung trong folder _site đó:

... ├── 404.html ├── about.md ├── _config.yml ├── Gemfile ├── Gemfile.lock ├── index.md ├── _posts │   └── 2018-03-19-welcome-to-jekyll.markdown └── _site     ├── 404.html     ├── about     │   └── index.html     ├── assets     │   ├── main.css     │   └── minima-social-icons.svg     ├── feed.xml     ├── index.html     └── jekyll         └── update             └── 2018                 └── 03                     └── 19                         └── welcome-to-jekyll.html

Nó cũng bắt đầu xem folder hiện tại, www , để biết các thay đổi. Ngay sau khi thay đổi đối với bài đăng hoặc trang được lưu, trang web tĩnh sẽ tự động được xây dựng lại, vì vậy, điều quan trọng là không thực hiện thay đổi trực tiếp đối với file trong folder _site .

Nếu ta để terminal này mở với server phát triển chạy ở nền trước khi làm việc trên trang web của bạn , ta sẽ nhận được phản hồi ngay lập tức khi ta thêm trang và bài đăng cũng như thay đổi nội dung.

Lưu ý: Nếu bạn đang làm việc với một trang web lớn, việc bật bản dựng --incremental có thể tăng tốc quá trình xây dựng lại mỗi khi bạn thực hiện thay đổi bằng cách chỉ tạo lại các file được thay đổi, nhưng ta không cần nó cho trang web nhỏ này. Bạn có thể tìm hiểu thêm về tính năng thử nghiệm này trên trang web Jekyll .

Trang web hiện đã có sẵn. Trong trình duyệt web, ta có thể truy cập nó tại địa chỉ server và cổng được hiển thị trong kết quả từ jekyll serve :

Ảnh chụp màn hình trang chủ Jekyll

Kết luận

Trong hướng dẫn này, ta đã cài đặt Jekyll và tạo một trang web phát triển với một số nội dung được tạo tự động. Trong hướng dẫn tiếp theo , ta sẽ khám phá nội dung này để minh họa cách Jekyll chuyển đổi các file nguồn thành một trang tĩnh và thông báo các quyết định về cài đặt cấu hình của ta .

Tags:

Các tin liên quan