用Netlify & eleven在Jamstack上写博客

先决条件< / h2 >

本教程是为已经有使用git和经验的人准备的GitHub，以及JavaScript的使用npm使用CLI工具。如果您在本教程中遇到困难，欢迎继续学习在信使上找到我们我们很乐意帮忙

开始

在开始对代码本身进行更改之前，我们需要切换到一个更适合静态站点托管和部署的托管平台，在本例中就是这样Netlify．自SFTP以来，主机选项已经取得了长足的进步。Netlify可以托管并自动部署您对项目所做的更改，而不需要将文件拖放到FTP应用程序中。

为了准备，创建一个Netlify帐户使用你的GitHub登录，并在仪表板中使用“从Git中新建站点”选项。通过使用这个选项，你将在你的GitHub账户上选择一个现有的git回购来为你的网站提供文件。的Netlify官方博客上有关于这些步骤的完整指南如果你需要更多帮助。

为了帮助你跟进，我创建了一个网站，这样你就可以看到在这个过程的每一步都发生了什么:BeanThere’，我的例子网站出售各种新鲜烘焙的咖啡豆。上面的截图显示了我的网站托管在Netlify上。按照这个链接到我的GitHub回购，或查看下面的截图，看看文件结构和里面的文件是什么样子。

如截图所示，我的网站是由一些HTML, CSS，图像和一些JavaScript构建的，这是我的DropInBlog嵌入代码．你可以查看我使用嵌入代码制作的博客的实时版本．

使用静态站点生成器

我们将使用Jamstack技术生成博客页面和所有博客帖子页面，而不是使用JavaScript将博客内容插入到我们的站点并嵌入它。

为了生成这些页面，我们将使用静态站点生成器．在本教程中，我们将使用Eleventy，一个静态网站生成器，它给了我们足够的能力来自动生成我们的博客页面和博客文章。

首先，在站点项目的顶层创建一个名为<代码>．eleventy.js> < /代码．这个文件是如何我们将控制如何eleven行为和什么数据可用-数据将来自DropInBlog的帖子。如果你有更多关于eleven的问题(例如，它是什么以及它是如何工作的)，请查看正式的十一文件．

因为我们处理的是我们正在构建的站点外部的API，所以我们需要引入node-fetch作为一种依赖。创建一个新的<代码>package.json> < /代码文件并使用NPM安装依赖项:

NPM安装节点

依赖项安装完成后，返回到<代码>package.json> < /代码文件。它现在应该包括如下内容:

｛
" devDependencies ": {
:“node-fetch ^ 2.6.0”
｝
｝

专业提示:您可以使用命令<代码>npminit> < /代码要启动NPM设置过程并创建您的<代码>package.json> < /代码文件，但是你也可以创建文件并添加一对空花括号，<代码>｛｝> < /代码．在较小的项目中，您可能会发现这更容易维护

在eleven中获取博客内容

我们现在可以开始使用了<代码>node-fetch> < /代码它被安装在我们的主文件中。让我们把一些JavaScript从DropInBlog获取你的文章:

//从安装的包中引入节点获取依赖项
Const fetch = require("node-fetch");

//创建一个异步函数来检索DropInBlog内容
异步函数getPosts() {
//内容终会到达，所以我们必须等待
返回等待取回(
// DropInBlog API端点
//更新这一行
“https://api.www.dante-rossetti.com/v1/json/?b=XXXXXXXXXXXXXXXXXXXXX&includecontent=1”
）
//清理响应，只返回帖子
.then((res) => res.json())
.then((json) => {
返回json.data.posts;
})；
｝

我已经检查了代码并添加了注释以提供更多细节。如果您不是非常熟悉这些代码，那么可以将这些代码直接复制到您的<代码>．eleventy.js> < /代码文件。你也可以访问我的GitHub回购和复制整个JavaScript文件．

简单地解释一下，我们正在使用我们安装的fetch依赖项来访问DropInBlog API并获取我们所有的博客内容，然后将其格式化为JSON，最后格式化为JavaScript对象。

代码中唯一需要更改的部分是DropInBlog API端点，这在代码注释中指出:

“https://api.www.dante-rossetti.com/v1/json/?b=XXXXXXXXXXXXXXXXXXXXX&includecontent=1”

您可以找到自己的DropInBlog API端点登录到您的DropInBlog帐户，点击“代码和布局”，然后点击“替代集成”。beplay2官网体育下载你会发现JSON API文档的链接．

复制URL并在JavaScript代码中替换URL<代码>&includecontent = 1> < /代码被添加到URL的末尾，如代码示例中所示。

我们添加的代码将检索博客文章，但我们需要将其传递给eleven，以便将其暴露给项目中的文件。让我们结合JavaScript和一些特定于eleven的代码来做到这一点:

//开始为项目配置eleven
模块。exports = function (eleventyConfig) {

//复制' assets/ '到' _site/assets '
eleventyConfig.addPassthroughCopy(“资产”);

//从DropInBlog帖子中创建一个eleven集合
eleventyConfig。addCollection("posts"， async函数(collection) {
collection = await getPosts();
返回集合;
})；
};

正如你在上面看到的，我们正在导出一个我们设置好的eleven配置，它将被传递给eleven本身，以及我们的整个网站项目。在这个构型中确保我们的资产文件夹被包括在内在最后生成网站。另外，我们正在创建一个收集在十一．这些集合是一组可以被引用和迭代的项;在我们的例子中，集合是一组博客文章。

接下来我们需要测试代码并输出博客内容。

模板

前面的步骤和我们添加的代码允许我们开始使用模板代码。模板代码(如果您不熟悉的话)是我们可以与标准HTML一起使用来输出数据的东西。对于我们的目的，数据是我们在上一步中创建的博客文章的集合。

打开您现有的博客HTML页面，并将以下代码添加到可见的地方，如旁边现有的DropInBlog嵌入代码，直接进入页面:

<代码>
< pre >{{集合。Posts | dump}}

. dump
> < /代码

eleven的默认模板语言是nunjuck。在eleven文档中找到更多关于模板的信息．

一旦你添加了这段代码并保存了文件，在你的CLI工具中运行以下命令:

@11ty/ 11——发球——看

如果一切设置正确，eleven将获取项目中的文件，将DropInBlog数据传递给这些文件，生成网站，并启动本地服务器来查看生成的网站。

导航到localhost:8080在你的浏览器中，你会看到你的静态网站正在运行。接下来，导航到博客页面并检查您添加模板代码的位置，相反，您应该看到一个包含所有博客文章内容和数据的长字符串。

恭喜!您只需从API中提取实时数据，并将其提供给运行中的网站

模板循环和路由

让我们用更多的模板代码将这一长串数据转换为一个博客索引页面和单个博客文章页面。

返回到您的博客页面HTML文件，并在代码中找到一个位置来显示您的博客，该位置很可能与您现有的DropInBlog嵌入代码所在的位置相同。我们将用一个双截棍“for循环”替换该代码。下面是我的博客文章列表代码的简化示例:

<标题> < / h1 >博客
< div >
{%用于集合中的帖子。帖子%}
文章< >

< div >
< h2 >
{{post. "标题}}< / >
< / h2 >
< p >{{职位。摘要}}< / p >
除了< >

发布在{{post。publishedAt}}
< /时间>
 by {{post.author.name}
除了< / >
< / div >
< / >的文章
{% endfor %}
< / div >

在这段代码中，您可以看到与博客文章数据相匹配的各种数据点。之类的东西<代码>featuredImage> < /代码而且<代码>author.name> < /代码用花括号括起来的是为eleven提供数据并在生成HTML页面时替换的占位符。的<代码>For post in collections.post> < /代码将遍历每个博客文章，并生成每个项目作为文章预览，以及到博客文章的链接。

切换回本地运行的站点将让您看到刚才添加的结果。确保CLI窗口保持打开并运行，因为它将保持本地站点运行，并在输入错误时提供任何错误消息。同样，如果你在自己的项目上运行代码有困难，在GitHub上看看我的吧．

以上是我的博客在这个阶段的样子。我也添加了一些CSS让它看起来更像“博客”。

如果您点击了其中一篇博客文章，您可能会注意到一个问题:所有博客文章都显示了一个错误。这是因为我们还没有创建那些单独的博客文章。我们需要使用posts集合来生成这些页面。值得庆幸的是，eleven有一个从集合自动生成页面的聪明方法。

为此，创建一个名为<代码>posts.html> < /代码在项目的顶层。对于我的项目，我复制了主blog.html文件并将其重命名为<代码>posts.html> < /代码．然后，我将删除主博客列表区域，并添加单个博客文章模板代码。

因为这个模板文件将用于生成所有的博客文章页面，所以我们需要使用一些特殊的eleven代码来传递集合数据。在模板文件的最顶部，在任何其他代码之前，添加以下代码:

---
分页:
数据:collections.posts
尺寸:1
别名:文章
addAllPagesToCollections:真
永久链接:"/blog/{{post. "鼻涕虫}}/”
---

这段代码就是所谓的“frontmatter”:一种在模板文件中设置变量的方法。这里，我们利用了eleven中的分页功能。分页通常显示大约10个帖子的子集，然后这些帖子被分割到另一个页面。点击下一页将显示接下来的10个。在本例中，我们将分页设置为1，即每页一篇文章。我们还设置了URL - permalink -基于post slug。所有这些工作在一起意味着每篇文章将被输出到它自己的HTML页面和以博客文章slug命名的文件中。

为了完成这些单独的博客文章，我们需要使用一些模板代码来输出文章标题、内容和我们想在页面上显示的任何其他属性。这里有一个例子:

< div class = "单纯" >
<标题>{{职位。标题}}< / h1 >
< img
src = "{{职位。featuredImage｝｝"
alt = "{{职位。Title}}特征图像"
/>
除了< >

发布在{{post。publishedAt}}
< /时间>
由{{post.author.name}}发布
< p > < em >{{职位。readtime}} < / em > < / p >
除了< / >
{{职位。内容}}
<页脚>
在post类别下填写:{%。类别%}{{category.title
}}{% endfor %}
< /页脚>
<人力资源/ >
< / div >

繁荣!我们刚刚为网站生成了所有的博客文章。切换回你的本地跑步网站，点击博客文章链接，现在就会显示一篇博客文章。

部署

博客现在看起来不错。将这段代码推到git存储库中，以便Netlify抓取并构建新站点，这可能是个好主意。在此之前，创建一个新的<代码>netlify.toml> < /代码在项目的顶层文件，并添加以下内容:

(建立)
Command = "npx @11ty/eleven "
发布= "_site/"

这是Netlify将引用的一个小配置文件，以便它了解如何生成站点。使用git推送代码;或者如果你正在使用GitHub，并且不熟悉git，你可以直接将项目拖放到存储库页面上。

一旦所有内容都被推送，Netlify将注意到变化，并开始生成和部署站点的过程。转到Netlify仪表板将让您查看构建步骤，并为您提供到活动站点的链接。你现在可以看到我的网站在Netlify上运行．

该部署过程的最后一个组件是使Netlify能够感知内容更改。Netlify会知道开发者什么时候对网站做了改动，但是如果有人对DropInBlog中的博客内容做了改动呢?这就是“构建钩子”发挥作用的地方。构建钩子是一种服务让其他服务知道站点上刚刚发生的事情的方法。把它们想象成一个寻呼机:它会提示有重要的事情发生，但要由他们自己去弄清楚到底发生了什么。使用寻呼机作为引用可能会导致本文的遗留问题。

在Netlify仪表板中，导航到“站点设置”，然后是“构建和部署”。向下滚动到“构建钩子”，然后单击“添加构建钩子”。给构建钩子起一个像“DropInBlog构建钩子”这样的名字，并确保在存储库中选择了正确的分支。设置好后，点击“保存”，你会看到一个特殊的构建钩子URL。这将是URL, DropInBlog将“页”时，有内容的变化;然后Netlify将听到该页面并开始重建站点。

构建钩子是DropInBlog中的一个全新功能——它是专门为使用DropInBlog作为一个无头博客而添加的。登录到DropInBlog并导航到“设置”，然后你会发现一个构建钩子URL在页面底部的字段。复制Netlify构建钩子URL并将其粘贴到字段中。一旦你保存了它，它就完成了!

要查看这一操作，并测试它是否正常工作，请在您的一篇博客文章中更改内容，然后检查Netlify仪表板以查看新的构建钩子部署。

任务完成< / h2 >

在本教程中，我们采用了一个没有任何服务器代码的静态网站，并添加了一个实时运行的博客，从而不需要使用更脆弱的基于客户端的JavaScript。为了在更高的层次上解释这个过程，我们用DropInBlog支持的博客丰富了一个静态站点，并消除了对较重代码的依赖。通过使用无头cms并将它们的api插入到这样的配置中，站点可以变得非常强大，同时降低复杂性。

DropInBlog作为一个无头CMS还有更多的东西要深入研究。更多的指南和教程请关注这个空间。