我们之前 探索了 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 文档 。