基于 Gatsby.js 的静态站点的基本入门套件。
开始开发。
导航到新站点的目录并启动它。
cd my-site/
gatsby develop
打开源代码并开始编辑!
您的网站现在正在http://localhost:8000
运行!
注意:您还会看到第二个链接: http://localhost:8000/___graphql
。您可以使用此工具来尝试查询数据。在 Gatsby 教程中了解有关使用此工具的更多信息。
在您选择的代码编辑器中打开my-site
目录并编辑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
└── yarn.lock
/node_modules
:此目录包含您的项目所依赖的所有代码模块(npm 包)会自动安装。
/src
:此目录将包含与您将在网站前端看到的内容(您在浏览器中看到的内容)相关的所有代码,例如网站标题或页面模板。 src
是“源代码”的约定。
.gitignore
:此文件告诉 git 不应跟踪/不维护哪些文件的版本历史记录。
.prettierrc
:这是 Prettier 的配置文件。 Prettier 是一个帮助保持代码格式一致的工具。
gatsby-browser.js
:Gatsby 希望在该文件中找到 Gatsby 浏览器 API 的任何用法(如果有)。这些允许自定义/扩展影响浏览器的默认 Gatsby 设置。
gatsby-config.js
:这是 Gatsby 站点的主要配置文件。您可以在此处指定有关站点的信息(元数据),例如站点标题和描述、您想要包含的 Gatsby 插件等(请查看配置文档以了解更多详细信息)。
gatsby-node.js
:Gatsby 希望在该文件中找到 Gatsby Node API 的任何用法(如果有)。这些允许自定义/扩展影响站点构建过程各个部分的默认 Gatsby 设置。
gatsby-ssr.js
:Gatsby 希望在该文件中找到 Gatsby 服务器端渲染 API(如果有)的任何用法。这些允许自定义影响服务器端渲染的默认 Gatsby 设置。
LICENSE
:Gatsby 根据 MIT 许可证获得许可。
package-lock.json
(首先参见下面的package.json
)。这是根据为项目安装的 npm 依赖项的确切版本自动生成的文件。 (您不会直接更改此文件)。
package.json
:Node.js 项目的清单文件,其中包括元数据(项目名称、作者等)等内容。此清单是 npm 如何知道要为您的项目安装哪些包的方式。
README.md
:包含有关项目的有用参考信息的文本文件。
yarn.lock
:Yarn 是 npm 的包管理器替代品。尽管所有 Gatsby 文档都引用了 npm,但您可以使用 YARN 或 NPM。该文件的用途与package-lock.json
基本相同,只是用于不同的包管理系统。
对于部署,您可以使用 Gitlab CI。项目中有两个文件 - 示例.gitlab-ci.yml
和 S3 部署.gitlab-ci-s3.yml
。