Gatsbyv2的第一步

我们之前探索了 Gatsby 背后的理念以及它的一些主要功能，所以现在是我们开始使用它构建网站的时候了。我们将在这里探讨如何开始使用 Gatsby v2。

盖茨比 CLI

开始的第一步是全局安装 Gatsby CLI：

$ yarn global add gatsby-cli

# or, using npm:
$ npm install gatsby-cli -g

现在我们可以使用 gatsby new 实用程序来启动一个新项目：

$ gatsby new my-site

这将创建一个具有以下起始文件结构的 my-site 目录：

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

现在您可以 cd 进入您的新站点目录并通过运行 gatsby develop 开始处理它：

$ cd my-site
$ gatsby develop

现在您可以通过 http://localhost:8000/ 访问您的网站：

使用启动器

使用 gatsby new 命令时使用默认的 Gatsby 起始站点，不带额外参数，但我们也可以使用许多其他官方支持的或社区起始站点。目前有 3 个官方启动器：gatsby-starter-default、gatsby-starter-hello-world 和 gatsby-starter-blog。

您还可以在此处查看不同的社区启动器。

从这篇文章开始，我们的最终目标是使用 Gatsby 构建一个功能齐全的博客，因此，不要像上一步那样使用默认启动器，而是使用 gatsby-starter-blog。我们将我们的博客称为 Alligator Chronicles：

gatsby new alligator-chronicles https://github.com/gatsbyjs/gatsby-starter-blog#v2

站点配置

Gatsby 站点的配置在 gatsby-config.js 文件中指定。我们的 starter 已经使用默认配置填充了该文件，但现在我们可以对其进行一些更改：

盖茨比-config.js

module.exports = {
  siteMetadata: {
    title: 'Alligator Chronicles',
    description: 'The chronicles of a somewhat lonely Alligator.',
    siteUrl: 'https://alligator-chronicles.com/',
  },
  plugins: [
    ...
  ],
}

我们已经更改了站点的元数据以满足我们的需要，还删除了 pathPrefix，这仅在我们的博客不打算位于域的根目录时才有用。我们保持插件配置相同，因为这是我们将在以后的文章中探讨的内容。

请注意，在更改 gatsby-config.js 文件或创建新页面后，您需要重新启动本地服务器。

添加新帖子

使用官方博客启动器的设置方式，我们可以通过在项目的 /src/page 目录中为每个帖子创建一个新目录，然后使用 index.md 文件来添加帖子帖子的内容。

例如，向我们的网站添加新帖子：

/src/pages/lonely-gator/index.md

---
title: Lonely Gator
date: '2018-08-16'
---

I'm just a lonely gator, going about my life. **Croc croc**!

在大多数情况下，我们的博客文章只是简单的 mardown 文件。唯一的区别是在用 - 包裹的文件顶部添加了一些 frontmatter 元数据，它提供了可用于使用 GraphQL 进行查询的数据。

建造

稍后，当我们的博客真正上线时，我们将使用 gatsby build 命令编译所有资产并构建静态文件：

$ gatsby build

这会将准备好部署的资产添加到项目根目录中的 public 目录中。该文件夹的内容可以简单地上传到静态托管服务提供商，以便我们的博客上线。

一旦您的网站建成后，您还可以使用 gatsby serve 在 http://localhost:9000/ 上提供您网站的构建和优化版本：

$ gatsby serve

这对于测试您的网站很有用，就像它在实时主机上一样。

包起来

既然我们已经触及了皮毛并启动了一个新的 Gatsby 网站，我们已经为开始深入挖掘未来的帖子做好了准备，并从构建我们博客的具体细节开始。

同时，我鼓励您阅读官方 v2 文档。