GALAXY TECH
Chuyên gia Công nghệ
Thứ sáu, 05/06/2020 | 00:00 GMT+7

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

Nếu bạn đang muốn xây dựng một trang web hoặc blog tĩnh một cách nhanh chóng, Jekyll có thể là một giải pháp tuyệt vời. Trình tạo trang web tĩnh open-souce được viết bằng Ruby, Jekyll cho phép thực hiện nhanh các lệnh giúp quản lý trang web từ ban đầu đến triển khai production , tất cả đều từ dòng lệnh của bạn. Jekyll có nhận thức về blog, ưu tiên các danh mục, bài đăng và bố cục với một loạt các trình nhập có sẵn để nhập nội dung blog trước đó. Nếu bạn cần làm việc offline thường xuyên, thích sử dụng editor nhẹ cho biểu mẫu web để bảo trì nội dung hoặc muốn sử dụng kiểm soát version để theo dõi các thay đổi đối với trang web của bạn , Jekyll có thể cung cấp cho bạn những gì bạn cần để hoàn thành mục tiêu của bạn .

Trong hướng dẫn này, ta sẽ cài đặt một trang web phát triển Jekyll trên Ubuntu 20.04 với nội dung được tạo tự động. Với việc cài đặt Jekyll, bạn có thể tạo một trang cá nhân hoặc blog chủ yếu bằng cách sử dụng các file đánh dấu và một vài lệnh Jekyll.

Yêu cầu

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

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 update

Tiếp theo, hãy cài đặt make và build-essential để các thư viện của Jekyll sẽ biên dịch và cho Ruby và các thư viện phát triển của nó sử dụng. Ta đưa cờ y vào đây để xác nhận có, ta muốn cài đặt các gói và tránh dấu nhắc xác nhận.

  • sudo apt -y install make build-essential ruby ruby-dev

Khi hoàn tất, hãy thêm hai dòng vào file .bashrc của ta để yêu cầu trình quản lý gói gem của Ruby đặt đá quý vào folder chính của user của ta . Điều này tránh các sự cố xảy ra 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 editor bạn chọn, chẳng hạn như nano:

  • 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. Lưu ý điều này có thể mất một thời gian.

  • 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

Hãy kiểm tra xem firewall đã được bật chưa. 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

Nếu bạn gặp phải trạng thái inactive , hãy chạy các lệnh sau.

ufw allow OpenSSH sudo ufw enable

Điều này sẽ cho phép firewall của bạn chạy khi khởi động hệ thống. Bạn có thể nhận được các dấu nhắc sau (xác nhận bằng 'y' để tiếp tục):

Command may disrupt existing ssh connections. Proceed with operation (y|n)? y Firewall is active and enabled on system startup

Trong trường hợp của ta , 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 tùy thuộc vào cách bạn đã cài đặt firewall của bạn . 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

Bây giờ các luật firewall của ta nên bao gồm những điều sau:

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

Bây giờ với phần mềm được cài đặt và cổng cần thiết đã 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 đang 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 , sau đó 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ẽ nhận được 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.markdown ├── _config.yml ├── Gemfile ├── Gemfile.lock ├── index.markdown ├── _posts │   └── 2020-05-29-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 để kiểm tra 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 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.markdown ├── _config.yml ├── Gemfile ├── Gemfile.lock ├── index.markdown ├── _posts │   └── 2020-05-29-welcome-to-jekyll.markdown └── _site     ├── 404.html     ├── about     │   └── index.html     ├── assets     │   ├── main.css     │   │   ├── main.css.map     │   └── minima-social-icons.svg     ├── feed.xml     ├── index.html     └── jekyll         └── update             └── 2020                 └── 05                     └── 29                         └── 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. Bạn có thể tìm hiểu thêm về Jekyll bằng cách đọc các hướng dẫn khác của ta về chủ đề này:

Tags:

Các tin liên quan

Cách thiết lập trang web phát triển Jekyll trên Ubuntu 18.04
2020-06-05
Cách cài đặt Git từ nguồn trên Ubuntu 20.04 [Quickstart]
2020-06-05
Cách cài đặt Git trên Ubuntu 20.04
2020-05-29
Cách cài đặt Jitsi Meet trên Ubuntu 18.04
2020-05-28
Cách lấy chứng chỉ Let's Encrypt sử dụng xác thực DNS với acme-dns-certbot trên Ubuntu 18.04
2020-05-28
Cách cài đặt và bảo mật Grafana trên Ubuntu 20.04
2020-05-28
Cách cài đặt và cấu hình Postfix trên Ubuntu 20.04
2020-05-21
Cách cài đặt Composer trên Ubuntu 20.04 [Quickstart]
2020-05-19
Cách cài đặt R trên Ubuntu 20.04 [Khởi động nhanh]
2020-05-19
Cách cài đặt và cấu hình Nextcloud trên Ubuntu 20.04
2020-05-18