当前位置：文江博客 Node Package Readme @aaronconway7/create-gatsby-app 中文文档教程

@aaronconway7/create-gatsby-app 中文文档教程

发布于 5年前浏览 18 项目主页更新于 3年前

Gatsby App Starter (by Aaron)

Leo

使用此默认样板启动您的项目。这个 starter 附带了主要的 Gatsby 配置文件，你可能需要这些文件来快速启动和运行用于 React 的快速应用程序生成器。

（但根据 Aaron 进行了定制）

它已准备就绪，可以使用，

Styled Components
Tailwindcss
React Context
Dark Mode
Google Analytics
SEO

而且可能比我懒得在这里更新

Quick start

创建 Gatsby 站点。

使用Gatsby CLI 创建一个新站点，指定默认启动器。

# create a new Gatsby site using the default starter
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

开始开发。
导航到新站点的目录并启动它。
```
cd my-default-starter/
gatsby develop
```
打开源代码并开始编辑！
您的站点现在运行在 http://localhost:8000！
_注意：您还会看到第二个链接：_http://localhost:8000/___graphql。这是一个您可以用来试验查询数据的工具。在 Gatsby 教程中了解有关使用此工具的更多信息。
打开 my-default-starter 目录在您选择的代码编辑器中并编辑 src/pages/index.js。保存您的更改，浏览器将实时更新！

What's inside?

快速浏览您将在 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

/node_modules：此目录包含您的项目所依赖的所有代码模块（npm 包）都会自动安装。
/src：该目录将包含与您将在网站前端看到的内容（您在浏览器中看到的内容）相关的所有代码，例如您的站点标题或页面模板。 src 是“源代码”的约定。
.gitignore：此文件告诉 git 哪些文件不应跟踪/不应维护版本历史记录。
.prettierrc：这是 Prettier 的配置文件。 Prettier 是一种有助于保持代码格式一致的工具。
gatsby-browser.js：Gatsby 希望在该文件中找到 Gatsby 浏览器 API（如果有）。这些允许自定义/扩展影响浏览器的默认 Gatsby 设置。
gatsby-config.js：这是 Gatsby 站点的主要配置文件。在这里您可以指定有关您网站的信息（元数据），如网站标题和描述、您想要包含的 Gatsby 插件等。（查看 config docs 获取更多详细信息）。
gatsby-node.js：Gatsby 希望在该文件中找到 Gatsby 节点 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：包含有关项目的有用参考信息的文本文件。

Learning Gatsby

寻找更多指导？ Gatsby 的完整文档位于网站上。以下是一些起点：

对于大多数开发人员，我们建议从我们的使用 Gatsby 创建网站的深入教程开始. 它从对您的能力水平的零假设开始，然后遍历该过程的每一步。
要直接深入研究代码示例，请前往我们的文档。特别是，请查看指南、API 参考 和高级教程 部分。

Deploy

原文

Gatsby App Starter (by Aaron)

Leo

Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.

(But customised according to Aaron)

It comes set up ready to use with

Styled Components
Tailwindcss
React Context
Dark Mode
Google Analytics
SEO

and probably more than I just haven't been bothered to update here

???? Quick start

Create a Gatsby site.

Use the Gatsby CLI to create a new site, specifying the default starter.

# create a new Gatsby site using the default starter
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

Start developing.
Navigate into your new site’s directory and start it up.
```
cd my-default-starter/
gatsby develop
```
Open the source code and start editing!
Your site is now running at http://localhost:8000!
_Note: You'll also see a second link: _http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.
Open the my-default-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

???? What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── 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

/node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
/src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.
.gitignore: This file tells git which files it should not track / not maintain a version history for.
.prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.
gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.
gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).
gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.
LICENSE: Gatsby is licensed under the MIT license.
package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).
package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
README.md: A text file containing useful reference information about your project.

???? Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.