Gatsby.js教程在这个Gatsby.js教程中，我们已经准备好了工作的本地环境，安装了依赖项并创建了第一个Gats

在这个Gatsby.js教程中，我们已经准备好了工作的本地环境，安装了依赖项并创建了第一个Gatsby项目框架。

什么是Gatsby.js

Gatsby.js是一个有一些注意事项的静态网站生成器。它创建的网站不需要像动态服务器那样与其他服务器通信，请求新数据在网站上实时更新。虽然主要的注意事项是，Gatsby.js可以做到这一点，只是以一种更迂回的方式，因为这不是Gatsby.js的原始用例。

为什么要做这个项目

Gatsby.js是用来生成静态网站的。静态网站是有帮助的，有几个原因。

一个原因是它们更安全。
另一个原因是网站性能的提高，这往往导致它们比动态网站加载得更快。
另一个原因是，由于大多数情况的复杂性降低，它们往往更容易管理。
最后，静态网站接受静态数据，意味着没有动态更新的数据，这意味着像评论这样的系统是可能的，但Gatsby有一些解决方案，虽然不是完美的。

这只是针对静态网站。Gatsby.js是一个静态网站生成器。它是一个创建静态网站的工具，特别是页面和它们背后的内容，通过一个抽象，使特定的任务更容易实现。

Gatsby让你在做的时候，对每一个细小的细节都有更高的控制水平。例如创建，当创建一个博客时，每篇博文有许多元素是相同的；因此你可以将它们创建一个模板，然后将其连接到内容管理系统（CMS），例如WordPress，通过WordPress你可以制作博文，而不必担心你的博文所具有的所有其他东西，如链接到你的主导网站等等。这可以通过许多无代码的网站实现，如Squarespace、WordPress，或任何类似的没有盖茨比。

使用案例

就像我在前面的例子中说的，使用Gatsby.js的一个主要例子可以是一个博客网站。

Gatsby.js的一个更常见的用例是企业网站、投资组合网站或其他任何情况下，你有很少或没有用户数据提交和显示在网站上。这就增加了一个复杂的层次，用其他工具更容易。

当有人熟悉可供选择的广泛的插件时，这种广泛的插件和其他伟大的工具有过最终给人以伟大的用户体验，这足以成为挑选它而不是其他一些技术的理由。

先前的知识要求

要开始学习Gatsby，重要的是你首先要对基础知识有一个强有力的把握。不过，有了HTML、CSS、JavaScript和React，你也可以在学习Gatsby的同时学习React。

HTML。这是超文本标记语言的缩写。它用于定义网站的结构。当你第一次创建你的网站时，你可能只是从这个开始，但随着时间的推移，你可能会增加更多的内容，甚至像Gatsby那样，将抽象的一层带回去。你会希望对HTML有很强的理解，因为你经常把它与JJSX一起使用。

CSS。它是层叠样式表的缩写。你的网站风格决定了它的外观，在某种程度上，甚至可以为你的网站增加互动性。虽然在类似的任务中，它不像javascript那样广泛，但它工作得很好，如果不是更好的话。你会希望对CSS有一定的了解，但这并不重要，除非你想让你的网站看起来很好，在某些情况下，有一个体面的了解就足够了，然后开始分支到库，使之更容易。

JavaScript。这门编程语言可以开始真正为网页添加精灵和魔法。对JavaScript有基本的了解可以让你走得更远，但如果你想让它更上一层楼，你要么需要非常非常擅长搜索和使用这些结果，要么你需要有更深的了解。

React。一个为了让你赋予结构并帮助你构建UI而建立的库。假设你有前面的要求，你只需要一个基本的理解。

为了有效地使用Gatsby.js，你可能还要学习更多的工具，比如许多插件，但更有可能的是GraphQL，但这可以在以后进行。

设置你的工作流程

开始使用Gatsby.js，首先你要安装以下工具：Node.js，Git，Gatsby CLI和VS Code。

Node.js

Mac
首先，你要检查你是否有homebrew，用

brew -v

在你的终端中
，否则就按照homebrew安装指南
安装homebrew。

然后安装xcode

xcode-select --install

现在你可以用以下方式安装node.js了

brew install node

Windows
从node.js
下载Windows版的LTS。

Gatsby CLI

下载与

npm install -g gatsby-cli

现在是VS Code，这是一个代码编辑器，我推荐它，因为它为特别是网络开发提供了许多功能。下载地址：VS Code

创建你的第一个Gatsby项目

现在，这个Gatsby项目将是赤裸裸的，但你可以自由地进行一些有趣的操作，尝试新的东西，看看会发生什么。

首先，你要在VS Code中打开VS Code和终端，这可以通过顶部栏上的终端按钮来完成；你可能想学习一下把光标放在按钮上时告诉你的快捷方式。现在在终端运行。

gatsby new

你将会看到以下内容，点击回车继续每一步

What would you like to call your site?
✔ · My First Gatsby Site

What would you like to name the folder where your site will be created?
✔ Desktop/ my-first-gatsby-site

Will you be using JavaScript or TypeScript?
❯ JavaScript
  TypeScript

✔ Will you be using a CMS?
· No (or I'll add it later)

✔ Would you like to install a styling system?
· No (or I'll add it later)

✔ Would you like to install additional features with other plugins?
· Done

而最后

Thanks! Here's what we'll now do:

    🛠  Create a new Gatsby site in the folder my-first-gatsby-site


? Shall we do this? (Y/n) › Yes

要运行你的网站，键入以下内容

cd name-of-site

然后

gatsby develop