Cách cài đặt Gatsby trên Ubuntu 20.04

Trong bài viết này, chúng tôi sẽ giải thích cách cài đặt Gatsby trên Ubuntu 20.04.

Gatsby là một khung mã nguồn mở dựa trên React để tạo các trang web và ứng dụng. Thật tuyệt vời cho dù bạn đang xây dựng một trang web danh mục đầu tư hoặc blog, hoặc một cửa hàng thương mại điện tử có lưu lượng truy cập cao hoặc trang chủ của công ty. Tạo các trang web và ứng dụng nhanh chóng mặt VÀ khai thác sức mạnh của hơn 2000 plugin. Xây dựng các trang web với các dịch vụ bạn muốn, như Shopify, Stripe và WordPress, nhanh chóng và dễ dàng với hơn 2000 plugin của Gatsby. Tích hợp dữ liệu từ mọi nơi: API, cơ sở dữ liệu, CMS, tệp tĩnh - hoặc nhiều nguồn cùng một lúc

Bài viết này sẽ hướng dẫn bạn quá trình cài đặt và triển khai trang web Gatsby khởi động mặc định.

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

• Một máy chủ chuyên dụng được cài đặt Ubuntu 20.04 hoặc KVM VPS.
• Người dùng root hoặc người dùng bình thường có đặc quyền quản trị viên sudo.

Cài đặt Gatsby trên Ubuntu 20.04

Bước 1 - Giữ cho máy chủ được cập nhật

# apt update -y && apt upgrade -y

Bước 2 - Cài đặt NodeJS và NPM

Cài đặt phiên bản ổn định mới nhất của NodeJS.

# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

# apt-get install -y nodejs

Xác minh cài đặt thành công.

# node -v && npm -v

Đầu ra:

v15.9.0
7.5.4

Bước 3 - Cài đặt gatsby-cli

Gatsby CLI ( gatsby-cli ) được đóng gói dưới dạng tệp thực thi có thể được sử dụng trên toàn cầu. Gatsby CLI có sẵn thông qua npm . Chạy lệnh sau để cài đặt gatsby-cli :

# npm install -g gatsby-cli

Xác minh cài đặt:

# gatsby --version

Đầu ra:

# Gatsby CLI version: 2.19.1

Bước 4 - Triển khai trang web mới

Để tạo trang Gatsby mới, hãy chạy lệnh sau:

# gatsby new

Đầu ra:

create-gatsby version 0.5.1

Welcome to Gatsby!

This command will generate a new Gatsby site for you in /root with the setup you select. Let’s answer some
questions:

What would you like to call your site?
· My Gatsby Site

CLI sẽ chạy một trình bao tương tác yêu cầu các tùy chọn này trước khi tạo trang Gatsby cho bạn. Chọn và điền theo yêu cầu trang web của bạn. Nó sẽ tạo một trang web và thư mục Gatsby trong / root .

Xem tất cả các lệnh tại https://www.gatsbyjs.com/docs/gatsby-cli/

Tạo một trang web từ người mới bắt đầu

Để tạo một trang Gatsby có tên là my-awesome-site bằng cách sử dụng trình khởi động mặc định, hãy chạy lệnh sau:

# gatsby new my-awesome-site

Lệnh trên sẽ tạo một thư mục my-awesome-site trong / root .

Xem tài liệu dành cho người mới bắt đầu Gatsby để biết thêm chi tiết.

Tiến triển

Khi bạn đã cài đặt trang Gatsby, hãy chuyển đến thư mục gốc của dự án và khởi động máy chủ phát triển bằng lệnh sau:

# cd my-awesome-site

# gatsby develop -H 0.0.0.0

Tùy chọn:

• -H, --host Đặt máy chủ. Mặc định cho localhost
• -p, --port Đặt cổng. Mặc định là env.PORT hoặc 8000
• -o, - mở Mở trang web trong trình duyệt (mặc định) cho bạn
• -S, --https Sử dụng HTTPS

Bây giờ bạn có thể xem trang web tuyệt vời của tôi trong trình duyệt.

Local: http://localhost:8000/
On Your Network: http://192.168.0.102:8000/

Xây dựng

Tại thư mục gốc của trang Gatsby, hãy biên dịch ứng dụng của bạn và chuẩn bị sẵn sàng để triển khai:

# gatsby build

Tùy chọn

• --prefix-path Xây dựng trang web với tiền tố đường dẫn liên kết (đặt pathPrefix trong cấu hình của bạn)
• --no-uglify Xây dựng trang web mà không làm rõ các gói JS (để gỡ lỗi)
• --profile Xây dựng trang web với cấu hình phản ứng. Xem hiệu suất trang web lập hồ sơ với React Profiler
• --open-tracing-config-file Tệp cấu hình truy tìm (tương thích với OpenTracing). Xem theo dõi hiệu suất
• --graphql-tracing Trace (xem ở trên) mọi trình giải quyết graphql, có thể có ý nghĩa về hiệu suất.
• - không màu, - không màu Tắt đầu ra đầu cuối có màu

Đó là nó. Quá trình cài đặt đã hoàn tất thành công.