Gatsbyv2的第一步

来自菜鸟教程
(重定向自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-defaultgatsby-starter-hello-worldgatsby-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 servehttp://localhost:9000/ 上提供您网站的构建和优化版本:

$ gatsby serve

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

包起来

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

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