DR：在今天的文章中，我们将使用gatsbycloud和Netlify构建JAMstack应用程序。利用这两者的力量，我们将看到从世贸中心到一个完全部署的网站是多么容易。我们还将回顾JAMstack的概念以及它如何改变我们对web开发的看法。JAMstack的艺术JAMstack这个词最早是由Netlify创造的。可以肯定地说，我们大多数人在web开发中都以某种方式使用JAMstack。好吧，但是什么是JAMstack？我们聊聊吧。让我们来看看JAMstack中的JAM意味着什么。J： JavaScript——可以说是世界上最流行的编码语言之一，我们使用它是有意义的。使用React、Vue甚至是普通JavaScript创建应用程序，trustdata大数据，这有助于构建堆栈并将请求保持在客户端。A： API的——这个很酷，因为它利用了API的功能，不需要数据库或后端来承载服务器。M： 下一步，我们可以预先构建模板化标记。一旦我们引入一个静态站点生成器，比如Jekyll或Gatsby，我们就可以快速显示这些内容。这三个加在一起可以使加载时间相当快。虽然这三个正在努力创建一个快速的网站，我们有这么多的资源在那里。JAMstack比我们在spa中使用的JavaScript更进一步。JAMstack需要额外的步骤来生成站点的静态版本，而spa通常是在客户端呈现的。在今天的项目中，我们将与盖茨比云和Netlify建立一个投资组合。让我们看看那些。"JAMstack正在改变我们对web开发的看法！"在推特上留言盖茨比是什么在我们今天的项目中，我们将使用盖茨比。Gatsby是一个基于React的静态站点生成器，nba大数据，由GraphQL驱动。作为一个静态站点生成器意味着它需要我们的React应用程序并创建一个静态HTML文件。一旦我们有了它，我们就可以在我们的网站上加载任何需要的JavaScript来添加额外的功能。它减轻了浏览器的负载，因为我们只提供HTML。我们不需要调用任何数据库或运行任何服务器代码来生成页面。我们可以利用JavaScript和API的强大功能来获取我们的信息。它不仅会让事情变得闪电般的快，因为HTML比JavaScript更快地呈现浏览器，而且它也非常容易入门。当我们开始建立我们的网站时，我们会很快进入这一阶段。盖茨比云我们还将使用盖茨比云。Gatsby Cloud是Gatsby提供的产品，它允许我们更快地创建和管理Gatsby站点。gatsbycloud提供了一些启动项目，我们可以使用这些项目来连接Gatsby、数据源（本项目的DatoCMS）和部署工具（Netlify）。我们可以连接所有这些东西，并有一个网站在几个快速点击。稍后我们将进一步讨论DatoCMS。我们还将介绍如何使用这个了不起的新产品，盖茨比云，盖茨比给我们。"Gaty SBY提供了一个让我们更快管理网站的云。"在推特上留言什么是Netlify在Netlify出现之前，我们必须使用AWS或DigitalOcean这样的公司来创建一个服务器，然后在该服务器上托管我们的网站。今天我们有Netlify帮我们解决这个问题。将网站部署到Netlify几乎太容易了。（我对我的第一次部署持怀疑态度！）有很多方法可以让你的网站运行起来。在今天的项目中，我们将使用盖茨比云连接到Netlify。让我们看看使用盖茨比云部署到Netlify有多容易！什么是DatoCMS我们的内容将在某个地方存在。我们将使用一种叫做DatoCMS的工具，而不是构建我们自己的CMS（内容管理系统）。我们所有的内容（公文包项目）将在那里管理。这很好，因为我们不必创建自己的仪表板或编辑器。所有这些都在DatoCMS内置仪表板中为我们处理。假设我们有一个博客，我们只想更新一个博客帖子。我们可以更新内容，数据将保存在DatoCMS中，当我们部署时，它将重建一个条目而不是整个blog。听起来很省时！让我们建造！我们今天要做什么在今天的项目中，云服务器一年多少钱，我们要建立一个投资组合！使用gatsbycloud、Netlify、DatoCMS和JAMstack的强大功能，我们将很快建立一个网站。让我们看看在JAMstack世界中创建投资组合的速度有多快！开始我们的项目首先，让我们建立一个盖茨比网站。我们要去盖茨比云。在这里我们将看到主页。点击"登录"，我们将被重定向到一个带有"使用GitHub登录"按钮的页面。一旦我们点击它，我们将使用我们自己的GitHub凭证并登录到Gatsby云。注意：如果我们从未使用过gatsbycloud，那么此时我们可能需要授权它。接下来，我们将创建一个新项目。点击"CreateNewSite+"按钮，我们就可以开始这个过程了。我们还没有盖茨比网站，所以我们要点击"我还没有盖茨比网站"，然后点击"下一步"。在这里，我们将看到一个建立我们的网站的四个步骤的过程。盖茨比云中的四步曲第1步-初学者：从初学者列表中，我们将使用"带DatoCMS的投资组合"。单击该启动器并单击"下一步"。步骤2-存储库：在这里，我们将为存储库命名。由于链接到我们的个人GitHub，Gatsby Cloud将为我们创建回购，并将其放入我们的GitHub帐户中。如果我们的GitHub帐户可以访问多个GitHub组织，那么我们需要选择我们想要使用的正确组织。一旦选择了正确的组织，我们将安装gatsbycloud。接下来，我们将命名它，然后单击"下一步"。在本教程中，我们将使用jamstack portfolio。注意：Netlify要求网站名称在全球范围内是唯一的。如果继续，必须使用唯一的名称。步骤3-连接CMS：在这一步中，我们将创建一个DatoCMS帐户或连接到现有帐户。点击"Connect"（连接）按钮，指向"Authorize with DatoCMS"（授权数据）。将出现一个弹出窗口，我们将使用DatoCMS创建一个新的免费帐户或登录到现有帐户。一旦我们授权所有这些，我们将返回，看看我们确实是"连接"到我们的数据。一旦我们看到，点击"启动我的网站"。步骤4-摘要：稍等片刻，我们将被重定向到"摘要"选项卡。这里有很多信息。我们看到设置是成功的，我们看到了DatoCMS项目的链接，也看到了我们新创建的GitHub链接。点击"完成"被重定向回我们的盖茨比云仪表板。一旦进入仪表板，我们将看到我们新创建的项目正在构建中。给我几分钟。一旦完成，我们将看到一个绿色的复选标记和一个"Deployed in（deploy time here）"。注意：要再次检查是否创建了回购，请转到连接到Gatsby Cloud的GitHub帐户并转到"Repositories"。在那里，我们将看到我们新创建的回购！快速回顾！到目前为止，我们已经完成了以下工作：我们已经创建了一个GitHub回购，其中包含我们所有的Gatsby代码。我们已经把我们的数据存储到DatoCMS中，一个无头CMS。所有这些都是通过gatsbycloud构建的静态站点。这是一个我们正在建立的投资组合，所以我们想展示我们已经建立的项目。让我们看看这是怎么做到的！更新DatoCMS中的数据我们所有的数据都在DatoCMS中；让我们去更新它吧！我们将转到DatoCMS仪表板并更新一个项目。单击我们先前创建的项目。在我们的例子中，我们将其命名为"jamstack portfolio"，因此我们应该在项目列表中看到这个名称。在页面的顶部，我们会看到一个按钮，上面写着"enterproject"，点击它。一旦我们看到"你好，管理员！"，我们可以从那里更新任何数据。让我们点击"工作"。在这里，我们正在查看我们网站上查看的"投资组合项目"列表。""传单1"位于列表顶部，大数据能做什么，正好是我们可以进去更新的自动生成项目之一。让我们继续点击"传单1"，我们可以更新它的大部分内容。标题，图片，内容，任何东西！对于本例，让我们更改以下内容：标题封面图片节选应该是这样的：一旦我们更新了所有我们想要的东西，让我们点击页面右上角的"保存"。正在检查盖茨比云的更新让我们进入我们的盖茨比云仪表板，点击"jamstack公文包"，看看我们的网站做得如何。我们将再次检查我们的更改是否已保存。我们应该看到我们最近的部署已经运行。如果它仍在运行，请确保让它完成部署。有一个"触发构建"按钮，如果需要，但我们不应该这样做。完成后，什么叫大数据分析，单击提供的超长URL。这个网址显示了我们网站的一个实时版本！我们看到我们的内容在DatoCMS中被更新了。在当地做这个项目现在我们几乎所有的东西都设置好了，让我们聊聊在我们的网站上添加其他东西吧。如果我们想做的不仅仅是更新通过DatoCMS设置的数据，我们可以从GitHub克隆repo，然后用VS代码或我们选择的编辑器打开我们的项目并在那里进行。我们可以做的一些事情是：更改布局更改字体或颜色创建自定义主题创建新类型的页面加载项身份验证添加更多用于搜索引擎优化的插件我们可以在自述文件.md为我们创建的回购协议。在我们选择的编辑器中打开后，运行以下命令：纱线安装一定要装上纱线。我们也可以使用npm命令。我们将要创建一个.env文件，以便存储令牌。这个令牌是为了让我们可以从我们的DatoCMS项目中获得对