Cách cài đặt Gatsby.js Node Framework trên Ubuntu 22.04

[theanh]

GatsbyJS hay Gatsby là một framework mã nguồn mở miễn phí để xây dựng các ứng dụng và trang web hiện đại, siêu nhanh với React. Gatsby được tối ưu hóa cho công nghệ trang web hiện đại như các chỉ số quan trọng của web cốt lõi và điểm lighthouse. Nó dựa trên ReactJS, Webpack, javascript và CSS. Ngoài ra, nó cung cấp tốc độ tải cực nhanh cho tất cả nội dung của bạn và được hỗ trợ bằng các thư viện và plugin mở rộng.

GatsbyJS giúp quy trình phát triển của bạn thậm chí còn nhanh hơn, nó cung cấp một gói khởi động và các mẫu cho các trang web hoặc ứng dụng của bạn. GatsbyJS là một framework để xây dựng CMS không có giao diện với hỗ trợ nhiều CMS phụ trợ như WordPress, Contentful, Drupal, Shopify, Strapi, Ghost và NetlifyCMS. GatsbyJS kết hợp khả năng kiểm soát và khả năng mở rộng của các trang web được kết xuất động với tốc độ tạo trang web tĩnh để tạo trang web hoặc ứng dụng.

Trong hướng dẫn này, bạn sẽ học cách cài đặt và thiết lập Gatsby.js trên máy Ubuntu 22.04.

Điều kiện tiên quyết​

• Máy Ubuntu 22.04 - Bạn có thể sử dụng phiên bản Máy tính để bàn hoặc phiên bản Máy chủ.
• Người dùng root hoặc quản trị viên.

Thiết lập Người dùng Mới​

Đầu tiên, bạn sẽ tạo một người dùng Linux mới trên hệ thống của bạn sẽ được sử dụng để chạy dự án/ứng dụng Gatbs.js. Trong bản demo này, bạn sẽ tạo một người dùng mới có tên là 'alice'.

Chạy lệnh sau để tạo người dùng mới alice.

useradd -m -s /bin/bash alice

Bây giờ hãy thiết lập mật khẩu cho người dùng alice bằng lệnh bên dưới.

passwd alice

Thêm người dùng 'alice' vào nhóm 'sudo' và cho phép người dùng 'alice' thực thi lệnh 'sudo su' và nhận được quyền root/quản trị viên.

sudo usermod -aG sudo alice

Bây giờ hãy đăng nhập với tư cách là người dùng alice bằng lệnh bên dưới, đồng thời chạy lệnh sudo su để kiểm tra và xác minh quản trị viên gốc quyền.

su - alice
sudo su

Nhập mật khẩu cho người dùng alice và nhấn ENTER. Nếu bạn nhận được lời nhắc mới như "root@ubuntu-machine", thì bạn đã có được quyền root thành công.



Nhập lệnh thoát hoặc nhấn Ctrl+d để thoát khỏi quyền root và bạn sẽ nhận được lời nhắc bình thường với tư cách là người dùng alice.

Cài đặt nvm (Node Version Manager) và Node.js​

Gatsby.js là một khuôn khổ JavaScript được viết bằng Node.js và bây giờ bạn sẽ cài đặt Node.js vào hệ thống Ubuntu của mình.

Có nhiều cách để cài đặt Node.js trên hệ thống Ubuntu, bao gồm sử dụng Node.js do kho lưu trữ APT Ubuntu chính thức cung cấp, sử dụng kho lưu trữ của bên thứ ba như nodesource và sử dụng NVM (Node Version Manager).

Trong ví dụ này, bạn sẽ cài đặt Node.js bằng NVM (Node Version Manager). Và bạn sẽ cài đặt nó dưới người dùng alice mà bạn vừa tạo ở giai đoạn đầu tiên.

Làm mới và cập nhật kho lưu trữ Ubuntu của bạn, sau đó cài đặt gói curl vào hệ thống của bạn bằng các lệnh bên dưới.

sudo apt update
sudo apt install curl

Bây giờ hãy tải xuống tập lệnh cài đặt NVM bằng lệnh curl và chạy nó.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Sau khi toàn bộ quá trình hoàn tất, bạn sẽ thấy thông báo đầu ra giống như ảnh chụp màn hình bên dưới. NHƯ bạn thấy, trình cài đặt tải xuống mã nguồn NVM vào thư mục gốc của bạn và thêm một số cấu hình vào tệp ~/.bashrc.



Bây giờ hãy chạy lệnh bên dưới để lấy nguồn tệp ~/.bashrc và tải lại phiên bash shell hiện tại của bạn. Ngoài ra, thao tác này sẽ áp dụng các thay đổi mới cho tệp cấu hình ~/.bashrc và cho phép bạn chạy và thực thi NVM ngay lập tức mà không cần đăng xuất khỏi phiên hiện tại.

source ~/.bashrc

Bây giờ hãy chạy lệnh nvm bên dưới để kiểm tra và xác minh cài đặt nvm (Trình quản lý phiên bản Node).

nvm --version
nvm --help

Nếu bạn nhận được đầu ra của phiên bản NVM và thông báo trợ giúp cho lệnh nvm, thì quá trình cài đặt của bạn đã thành công và bây giờ đã sẵn sàng để cài đặt Node.js.



Chạy lệnh nvm bên dưới để cài đặt Node.js v16 vào hệ thống của bạn. Cài đặt này sẽ chỉ ảnh hưởng đến môi trường của người dùng alice.

nvm install 16

Bây giờ bạn có thể thấy NVM đang tải xuống tệp nhị phân của Node.js v16 và tự động cấu hình cài đặt cho người dùng alice.

Khi tất cả quy trình hoàn tất, hãy chạy lệnh bên dưới để thiết lập phiên bản Node.js mặc định thành v16.

nvm use 16

Cuối cùng, bạn có thể xác minh và kiểm tra phiên bản Node.js và phiên bản NPM bằng lệnh sau.

node --version
npm --version

Như bạn có thể thấy trên ảnh chụp màn hình sau, Node.js v16 hiện đã được cài đặt trên máy Ubuntu dưới tên người dùng alice. Và bạn đã cài đặt Node.js bằng NVM (Trình quản lý phiên bản Node).

Cài đặt Gatsby-CLI​

Gatsby-CLI là trình khởi động lệnh cho các ứng dụng Gatsby. Nó có thể được sử dụng để bắt đầu và tạo một dự án Gatsby mới, chạy máy chủ phát triển cho Gatsby và xây dựng ứng dụng Gatsby của bạn để triển khai.

Gatsby-CLI có thể được cài đặt từ kho lưu trữ npm Node.js.

Chạy lệnh npm bên dưới để cài đặt gatsby-cli vào môi trường cục bộ của bạn.

npm -g install gatsby-cli

Sau khi cài đặt hoàn tất, hãy chạy lệnh gatsby bên dưới để kiểm tra phiên bản và xác minh cài đặt Gatsby-CLI.

gatsby --version

Bên dưới, bạn có thể thấy rằng mình đã cài đặt Gatsby CLI v4.15.



Ngoài ra, bạn cũng chạy lệnh bên dưới để tắt phép đo từ xa và báo cáo về việc sử dụng dữ liệu ẩn danh trên dự án Gatsby của mình.

gatsby telemetry --disable

Tạo Site đầu tiên bằng Gatsbyjs​

Lúc này, bạn đã hoàn tất cài đặt Gatsby-CLI và giờ bạn đã sẵn sàng tạo ứng dụng/dự án đầu tiên bằng Gatsby.

Chạy lệnh gatsby bên dưới để tạo dự án đầu tiên mới của Gatsby.

gatsby new

Bây giờ bạn sẽ được yêu cầu cấu hình một số dự án Gatsby của mình:

• Nhập tiêu đề cho site/dự án Gatsby mới của bạn. ví dụ này là "Test Gatsby site"
• Nhập tên thư mục cho dự án gatsby mới của bạn. Trong ví dụ này, thư mục sẽ nằm tại "test-site".
• Chọn ngôn ngữ lập trình cho dự án Gatsby mới của bạn. Bạn có thể chọn JavaScript hoặc TypeScript. Ví dụ này sẽ là JavaScript.
• Đối với CMS backend, bạn có thể chọn tùy chọn "Không (hoặc tôi sẽ thêm sau)". Gatsby hỗ trợ nhiều loại CMS backend khác nhau như WordPress, Ghost, v.v.
• Đối với hệ thống tạo kiểu giao diện, bạn có thể chọn khung làm hương vị của mình. Trong ví dụ này, bạn sẽ sử dụng "Giao diện người dùng chủ đề".

Và bây giờ quá trình cài đặt các phụ thuộc cho dự án Gatsby mới của bạn sẽ bắt đầu.



Khi tất cả quá trình hoàn tất, bạn có thể thấy đầu ra như ảnh chụp màn hình sau. Ngoài ra, bạn sẽ nhận được một thư mục mới có tên "test-site" chứa tất cả mã nguồn và cấu hình cho dự án Gatsby của bạn.



Bây giờ hãy thay đổi thư mục làm việc thành "test-site" và chạy máy chủ phát triển gatsby bằng các lệnh bên dưới.

cd test-site/
gatsby phát triển -H 192.168.10.15

Tùy chọn -H 192.168.10.15 sẽ chỉ định địa chỉ liên kết cho máy chủ phát triển cục bộ Gatsby của bạn. Và bạn cũng đang sử dụng cổng mặc định 8000 cho dự án Gatsby của mình.

Trong ảnh chụp màn hình bên dưới, bạn có thể thấy toàn bộ quy trình của dự án Gatsby. Và cuối cùng, bạn có thể thấy thông báo rằng bạn có thể truy cập dự án Gatsby của mình tại địa chỉ http://192.168.10.15:8000.



Mở trình duyệt web và truy cập địa chỉ dự án Gatsby của bạn (ví dụ: http://192.168.10.15:8000/).

Và bây giờ bạn có thể thấy trang chủ mặc định của dự án Gatsby của mình.

Kết luận​

Xin chúc mừng! Bây giờ bạn đã cài đặt thành công Gatsby trên máy Ubuntu 22.04 mới nhất. Bạn cũng đã học cách thiết lập và cài đặt Node.js bằng NVM (Trình quản lý phiên bản Node). Cuối cùng, bạn cũng đã học được cách tạo một dự án/trang web mới bằng Gatsby và chạy máy chủ phát triển của dự án Gatsby.