使用 Gatsby v2 的第一步

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

Gatsby CLI

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

1$ yarn global add gatsby-cli
2
3# or, using npm:
4$ npm install gatsby-cli -g

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

1$ gatsby new my-site

这将创建一个my-site目录,起始文件结构如下:

 1├── /.cache
 2├── .gitignore
 3├── .prettierrc
 4├── LICENSE
 5├── README.md
 6├── gatsby-browser.js
 7├── gatsby-config.js
 8├── gatsby-node.js
 9├── gatsby-ssr.js
10├── /node_modules
11├── package-lock.json
12├── package.json
13├── /src
14└── yarn.lock

现在,您可以将cd添加到新站点的目录中,并通过运行gatsby Development开始对其进行操作:

1$ cd my-site
2$ gatsby develop

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

盖茨比系列

使用启动器

当使用没有额外参数的gatsby new命令时,使用默认的Gatsby Starter站点,但我们也可以使用一些其他官方支持的或社区Starter站点。目前有3个官方启动者:Gatsby-starter-Default,Gatsby-starter-Hello-world和Gatsby-starter-blog。

您还可以查看不同的社区入门here.

从这篇文章开始,我们的最终目标将是使用Gatsby构建一个功能齐全的博客,因此,我们不像上一步那样使用默认的starter,而是使用Gatsby-starter-blog。我们将把我们的博客命名为鳄鱼编年史:

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

站点配置

Gatsby站点的配置在gatsby-config.js文件中指定。我们的Starter已经使用默认配置填充了该文件,但现在我们可以稍微更改一下:

 1[label gatsby-config.js]
 2module.exports = {
 3  siteMetadata: {
 4    title: 'Alligator Chronicles',
 5    description: 'The chronicles of a somewhat lonely Alligator.',
 6    siteUrl: 'https://alligator-chronicles.com/',
 7  },
 8  plugins: [
 9    ...
10  ],
11}

我们已经更改了网站的元数据以满足我们的需要,还删除了`pathPrefix‘,只有当我们的博客不打算位于域的根目录时,它才有用。我们保持了插件的配置不变,因为这是我们将在以后的帖子中探讨的内容。

<$>[警告]请注意,您需要在更改Gatsby-config.js文件或创建新页面后重新启动本地服务器。<$>

添加新帖子

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

例如,在我们的网站上添加一个新帖子:

1[label /src/pages/lonely-gator/index.md]
2---
3title: Lonely Gator
4date: '2018-08-16'
5---
6
7I'm just a lonely gator, going about my life. **Croc croc**!

在很大程度上,我们的博客帖子只是简单的选取框文件。唯一的区别是在用-包装的文件的顶部添加了一些FrontMatter元数据,它提供了可用于使用GraphQL进行查询的数据。

搭建

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

1$ gatsby build

这会将准备部署的资产添加到我们项目根目录下的Public目录中。该文件夹的内容可以简单地上传到静态托管提供商,以便我们的博客是实时的。

一旦您的站点构建完成,您还可以使用gatsby服务为您的站点的构建和优化版本http://localhost:9000/:提供服务

1$ gatsby serve

这对于测试您的站点非常有用,就像它将在活动主机上一样。

总结

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

同时,我鼓励您阅读官方v2 documentation.

Published At
Categories with 技术
Tagged with
comments powered by Disqus