gatsby template

完整的盖茨比模板！

使用此模板开始您的项目。该启动器附带了最基本的 Gatsby 文件和设置，您可能需要使用快速的 React 应用程序生成器来以最快的速度启动和运行。

快速启动

1. 创建一个盖茨比网站。

   使用 Gatsby CLI 创建一个新站点，并指定此Template 。

    # Crie um novo site do Gatsby usando esse Template
   gatsby new my-project https://github.com/solrachix/gatsby-template

2. 开始开发。

   导航到新站点的目录并启动它。

    cd my-project/
   gatsby develop

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

   您的网站现在正在http://localhost:8000运行！

   注意：您还将看到第二个链接： http://localhost:8000/___graphql 。您可以使用此工具来尝试查询数据。在 [Gatsby 教程](https://www.gatsbyjs.org/tutorial/part- Five/#introducing-graphiql) 中了解有关如何使用此工具的更多信息。

   在您选择的代码编辑器中打开my-project目录并编辑src/pages/index.js 。保存您的更改，浏览器将实时更新！

渐进式网页应用

渐进式 Web 应用程序是一个术语，用于表示一种新的软件开发方法。与传统应用程序不同，渐进式 Web 应用程序可以被视为常规网页和移动应用程序之间的混合演变。

由清单插件支持的网络应用程序清单（PWA 规范的一部分）允许用户将您的网站添加到大多数移动浏览器的主屏幕 - 请参阅此处。该清单提供了电话的配置和图标。

除了清单配置之外，该插件还提供了一些功能来让您的生活更轻松，它们是：

• 自动图标生成 - 从单一来源生成多种图标尺寸
• 网站图标支持
• 旧图标支持 (iOS) 1
• 缓存阻塞
• 位置 - 为基于路径的位置提供独特的清单（Gatsby 示例）

这些功能中的每一个都具有广泛的可用配置，因此您始终处于控制之中。

实施的插件：

在哪里可以搜索这些插件？点击这里并搜索

• react-helmet ：React Helmet 是一个允许你使用 React 组件控制文档头的组件；
• sitemap ：在构建时自动生成站点地图；
• Transformer-remark ：负责将用 Markdown 编写的博客文章转换为 HTML；
• 清单：创建一个无麻烦的清单；
• feed ：为您的网站创建 RSS 提要。
• nprogress ：页面顶部的进度条，YouTube 风格；
• google-analytics ：支持您网站上的分析；
• styled-components ：CSS IN JS 样式模型；
• page-creator ：自动从指定目录下的 React 组件创建页面；
• source-filesystem ：从本地文件系统将数据获取到 Gatsby 应用程序的服务器；
• 离线：支持网站离线工作；

？里面是什么？

快速浏览一下您将在此 Gatsby 模板中看到的顶级文件和目录。

 .
├── node_modules
├── config/
│ 	└── MetaData.js
├── src/
│ 	├── assets/
│ 	│ 	└── images/
│ 	│ 		└── logo.png
│ 	├── components/
│ 	├── Pages/
|	│ 	└── index.js
│ 	├── posts/
|	│ 	└── 2020-04-08--nosso-primeiro-post/
|	│ 		└── index.md
│ 	├── styles/
│ 	|	├── themes/
│ 	|	└── GlobalStyles.js
│ 	├── templates/
│ 	|	├── post.js
│ 	|	└── tag.js
│ 	└── html.js
├── static/
│ 	├── favicon.ico
│ 	└── robots.txt
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

文件/文件夹	描述
/节点模块	该目录包含您的项目所依赖的所有自动安装的代码模块（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 设置。
执照	Gatsby 根据 MIT 许可证获得许可
包锁.json	（首先参见下面的package.json ）。这是一个根据已为项目安装的 npm 依赖项的确切版本自动生成的文件。 （您不能直接更改此文件）。
包.json	Node.js 项目的清单文件，其中包括元数据（项目名称、作者等）等内容。此清单是 npm 如何知道要为您的项目安装哪些包的方式。
自述文件.md	包含有关您的项目的有用参考信息的文本文件。
****

？学习盖茨比

寻找更多指导？完整的 Gatsby 文档位于 [网站上] (https://www.gatsbyjs.org/)。以下是一些可以开始的地方：

• 对于大多数开发人员，我建议从我们的 [使用 Gatsby 创建网站的深入教程] (https://www.gatsbyjs.org/tutorial/) 开始。它从对您的能力水平的零假设开始，并贯穿该过程的每一步。

• 要直接深入了解代码示例，请访问[文档] (https://www.gatsbyjs.org/docs/)。特别是，请参阅侧栏中的指南、 API 参考和高级教程部分。

？部署