hermannsblum/website

Gatsby hello-world 启动模板

概述

Gatsby的hello-world启动模板是一个基础架构，用于快速开始Gatsby项目开发。该模板包含主要的Gatsby配置文件，帮助开发者利用React快速构建高性能Web应用，实现"快速启动、快速运行"的开发体验。

有更具体的项目需求？可查看官方和社区创建的启动模板集合。

🚀 快速开始

1. 创建Gatsby站点

使用Gatsby CLI创建新站点，指定hello-world启动模板：

shell
# 使用hello-world启动模板创建新的Gatsby站点
gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world

2. 开始开发

进入新站点目录并启动开发服务器：

shell
cd my-hello-world-starter/
gatsby develop

3. 打开源代码并开始编辑！

站点现在运行在 http://localhost:8000！

注意：您还会看到第二个链接：http://localhost:8000/___graphql。这是用于试验数据查询的工具，可在Gatsby教程中了解其使用方法。

在代码编辑器中打开 my-hello-world-starter 目录，编辑 src/pages/index.js。保存更改后，浏览器将实时更新！

🧐 目录结构说明

Gatsby项目顶级文件和目录概览：

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

1. /node_modules：包含项目依赖的所有代码模块（npm包），会自动安装。

2. /src：存放与网站前端相关的所有代码（浏览器中可见的内容），如站点头部或页面模板。src是"源代码"的约定目录。

3. .gitignore：指定git不应跟踪的文件（不维护版本历史的文件）。

4. .prettierrc：Prettier的配置文件，用于保持代码格式一致性。

5. gatsby-browser.js：Gatsby在此文件中查找Gatsby浏览器API的使用（如有），用于自定义/扩展影响浏览器的默认Gatsby设置。

6. gatsby-config.js：Gatsby站点的主要配置文件，可指定网站元数据（标题、描述等）、要使用的Gatsby插件等（详见配置文档）。

7. gatsby-node.js：Gatsby在此文件中查找Gatsby Node API的使用（如有），用于自定义/扩展影响站点构建过程的默认Gatsby设置。

8. gatsby-ssr.js：Gatsby在此文件中查找Gatsby服务器端渲染API的使用（如有），用于自定义影响服务器端渲染的默认Gatsby设置。

9. LICENSE：此Gatsby启动模板采用0BSD许可证，您可将其替换为自己的许可证。

10. package-lock.json（见下方package.json）：基于npm依赖的确切版本自动生成的文件，（无需直接修改）。

11. package.json：Node.js项目的清单文件，包含元数据（项目名称、作者等），npm通过此文件确定需安装的包。

12. README.md：包含项目参考信息的文本文件。

🎓 学习Gatsby

需要更多指导？Gatsby完整文档位于官方网站。推荐起点：

• 对于大多数开发者，建议从创建Gatsby站点的深入教程开始，假设您没有相关基础，逐步引导完成整个过程。

• 如需直接查看代码示例，请访问文档，尤其注意侧边栏中的"指南"、"API参考"和"高级教程"部分。

💫 部署