GatsbyJS 入门教程：创建并部署你的第一个 Gatsby 网站

GatsbyJS 入门教程：创建并部署你的第一个 Gatsby 网站

前言

GatsbyJS 是一个基于 React 的现代化静态网站生成器，它结合了现代前端技术栈的优势，能够帮助开发者快速构建高性能的网站。本教程将带你从零开始，创建一个完整的 Gatsby 网站并部署到线上。

准备工作

在开始之前，请确保你已经完成了以下准备工作：

1. 安装了 Node.js（建议使用 LTS 版本）
2. 安装了 Git（用于版本控制）
3. 准备了一个代码编辑器（如 VS Code）

创建 Gatsby 项目

Gatsby 提供了命令行工具（CLI）来简化项目创建过程。让我们一步步创建一个新项目：

1. 安装 Gatsby CLI

如果你还没有安装 Gatsby CLI，可以通过以下命令全局安装：

npm install -g gatsby-cli

安装完成后，可以通过以下命令验证安装是否成功：

gatsby --version

2. 初始化新项目

使用 Gatsby CLI 的交互式命令创建新项目：

gatsby new

这个命令会启动一个交互式向导，询问你一些项目配置选项：

1. 站点名称：输入你的网站名称，如"我的第一个 Gatsby 网站"
2. 文件夹名称：通常使用默认值即可
3. 使用 JavaScript 还是 TypeScript：本教程选择 JavaScript
4. 是否使用 CMS：选择"No (or I'll add it later)"
5. 是否安装样式系统：选择"No (or I'll add it later)"
6. 是否安装其他插件：选择"Done"

完成这些选择后，Gatsby CLI 会自动为你生成项目结构。

3. 项目结构解析

创建完成后，你的项目目录结构大致如下：

my-first-gatsby-site/
├── node_modules/
├── src/
├── .gitignore
├── gatsby-config.js
├── package.json
└── README.md

• src/：存放网站源代码的主要目录
• gatsby-config.js：Gatsby 的核心配置文件
• package.json：项目依赖和脚本配置

本地开发环境

1. 启动开发服务器

进入项目目录并启动开发服务器：

cd my-first-gatsby-site
gatsby develop

这个命令会启动一个本地开发服务器，并自动打开热重载功能。

2. 访问本地站点

开发服务器启动后，你可以在浏览器中访问：

http://localhost:8000/

同时，Gatsby 还提供了一个 GraphQL 查询工具 GraphiQL：

http://localhost:8000/___graphql

3. 开发服务器功能

本地开发服务器提供了以下便利功能：

• 实时重载：修改代码后自动刷新页面
• 错误提示：直接在浏览器中显示错误信息
• 性能分析：帮助优化网站性能

项目部署

1. 版本控制

建议使用 Git 进行版本控制：

git init
git add .
git commit -m "Initial commit"

2. 部署到线上

Gatsby 网站可以部署到多种平台，如 Netlify、Vercel、AWS Amplify 等。以 Netlify 为例：

1. 将代码推送到 GitHub 仓库
2. 登录 Netlify 并选择"New site from Git"
3. 选择你的 GitHub 仓库
4. 使用默认构建设置（构建命令：gatsby build，发布目录：public/）
5. 点击"Deploy site"

部署完成后，Netlify 会为你的网站生成一个唯一的 URL。

核心概念

1. 静态站点生成

Gatsby 是一个静态站点生成器，这意味着：

• 构建时生成所有 HTML 文件
• 无需服务器端处理
• 可以直接部署到 CDN
• 具有极快的加载速度

2. React 基础

Gatsby 基于 React，因此：

• 使用 JSX 语法编写组件
• 支持 React Hooks
• 可以利用丰富的 React 生态系统

3. 数据层

Gatsby 提供了统一的数据层：

• 可以从多种来源获取数据（Markdown、CMS、API 等）
• 使用 GraphQL 查询数据
• 数据在构建时处理并优化

常见问题

1. 构建失败怎么办？

• 检查错误信息中的具体提示
• 确保所有依赖已正确安装
• 尝试清理缓存：gatsby clean

2. 如何添加页面？

在 src/pages/ 目录下创建新的 React 组件，Gatsby 会自动将其转换为页面。

3. 如何自定义样式？

Gatsby 支持多种样式方案：

• 全局 CSS 文件
• CSS Modules
• CSS-in-JS（如 styled-components）
• Sass/Less

下一步学习

现在你已经成功创建并部署了第一个 Gatsby 网站，接下来可以：

1. 学习如何自定义网站布局和样式
2. 了解如何添加博客文章功能
3. 探索 Gatsby 插件系统
4. 学习如何优化网站性能

Gatsby 的强大之处在于其丰富的生态系统和灵活性，随着学习的深入，你将能够构建更加复杂和功能丰富的网站。