我们之前已经探索了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.