如何在 Ubuntu 22.04 上安装 Gatsby.js 节点框架

在此页

1. 先决条件
2. 设置新用户
3. 安装 nvm（节点版本管理器）和 Node.js
4. 安装 Gatsby-CLI
5. 使用 Gatsbyjs 创建第一个网站
6. 结论

GatsbyJS 或 Gatsby 是一个免费的开源框架，用于使用 React 构建快速、现代的应用程序和网站。 Gatsby 针对现代网站技术进行了优化，例如核心网络生命力和灯塔评分。它基于 ReactJS、Webpack、javascript 和 CSS。此外，它还为您的所有内容提供光速加载，并得到广泛的库和插件的支持。

GatsbyJS 使您的开发过程更快，它为您的网站或应用程序提供了入门包和模板。 GatsbyJS 是一个用于构建无头 CMS 的框架，支持多个 CMS 后端，例如 WordPress、Contentful、Drupal、Shopify、Strapi、Ghost 和 NetlifyCMS。 GatsbyJS 将动态呈现站点的控制和可扩展性与静态站点生成的速度相结合，用于创建网站或应用程序。

在本教程中，您将学习如何在 Ubuntu 22.04 机器上安装和设置 Gatsby.js。

先决条件

• 一台 Ubuntu 22.04 机器 - 您可以使用桌面版或服务器版。
• 根用户或管理员用户。

设置新用户

首先，您将在您的系统上创建一个新的 Linux 用户，用于运行 Gatbs.js 项目/应用程序。在此演示中，您将创建一个名为 alice 的新用户。

运行以下命令创建新用户 alice。

useradd -m -s /bin/bash alice

现在使用以下命令为用户 alice 设置密码。

passwd alice

将用户alice加入sudo组，并允许用户alice执行sudo su命令并获取root /管理员权限。

sudo usermod -aG sudo alice

现在使用以下命令以用户 alice 身份登录，同时运行 sudo su 命令来检查和验证 root 管理员权限。

su - alice
sudo su

输入用户 alice 的密码，然后按 ENTER。如果你得到类似“[email ”的新提示，那么你就成功获得了root权限。

输入退出命令或按Ctrl+d退出root权限，你将以用户alice的身份正常提示。

安装 nvm（节点版本管理器）和 Node.js

Gatsby.js 是一个用 Node.js 编写的 JavaScript 框架，现在您将把 Node.js 安装到您的 Ubuntu 系统中。

在 Ubuntu 系统上安装 Node.js 有多种方式，包括使用官方 APT Ubuntu 存储库提供的 Node.js，使用第三方存储库，如 nodesource，以及使用 NVM（节点版本管理器）。

在此示例中，您将使用 NVM（节点版本管理器）安装 Node.js。您将安装在您刚刚在第一阶段创建的用户 alice 下。

刷新并更新您的 Ubuntu 存储库，然后使用以下命令将 curl 包安装到您的系统。

sudo apt update
sudo apt install curl

现在使用 curl 命令下载 NVM 安装程序脚本并运行它。

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

所有过程完成后，您将看到如下图所示的输出消息。如您所见，安装程序将 NVM 源代码下载到您的主目录，并向 ~/.bashrc 文件添加一些配置。

现在运行以下命令获取 ~/.bashrc 文件并重新加载当前的 bash shell 会话。此外，这将对 ~/.bashrc 配置文件应用新更改，并允许您立即运行和执行 NVM，而无需从当前会话中注销。

source ~/.bashrc

现在运行下面的 nvm 命令来检查和验证 nvm（节点版本管理器）安装。

nvm --version
nvm --help

如果您获得 NVM 版本的输出和 nvm 命令的帮助消息，那么您的安装是成功的，现在可以安装 Node.js。

运行下面的 nvm 命令将 Node.js v16 安装到您的系统。此安装只会影响用户 alice 的环境。

nvm install 16

现在您可以看到 NVM 正在下载 Node.js v16 的二进制文件并自动为用户 alice 配置安装。

完成所有过程后，运行以下命令将默认 Node.js 版本设置为 v16。

nvm use 16

最后，您可以使用以下命令验证和检查 Node.js 版本和 NPM 版本。

node --version
npm --version

如您在以下屏幕截图中所见，Node.js v16 现在已安装在用户 alice 下的 Ubuntu 计算机上。并且您已经使用 NVM（节点版本管理器）安装了 Node.js。

安装 Gatsby-CLI

Gatsby-CLI 是 Gatsby 应用程序的命令启动器。它可用于启动和创建一个新的 Gatsby 项目，运行 Gatsby 的开发服务器，以及构建您的 Gatsby 应用程序以进行部署。

Gatsby-CLI 可以从 npm Node.js 存储库安装。

运行下面的 npm 命令将 gatsby-cli 安装到您的本地环境。

npm -g install gatsby-cli

安装完成后，运行下面的 gatsby 命令检查版本并验证 Gatsby-CLI 安装。

gatsby --version

您可以在下面看到您已经安装了 Gatsby CLI v4.15。

此外，您还可以运行以下命令来禁用 Gatsby 项目中匿名数据使用情况的遥测和报告。

gatsby telemetry --disable

使用 Gatsbyjs 创建第一个站点

至此，您已经完成了 Gatsby-CLI 的安装，现在您可以准备使用 Gatsby 创建第一个应用程序/项目了。

运行下面的 gatsby 命令来创建一个新的第一个 Gatsby 项目。

gatsby new

现在你将被要求对你的 Gatsby 项目进行一些配置：

• 输入您的新 Gatsby 站点/项目的标题。这个例子是“测试盖茨比网站”
• 输入新 gatsby 项目的目录名称。在此示例中，目录将位于 \test-site\。
• 为您的新 Gatsby 项目选择编程语言。您可以选择 JavaScript 或 TypeScript。这个例子将是 JavaScript。
• 对于 CMS 后端，您可以选择选项“否（或稍后添加）”。 gatsby 支持不同类型的 CMS 后端，例如 WordPress、Ghost 等。
• 对于界面样式系统，您可以选择框架作为您的风格。在此示例中，您将使用“Theme UI”。

现在将开始为您的新 Gatsby 项目安装依赖项。

完成所有过程后，您可以看到如下屏幕截图所示的输出。此外，您将获得一个名为 \test-site\ 的新目录，其中包含您的 Gatsby 项目的所有源代码和配置。

现在将工作目录更改为 \test-site\ 并使用以下命令运行 gatsby 开发服务器。

cd test-site/
gatsby develop -H 192.168.10.15

选项 -H 192.168.10.15 将为您的 Gatsby 本地开发服务器指定绑定地址。而且您正在为您的 Gatsby 项目使用默认端口 8000。

在下面的屏幕截图中，您可以看到 Gatsby 项目的完整过程。最后，您可以看到可以在地址 http://192.168.10.15:8000 访问您的 Gatsby 项目的消息。

打开您的 Web 浏览器并访问您的 Gatsby 项目的地址（例如 http://192.168.10.15:8000/）。

现在您可以看到 Gatsby 项目的默认主页。

结论

恭喜！您现在已经在最新的 Ubuntu 22.04 机器上成功安装了 Gatsby。您还学习了如何使用 NVM（节点版本管理器）设置和安装 Node.js。最后，您还学习了如何使用 Gatsby 创建新项目/站点并运行 Gatsby 项目的开发服务器。