作者选择了 Internet Archive以作为 Write for Donations计划的一部分接收捐款。

[Eleventy] (https://www.11ty.dev/) (又称"11ty")是用于建设网站的[静态站点生成器] (https://en.wikipedia.org/wiki/Web_template_system# Static_site_generators) (SSG). 它由[Zach Leatherman] (https://twitter.com/zachleat/)于2017年推出,作为基于JavaScript的替代[Jekyll] (https://jekyllrb.com/),是最早的主流SSG之一,由Ruby所写. 十一地获得声誉,成为建设静态网站最灵活和最有表现的选择之一,导致[Jamstack (https://en.wikipedia.org/wiki/Jamstack)生态系统的采纳率稳步上升.

重要的是要注意,Eleventy不是JavaScript框架,它不包括任何客户端JavaScript。它需要在HTML、Markdown或您选择的模板语言中指定的模板文件,并输出一个完整的静态网站,可部署到您选择的Web服务器。

虽然大多数其他 SSG 仅限于一个模板语言,但 Eleventy 支持多个模板语言,如 HTML, Liquid, Markdown, Nunjucks, Handlebars, moustache, EJS, Haml, Pug等,你甚至可以将它们结合到同一个项目中。

在本教程中,您将从零开始开发一个静态的网站,并将其部署到DigitalOcean的应用平台免费。

前提条件

要完成本教程,您将需要:

[数字海洋] (https://cloud.digitalocean.com/)账户。
AGitHub帐户。
在你的机器上安装和配置了Node.js,以及). 注意:写作时最新版本"十一"(v0.12.1)需要Node.js v10或更新.
[Git] (https://git-scm.com/) 在您本地机器上初始化并设置. 要从Git开始,请遵循[如何为开放源代码做出贡献:从Git开始(https://andsky.com/tech/tutorials/how-to-contribute-to-open-source-getting-started-with-git)。
HTML、CSS和JavaScript的基本知识,可在我们[如何用 HTML 系列构建网站(https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html)、[如何用 CSS 系列构建网站(https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css)和[JavaScript 中找到(https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript)). .

步骤1 - 设置项目

与 Jekyll 和 Hugo 等竞争对手不同,Eleventy 没有提供一种新项目的模式,因此您需要创建一个常规的 Node.js 项目,然后将 Eleventy 添加为依赖。

第一步是在您的计算机上启动终端,在您的文件系统中创建一个新目录,并如下所示更改。

1mkdir eleventy-blog
2cd eleventy-blog

在eleventy-blog目录的根部,以npm init -y的package.json文件初始化项目,并通过将-D标志传递到安装子命令来安装Eleventy作为开发依赖。

1npm init -y
2npm install -D @11ty/eleventy

安装 Eleventy 包后,请使用ls检查项目目录的内容,它将包含一个package.json文件、一个package-lock.json文件和一个node_modules目录。

结果应该是这样的:

1[secondary_label Output]
2node_modules package-lock.json package.json

在您最喜欢的文本编辑器中打开package.json文件,然后用下面突出的行替换现有脚本属性。

 1[label eleventy-blog/package.json]
 2{
 3  "name": "eleventy-blog",
 4  "version": "1.0.0",
 5  "description": "",
 6  "main": "index.js",
 7  "scripts": {
 8    "build": "eleventy",
 9    "start": "eleventy --serve"
10  },
11  "keywords": [],
12  "author": "",
13  "license": "ISC",
14  "devDependencies": {
15    "@11ty/eleventy": "^0.12.1"
16  }
17}

这里有两个脚本:构建用于构建网站文件,开始用于在http://localhost:8080上运行 Eleventy Web 服务器。

保存文件,然后运行下面的命令来构建网站:

1npm run build

结果应该是这样的:

1[secondary_label Output]
2> [email protected] build
3> eleventy
4
5Wrote 0 files in 0.04 seconds (v0.12.1)

输出表示您尚未创建任何文件,所以没有什么可构建的,在下一步,您将开始添加网站所需的必要文件。

您将从一个空的目录开始,并逐步添加新功能,直到您到达这个结构。

 1.
 2├── about
 3│   └── index.md
 4├── css
 5│   └── style.css
 6├── _data
 7│   └── site.json
 8├── _includes
 9│   ├── layouts
10│   │   ├── base.njk
11│   │   ├── page.njk
12│   │   └── post.njk
13│   └── nav.njk
14├── index.njk
15├── node_modules
16├── package.json
17├── package-lock.json
18├── posts
19│   ├── first-post.md
20│   ├── second-post.md
21│   └── third-post.md
22└── _site
23    ├── about
24    │   └── index.html
25    ├── css
26    │   └── style.css
27    ├── index.html
28    └── posts
29        ├── first-post
30        │   └── index.html
31        ├── second-post
32        │   └── index.html
33        └── third-post
34            └── index.html

在此步骤中,您创建了一个 Node.js 项目,并将 Eleventy 添加为依赖。

步骤2 - 选择模板语言

对于本教程的目的,我们将使用 Nunjucks 模板,这是许多 Eleventy 项目的常见选择。

在您的项目目录的根部,创建一个 index.njk 文件,并在文本编辑器中打开它. 如下所示,将一个 "Hello world" 消息添加到文件中,然后保存文件。

1[label eleventy-blog/index.njk]
2<h1>Hello, world!</h1>

一旦保存,请再次运行构建命令,将index.njk文件转换为index.html文件,并将其输出到项目根部的新_site目录中。

1npm run build

结果应该是这样的:

1[secondary_label Output]
2> [email protected] build
3> eleventy
4
5Writing _site/index.html from ./index.njk.
6Wrote 1 file in 0.08 seconds (v0.12.1)

在此时,您可以通过启动一个开发服务器在http://localhost:8080,如下所示,在浏览器中查看网站。

1npm start

结果应该是这样的:

 1[secondary_label Output]
 2> [email protected] start
 3> eleventy --serve
 4
 5Writing _site/index.html from ./index.njk.
 6Wrote 1 file in 0.08 seconds (v0.12.1)
 7Watching..
 8[Browsersync] Access URLs:
 9 -----------------------------------
10       Local: http://localhost:8080
11    External: http://172.29.217.37:8080
12 -----------------------------------
13          UI: http://localhost:3001
14 UI External: http://localhost:3001
15 -----------------------------------
16[Browsersync] Serving files from: _site

如果您想使用不同的端口,您可以通过--port选项指定它,如下所示:

1npm start -- --port 4040 to set a different port

上面的命令中的--分离器用于区分npm命令本身所传递的参数,而不是转移到脚本中的参数。在启动开发服务器后,请在您的 Web 浏览器中打开http://localhost:8080以查看正在运行的网站。您可以随时通过键盘上的Ctrl + C来退出服务器。

Eleventy hello world in Microsoft Edge

在此步骤中,您使用了 Nunjucks 作为模板语言,并开始构建网站. 在下一节中,您将了解 Eleventy 中的 layouts并为网站创建一个主页。

第3步:创建主页

为了让您的项目从一开始变得更加灵活和可扩展,您需要创建一个基础模板,该模板将应用于网站的所有页面。通常,这被称为基础布局,它需要进入一个布局目录中嵌入在一个_includes目录中。

1mkdir -p _includes/layouts

在_includes/layouts目录中,创建一个base.njk文件,并在文本编辑器中打开它. 复制并粘贴下面的代码到文件中。

 1[label _includes/layouts/base.njk]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5  <meta charset="UTF-8">
 6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7  <title>{{ title }}</title>
 8</head>
 9<body>
10  <header>
11    <h1>{{ title }}</h1>
12  </header>
13  <main>
14    {{ content | safe }}
15  </main>
16</body>
17</html>

双卷轴的内容是 Nunjucks 变量,在构建衍生页面时将被相应更换。 { title }} 变量将通过页面的前部物质块提供,而 `{ content }}' 将被所有不属于前部物质的入口页面内容更换。

返回项目根中的 index.njk 文件,并如下所示修改它:

1[label eleventy-blog/index.njk]
2---
3title: Homepage
4layout: layouts/base.njk
5---
6
7<h1>Welcome to this brand new Eleventy website!</h1>

两侧的内容构成文件的前面材料,而文件的其余部分将被传送到您的布局作为其内容。

如果您的开发服务器仍在运行,请转到网站的 localhost URL 查看更改,或者在尝试在 Web 浏览器中查看之前先使用npm start启动服务器。

Eleventy homepage in action

正如您从上面的屏幕截图中可以看到的,base.njk 模板已在主页上生效。

在此步骤中,您为网站的页面添加了基础模板,并创建了主页,但是,它尚未超出浏览器的默认设置。

步骤 4 — 添加导航菜单

该_includes目录是您将网站的不同组件放置的地方。该目录的内容是部分文件,可以放置在您的布局文件中,以便重复使用。在本节中,您将创建导航菜单作为部分,并将其纳入基础布局。

在_includes目录中,创建一个名为nav.njk的新文件,在编辑器中打开它,并用下面的代码填充它,这是顶部导航栏的标记,包括网站的标题以及首页链接和尚未创建的关于页面。

 1[label eleventy-blog/_includes/nav.njk]
 2<nav class="navbar is-light" role="navigation" aria-label="main navigation">
 3  <div class="navbar-start">
 4    <div class="navbar-item has-text-weight-bold">
 5      My Eleventy Blog
 6    </div>
 7  </div>
 8  <div class="navbar-end">
 9    <a href="/" class="navbar-item">
10      Home
11    </a>
12
13    <a href="/about" class="navbar-item">
14      About Me
15    </a>
16  </div>
17</nav>

保存并关闭)。

 1[label eleventy-blog/_includes/layouts/base.njk]
 2<!DOCTYPE html>
 3<html lang="en">
 4  <head>
 5    <meta charset="UTF-8" />
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7    <title>{{ title }}</title>
 8  </head>
 9  <body>
10    <header>{% include "nav.njk" %}</header>
11    <main>
12      {{ content | safe }}
13    </main>
14  </body>
15</html>

在浏览器中,网站应该是这样的:

Navigation

当你再次检查主页时,导航菜单应该像上面的屏幕截图一样显示。网站的标题My Eleventy Blog被硬编码为nav部分,但这是不优的,因为你可能会在网站上的其他地方重复标题,然后更改它变得无聊,因为你将不得不找到每个地方它被用。

更好的方法是通过 [全球数据文件] 提供此值(https://www.11ty.dev/docs/data-global/)。这些是位于项目根的 _data 目录中放置的 JSON 文件,为所有模板文件提供可访问的全球数据。在项目根中,创建一个 _data 目录,随后在其内部创建一个 site.json 文件。在文本编辑器中打开 site.json 并使用下面的代码指定网站的标题。

1[label eleventy-blog/_data/site.json]
2{
3  "title": "My Eleventy Blog",
4  "url": "https://example.com/",
5  "language": "en-US",
6  "description": "A simple blog with awesome content"
7}

在此时,您可以保存并关闭该文件,然后返回_includes目录中的nav.njk文件,并用相应的变量替换硬编码的网站标题。

1[label eleventy-blog/_includes/nav.njk]
2. . .
3<div class="navbar-item has-text-weight-bold">
4  {{ site.title }}
5</div>
6. . .

该网站的外观应该与以前完全相同,但这一小的改变使得全球数据的设置和更新更加容易. 关于全球变量,有一点值得注意,那就是它们被范围化为JSON文件的名称,这就是为什么我们使用了上方的QQ站点.title.Q. 您可以根据需要创建其他数据文件,并在模板中使用它们。例如,您可以有一个`author.json'文件,其中包含您的个人细节,如您的姓名、生物信息以及与您社交媒体简介的链接。这些数据可以通过网站任何一页的变量(例如:QQ作者.bio QQ)获取.

返回项目根的index.njk文件,并如下所示更新其内容,以便使用网站标题和描述:

 1[label eleventy-blog/index.njk]
 2---
 3title: Homepage
 4layout: layouts/base.njk
 5---
 6
 7<section class="hero is-medium is-primary is-bold">
 8  <div class="hero-body">
 9    <div class="container">
10      <h1 class="title">{{ site.title }}</h1>
11      <h2 class="subtitle">{{ site.description }}</h2>
12    </div>
13  </div>
14</section>

在浏览器中,网站应该是这样的:

Updated homepage

在此步骤中,您已将导航菜单添加到网站,但是,该网站正在使用默认样式。在下一节中,您将使用 Bulma CSS 框架来样式化网站,该框架提供了基于 flexbox 的前端组件来构建响应式网站。

步骤5 - 添加风格表

目前,"十一"不承认CSS文件用于自动收录到构建目录中,因此需要几个额外的步骤才能使这个操作成功. 具体来说,您需要创建样式表目录,并确保在站点建成时将其复制到构建输出(QQsite"). 您还需要确保修改样式表会触发网页浏览器中的重建并自动刷新. 您可以为 11ty 创建 [配置文件] (https://www.11ty.dev/docs/config/ ) .

在项目根中,创建一个) CSS 框架:

1[label eleventy-blog/css/style.css]
2@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

保存檔案

接下来,在您的项目根中创建一个 .eleventy.js 文件. 这是 Eleventy 的配置文件,类似于 Jekyll 项目中的 _config.yml 文件。请注意,此文件将被隐藏在您的文件系统中,因为它带有前缀。

在文本编辑器中打开 .eleventy.js 并粘贴下列内容,以便在构建中包含 css 目录,并查看文件夹的更改:

1[label eleventy-blog/.eleventy.js]
2module.exports = function (eleventyConfig) {
3  // Copy the `css` directory to the output
4  eleventyConfig.addPassthroughCopy('css');
5
6  // Watch the `css` directory for changes
7  eleventyConfig.addWatchTarget('css');
8};

在此时,您需要用Ctrl+C关闭服务器,然后在更改生效之前用npm start重新启动服务器。

如果您现在在浏览器中检查该网站,您将不会注意到任何更改,这是因为风格表尚未链接到任何模板中。

 1[label eleventy-blog/_includes/layouts/base.njk]
 2<!DOCTYPE html>
 3<html lang="en">
 4  <head>
 5    <meta charset="UTF-8" />
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7    <link rel="stylesheet" href="/css/style.css" />
 8    <title>{{ title }}</title>
 9  </head>
10  <body>
11    <header>{% include "nav.njk" %}</header>
12    <main>
13      {{ content | safe }}
14    </main>
15  </body>
16</html>

保存文件后,样式应该立即启动。

Styled homepage

在此步骤中,您使用Bulma CSS框架添加了对网站的样式,在下一步,您将通过创建一个关于页面来扩展该网站。

步骤6 — 创建一个关于页面

目前,导航菜单中有一个链接到一个不存在的关于页面,您将通过为所有静态页面创建一个独特的布局,然后为关于页面本身进行更改。在_includes/layouts文件夹中,创建一个page.njk文件,这是网站上的所有静态页面的布局。

在您的编辑器中打开新文件,并填写下面的代码。前面的),它允许我们在添加新模板的独特元素时重复使用模板,这有助于避免基本网站结构的不必要重复。

 1[label eleventy-blog/_includes/layouts/page.njk]
 2---
 3layout: layouts/base.njk
 4---
 5
 6<article class="page-layout">
 7  <div class="container">
 8    <div class="columns">
 9      <div class="column is-8 is-offset-2">
10        <div class="content mt-5">
11          <h1>{{ title }}</h1>
12          {{ content | safe }}
13        </div>
14      </div>
15    </div>
16  </div>
17</article>

现在你有一个页面布局,你可以创建关于页面. 要做到这一点,在项目根上创建一个名为about的目录,并在其中添加一个新的index.md标记文件。

将以下代码添加到文件中:

1[label eleventy-blog/about/index.md]
2---
3title: About Me
4layout: layouts/page.njk
5---
6
7I am a person that writes stuff.

保存檔案後,請前往 https://localhost:8080/about. 該頁面應以所指定的布局正確加載。

About page

创建其他页面,如联系页面或通讯页面,可以以相同的方式进行:创建一个目录,该页面的名称,然后在新目录的根部添加一个 index.md 文件. 如果您喜欢,您也可以使用一个 HTML 或 Nunjucks 文件而不是 Markdown。

在此步骤中,您为静态页面创建了一个独特的布局,并将关于页面添加到网站中,在下一节中,您将创建和处理Eleventy网站上的博客文章。

第7步:创建帖子

创建博客文章非常类似于创建页面,您将通过在项目根部创建一个名为帖子的目录开始,以保持所有帖子。

但是,您将为帖子创建不同的布局. 它将与页面的布局相似,但您将包含一个日期来区分它. 在现实世界的项目中,您可能希望为帖子和页面创建不同的布局,因此为每个页面创建一个新的布局是很好的做法。

在_includes/layouts目录中,创建一个新的post.njk文件,并在文本编辑器中打开它。

 1[label eleventy-blog/_includes/layouts/post.njk]
 2---
 3layout: layouts/base.njk
 4---
 5
 6<section class="page-layout">
 7  <div class="container">
 8    <div class="columns">
 9      <div class="column is-8 is-offset-2">
10        <article class="content mt-5">
11          <h1 class="title">{{ title }}</h1>
12          <p class="subtitle is-6">
13            Published on: <time datetime="{{ page.date }}">{{ page.date }}</time>
14          </p>
15          {{ content | safe }}
16        </article>
17      </div>
18    </div>
19  </div>
20</section>

类似于「page.njk」模板,帖子模板扩展了基础模板,对帖子有意义的添加(如发布日期)。

要使用此模板,请在您的帖子目录中创建一个名为first-post.md的新文件,并在文本编辑器中打开它。

将以下内容粘贴到first-post.md文件中:

 1[label eleventy-blog/posts/first-post.md]
 2---
 3title: My First Blog Post
 4description: This is the first post on my blog
 5tags: post
 6date: 2021-06-19
 7layout: layouts/post.njk
 8---
 9
10You’ll find this post in your `posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `eleventy --serve`, which launches a web server and auto-regenerates your site when a file is updated.

保存文件,然后转到 http://localhost:8080/posts/first-post 在您的浏览器中. 注意URL是如何匹配的位置的文件在项目中(不包括扩展)。这是如何 URL 被处理的默认情况下,但他们可以被更改到一些其他格式通过 permalink键。

A blog post

此日期格式对于用户来说很难读取,但 Eleventy 没有为日期提供内置的格式选项,与大多数其他 SSGs 不同,这意味着您必须使用外部包才能在 Eleventy 中获得更易于人读的格式。

在此步骤中,您为博客帖子创建了一个独特的布局,并将博客帖子添加到网站中,在下一节中,您将创建自定义过滤器,以帮助日期格式化。

步骤8 — 在 Eleventy 中使用过滤器

Eleventy 支持过滤器以多种方式转换内容,例如,以前使用的 safe 过滤器可以防止 HTML 内容泄露,还有其他内置过滤器,如 `slug' 用于将文本转换为 URL 友好的字符串。您还可以添加自己的自定义过滤器,可用于任何模板。这些自定义可以通过配置文件进行。

继续,并添加一个通用过滤器格式日期,这样它可以在邮件模板中使用。开始通过安装 Luxon,一个轻量级的JavaScript库日期格式:

1npm install --save luxon

接下来,打开.eleventy.js 配置文件,并如下更新其内容:

 1[label eleventy-blog/.eleventy.js]
 2const { DateTime } = require('luxon');
 3
 4module.exports = function (eleventyConfig) {
 5  // Copy the `css` directory to the output
 6  eleventyConfig.addPassthroughCopy('css');
 7
 8  // Watch the `css` directory for changes
 9  eleventyConfig.addWatchTarget('css');
10
11  eleventyConfig.addFilter('readableDate', (dateObj) => {
12    return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat(
13      'dd LLL yyyy'
14    );
15  });
16};

突出列出的行描述了如何将自定义过滤器添加到 Eleventy. 首先,您需要从任何外部库导入任何所需的对象。

添加过滤器需要调用eleventy Config ' 论点提供的addFilter ()'方法。它将过滤器名称作为它的第一个参数,而回调功能是在使用过滤器时会执行的. 在上述片段中,过滤器被称作"可读数据"(ReadableDate),并使用回调功能来使用所提供的[日期符 (https://github.com/moment/luxon/blob/master/docs/formatting.md# table-of-tokens)格式化日期对象. 这将产生一个日期,格式如下:19 Jul 2021 .

保存配置文件并重新启动服务器,以便更改生效,然后在帖子模板中使用可读日期过滤器,如下所示,以根据指定的布局格式发布日期。

1[label eleventy-blog/_includes/layouts/post.njk]
2. . .
3<p class="subtitle is-6">
4  Published on: <time datetime="{{ page.date }}">{{ page.date | readableDate }}</time>
5</p>
6. . .

一旦您在浏览器中打开帖子,您会注意到日期格式已经更新。

Screenshot showing nicely formatted date

在此步骤中,您添加了一个过滤器来更改博客帖子的日期格式,在下一节中,您将在主页上显示帖子的列表,这在大多数个人博客上是常规的。

步骤9 - 在主页上显示帖子

为了让您的网站的访问者更容易发现博客上的帖子,最好在主页上列出这些帖子。您将使用 Eleventy 的 collections功能来实现此功能。

在您继续更新 index.njk 文件之前,您需要创建至少三个额外的帖子,以便在主页上展示。您可以将第一个帖子复制到新的文件中,并更改每个帖子的标题和描述。

 1[label eleventy-blog/index.njk]
 2---
 3title: Homepage
 4layout: layouts/base.njk
 5---
 6
 7<section class="hero is-medium is-primary is-bold">
 8  <div class="hero-body">
 9    <div class="container">
10      <h1 class="title">{{ site.title }}</h1>
11      <h2 class="subtitle">{{ site.description }}</h2>
12    </div>
13  </div>
14</section>
15
16<section class="postlist mt-3 pt-3">
17  <div class="container">
18    <h2 class="title has-text-centered mt-3 mb-6">Recent posts</h2>
19    <div class="columns">
20      {% for post in collections.post | reverse %}
21        {% if loop.index0 < 3 %}
22          <div class="column">
23            <div class="card">
24              <header class="card-header">
25                <p class="card-header-title">
26                  {{ post.data.title }}
27                </p>
28              </header>
29              <div class="card-content">
30                <div class="content">
31                  {{ post.data.description }}
32                </div>
33              </div>
34              <footer class="card-footer">
35                <a href="{{ post.url }}" class="button is-fullwidth is-link card-footer-item">Read article</a>
36              </footer>
37            </div>
38          </div>
39          {% endif %}
40      {% endfor %}
41    </div>
42  </div>
43</section>

for loop构建在上面的片段是从Nunjucks模板语言,它是复制在Eleventy中的一个集合的方式之一。它从 {% for post in collection.postimmo reverse %}开始,并以 {% endfor %}结束。该 post集合由Eleventy创建,由任何页面组成,其 tags前面物质属性设置为 post。

在这里使用反向过滤器,以便重复从最新的帖子开始,而不是默认的顺序,该顺序将较旧的帖子放在第一位。

保存文件后,前往浏览器的首页查看结果. 它应该看起来像下面的屏幕截图。

Eleventy recent posts output

在此步骤中,您创建了额外的博客帖子,并使用Eleventy的收藏功能来列出它们在网站的主页上. 您现在有一个有风格的网站,有主页,一个关于页面和一些帖子。

第10步:将网站推向GitHub

在你可以部署你的代码到DigitalOcean的应用平台之前,你需要把你的网站放在Git存储库中,然后将该存储库推到GitHub。

1git init

接下来,在项目根上创建一个.gitignore文件,这样你就可以排除node_modules和_site目录的内容在Git repo中被跟踪。

1[label .gitignore]
2node_modules
3_site

保存文件后,运行下面的命令,将所有项目文件添加到阶段区域,然后进行初始委托:

1git add -A
2git commit -m "Initial version of the site"

结果应该是这样的:

 1[secondary_label Output]
 2[master (root-commit) e4e2063] Initial version of the site
 3 15 files changed, 6914 insertions(+)
 4 create mode 100644 .eleventy.js
 5 create mode 100644 .gitignore
 6 create mode 100644 _data/site.json
 7 create mode 100644 _includes/layouts/base.njk
 8 create mode 100644 _includes/layouts/page.njk
 9 create mode 100644 _includes/layouts/post.njk
10 create mode 100644 _includes/nav.njk
11 create mode 100644 about/index.md
12 create mode 100644 css/style.css
13 create mode 100644 index.njk
14 create mode 100644 package-lock.json
15 create mode 100644 package.json
16 create mode 100644 posts/first-post.md
17 create mode 100644 posts/second-post.md
18 create mode 100644 posts/third-post.md

导航到 GitHub,使用您的个人资料登录,并为您的项目创建一个名为)。

1git remote add origin https://github.com/username/eleventy-blog.git

在将更改推到远程位置之前,将默认分支名更名为主要,以匹配GitHub的预期:

1git branch -M main

最后,运行下面的命令,将主分支推到GitHub。

注意:如果您的 GitHub 帐户已启用了双重身份验证,则在访问 GitHub 的命令行时需要使用个人访问代码或 SSH 密钥。有关更多信息,请参阅使用双重身份验证与命令行 <$>

1git push origin main

结果应该是这样的:

 1[secondary_label Output]
 2Enumerating objects: 23, done.
 3Counting objects: 100% (23/23), done.
 4Delta compression using up to 4 threads
 5Compressing objects: 100% (19/19), done.
 6Writing objects: 100% (23/23), 64.41 KiB | 2.38 MiB/s, done.
 7Total 23 (delta 3), reused 0 (delta 0)
 8remote: Resolving deltas: 100% (3/3), done.
 9To https://github.com/username/eleventy-blog.git
10 * [new branch]      main -> main

在此步骤中,您已将您的网站添加到 Git 存储库中,然后将其推到 GitHub. 您现在已经准备好将您的网站部署到 DigitalOcean 应用平台上。

步骤 11 — 使用应用平台部署到DigitalOcean

继续点击登录您的DigitalOcean帐户,然后转到 https://cloud.digitalocean.com/apps,然后点击右上角的绿色创建按钮。在下方选择** 应用程序** 选项,然后,在结果页面上,选择** GitHub** 作为您的来源。

DigitalOcean App Platform Source

您将被重定向到GitHub,并被要求给DigitalOcean访问您的存储库. 您可以选择所有存储库,或者只是您想要部署的存储库。点击 安装和授权 ,一旦您选择了。

Install and Authorize DigitalOcean on GitHub

在 Choose Source 页面上,选择 GitHub,然后从** Repository** dropdown 中选择eleventy-blog存储库. 确保所选择的分支是主要,并点击自动部署代码更改的检查框,然后点击** Next** 继续。

Configure GitHub source

在下一页,您的项目将自动检测为 Node.js 项目. 您可能需要将其 Type 更改为** Static Site** ,以及** Output Directory** 更改为 _site,如下图所示。

Configure application

命名您的静态网站,然后单击 下一步 进入** 完成和启动** 屏幕。

Name static website

静态网站是免费的,所以在计划下保留默认选项 Starter ,并按下页面底部的** Launch Starter App** 。

Launch starter app

您的网站将立即建立,您应该在几分钟后看到成功消息。

Site deployed to DigitalOcean’s App Platform

默认情况下,您的应用程序将在 ondigitalocean.app 上获得子域名. 现在您的网站已部署,您可以访问所提供的 URL 以在浏览器中查看现场网站。您还可以根据 How to Manage Domains in App Platform注册一个自定义域名。

结论

在本教程中,您使用 Eleventy 建立了一个静态网站,并部署到 DigitalOcean 应用平台上。前进时,您可以对您的网站进行更改,将更改推向 GitHub,DigitalOcean 将自动更新现场网站。您可以访问应用程序仪表板以查看构建进展。

以您在此教程中取得的成就为基础,访问Eventy docs,以了解您如何自定义您的网站模板,并添加诸如响应图像,语法突出,和caching等功能. 如果您希望快速启动而不从零开始创建自己的主题, 请检查 [启动项目页] (https://www.11ty.dev/docs/starter/).

如何创建和部署首个 Eleventy 网站

前提条件

步骤1 - 设置项目

步骤2 - 选择模板语言

步骤 4 — 添加导航菜单

步骤5 - 添加风格表

步骤6 — 创建一个关于页面

步骤8 — 在 Eleventy 中使用过滤器

步骤9 - 在主页上显示帖子

步骤 11 — 使用应用平台部署到DigitalOcean

结论