如何创建和部署您的第一个Eleventy网站

作为 Write for DOnations 计划的一部分，作者选择了 Internet Archive 来接收捐赠。

Eleventy（也称为11ty）是一个静态站点生成器（SSG），用于构建网站。它由 Zach Leatherman 于 2017 年推出，作为 Jekyll 的基于 JavaScript 的替代品，它是最早的主流 SSG 之一，它是用 Ruby 编写的。 Eleventy 作为构建静态网站的最灵活和性能最佳的选择之一而享有盛誉，导致 Jamstack 生态系统的采用率稳步上升。

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

虽然大多数其他 SSG 仅限于一种模板语言，但 Eleventy 支持多种模板语言，例如 HTML、Liquid、Markdown、Nunjucks、Handlebars、moustache、EJS、Haml、Pug 等，您可以甚至将它们组合在同一个项目中。这种灵活性是使 Eleventy 在竞争中脱颖而出的原因之一。

在本教程中，您将使用 Eleventy 从头开始开发一个静态网站，并将其免费部署到 DigitalOcean 的 App Platform。

先决条件

要完成本教程，您需要：

一个 DigitalOcean 帐户。
一个 GitHub 帐户。
在您的机器上安装和配置 Node.js，以及 Node.js 包管理器 npm。安装说明请参考【X36X】如何安装Node.js并创建本地开发环境【X105X】。请注意，撰写本文时 Eleventy 的最新版本 (v0.12.1) 需要 Node.js v10 或更高版本。
Git 在本地机器上初始化和设置。要开始使用 Git，请遵循如何为开源做出贡献：Git 入门。
HTML、CSS 和 JavaScript 的基本知识，您可以在我们的如何使用 HTML 构建网站系列、如何使用 CSS 构建网站系列和 [ X180X]如何在 JavaScript 中编码。

第 1 步 — 设置项目

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

第一步是在您的计算机上启动终端，在文件系统的某处创建一个新目录，然后更改为如下所示。

mkdir eleventy-blog
cd eleventy-blog

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

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

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

输出应与此类似：

Outputnode_modules  package-lock.json  package.json

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

十一博客/package.json

{
  "name": "eleventy-blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "eleventy",
    "start": "eleventy --serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^0.12.1"
  }
}

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

保存文件，然后运行以下命令来构建网站：

npm run build

输出应与此类似：

Output> eleventy-blog@1.0.0 build
> eleventy

Wrote 0 files in 0.04 seconds (v0.12.1)

输出表明您尚未创建任何文件，因此没有要构建的内容。在下一步中，您将开始添加网站所需的必要文件。

您将要处理的项目的最终目录结构如下所示。您将从一个空目录开始，并逐步添加新功能，直到您到达此结构。

.
├── about
│   └── index.md
├── css
│   └── style.css
├── _data
│   └── site.json
├── _includes
│   ├── layouts
│   │   ├── base.njk
│   │   ├── page.njk
│   │   └── post.njk
│   └── nav.njk
├── index.njk
├── node_modules
├── package.json
├── package-lock.json
├── posts
│   ├── first-post.md
│   ├── second-post.md
│   └── third-post.md
└── _site
    ├── about
    │   └── index.html
    ├── css
    │   └── style.css
    ├── index.html
    └── posts
        ├── first-post
        │   └── index.html
        ├── second-post
        │   └── index.html
        └── third-post
            └── index.html

在这一步中，您创建了一个 Node.js 项目并添加了 Eleventy 作为依赖项。在下一步中，您将选择一种模板语言。

第 2 步 — 选择模板语言

出于本教程的目的，我们将使用 Nunjucks 模板，这是许多 Eleventy 项目的常见选择。（根据您的喜好，您也可以选择不同的模板语言。）

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

十一博客/index.njk

<h1>Hello, world!</h1>

保存后，再次运行构建命令。它将 index.njk 文件转换为 index.html 文件，并将其输出到项目根目录下的新 _site 目录中。

npm run build

输出应与此类似：

Output> eleventy-blog@1.0.0 build
> eleventy

Writing _site/index.html from ./index.njk.
Wrote 1 file in 0.08 seconds (v0.12.1)

此时，您可以在http://localhost:8080处启动开发服务器，在浏览器中查看网站，如下图所示。

npm start

输出应与此类似：

Output> eleventy-blog@1.0.0 start
> eleventy --serve

Writing _site/index.html from ./index.njk.
Wrote 1 file in 0.08 seconds (v0.12.1)
Watching..
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:8080
    External: http://172.29.217.37:8080
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -----------------------------------
[Browsersync] Serving files from: _site

如果您希望使用不同的端口，您可以通过 --port 选项指定它，如下所示：

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

上面命令中的 -- 分隔符用于区分传递给 npm 命令本身的参数和传递给脚本的参数。启动开发服务器后，在 Web 浏览器中打开 http://localhost:8080 以查看运行中的站点。您可以随时通过按键盘上的 Ctrl + C 退出服务器。

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

第 3 步 — 创建主页

为了使您的项目从一开始就更加灵活和可扩展，您需要创建一个基本模板，该模板将应用于网站的所有页面。按照惯例，这称为 base 布局，它需要进入嵌套在 _includes 目录中的 layouts 目录。使用以下命令创建 _includes/layouts 目录：

mkdir -p _includes/layouts

在 _includes/layouts 目录中，创建一个 base.njk 文件并在文本编辑器中打开它。将以下代码复制并粘贴到文件中。这是基本的 HTML5 样板，将作为网站上所有页面的基础。

_includes/layouts/base.njk

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
</head>
<body>
  <header>
    <h1>{{ title }}</h1>
  </header>
  <main>
    {{ content | safe }}
  </main>
</body>
</html>

双花括号中的内容是 Nunjucks 变量，在构建衍生页面时将相应地替换它们。 模板:Title 变量将通过页面的前端块提供，而 模板:Content 将替换为不属于前端的所有传入页面内容。后者通过 safe 过滤器进行管道传输，以防止其被转义。

返回到你项目根目录下的index.njk文件，修改如下：

十一博客/index.njk

---
title: Homepage
layout: layouts/base.njk
---

<h1>Welcome to this brand new Eleventy website!</h1>

三重破折号两边的内容构成文件的前面内容，而文件的其余部分将作为 content 传递给您的布局。在前面的事情中，文件的title和layout是相应指定的。

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

从上面的截图可以看出，base.njk模板已经在首页生效了。

在此步骤中，您为站点页面添加了一个基本模板，并创建了一个主页。但是，除了浏览器默认设置之外，它还没有任何样式。在下一部分中，您将通过添加导航菜单来改进网站的设计。

第 4 步 — 添加导航菜单

_includes 目录是您放置网站不同组件的地方。这个目录的内容是部分文件，可以放在你的布局文件中以方便重用。在本节中，您将创建部分导航菜单，并将其包含在 base 布局中。

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

十一博客/_includes/nav.njk

<nav class="navbar is-light" role="navigation" aria-label="main navigation">
  <div class="navbar-start">
    <div class="navbar-item has-text-weight-bold">
      My Eleventy Blog
    </div>
  </div>
  <div class="navbar-end">
    <a href="/" class="navbar-item">
      Home
    </a>

    <a href="/about" class="navbar-item">
      About Me
    </a>
  </div>
</nav>

保存并关闭 nav.njk 文件，然后在编辑器中打开基本模板文件 (_includes/layouts/base.njk)。继续并通过如下所示的 include 语法在此文件中包含新的导航部分：

十一博客/_includes/layouts/base.njk

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ title }}</title>
  </head>
  <body>
    <header>{% include "nav.njk" %}</header>
    <main>
      {{ content | safe }}
    </main>
  </body>
</html>

在浏览器中，该站点应如下所示：

当您再次检查主页时，导航菜单应该会像上面的屏幕截图一样显示。网站“My Eleventy Blog”的标题被硬编码到 nav 部分，但这不是最理想的，因为您可能会在网站的其他地方重复标题，并且稍后更改它会变得乏味，因为您将然后必须找到它被使用的每个地方。

更好的方法是通过全局数据文件提供此值。这些是放置在项目根目录下的 _data 目录中的 JSON 文件，提供可供所有模板文件访问的全局数据。在项目根目录下，创建一个 _data 目录，然后在其中创建一个 site.json 文件。在文本编辑器中打开 site.json 并使用下面的代码指定站点的标题。

十一博客/_data/site.json

{
  "title": "My Eleventy Blog",
  "url": "https://example.com/",
  "language": "en-US",
  "description": "A simple blog with awesome content"
}

此时，您可以保存并关闭文件，然后返回_includes目录下的nav.njk文件，将硬编码的站点标题替换为适当的变量。

十一博客/_includes/nav.njk

. . .
<div class="navbar-item has-text-weight-bold">
  {{ site.title }}
</div>
. . .

该站点应该看起来与以前完全相同，但是这个小改动使设置和更新全局数据变得更加容易。关于全局变量需要注意的一点是，它们的作用域是 JSON 文件的名称，这就是我们在上面使用 模板:Site.title 的原因。您可以根据需要创建其他数据文件，并在模板中使用它们。例如，您可以拥有一个 author.json 文件，其中包含您的个人详细信息，例如您的姓名、简历和指向您的社交媒体资料的链接。然后可以通过网站任何页面上的变量（例如 模板:Author.bio）访问此类数据。

返回项目根目录下的 index.njk 文件并更新其内容，如下所示，以便它使用站点标题和描述：

十一博客/index.njk

---
title: Homepage
layout: layouts/base.njk
---

<section class="hero is-medium is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">{{ site.title }}</h1>
      <h2 class="subtitle">{{ site.description }}</h2>
    </div>
  </div>
</section>

在浏览器中，该站点应如下所示：

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

第 5 步 — 添加样式表

目前，Eleventy 无法识别 CSS 文件以自动包含在构建目录中，因此需要一些额外的步骤才能使其正常工作。具体来说，您需要创建一个样式表目录，并确保在构建站点时将其复制到构建输出 (_site)。您还需要确保修改样式表会触发 Web 浏览器中的重建和自动刷新。您可以通过为 Eleventy 创建一个配置文件来实现这一点。

在项目根目录中，创建一个 css 文件夹，然后在其中创建一个 style.css 文件。打开 style.css 并使用以下代码导入 Bulma CSS 框架：

十一博客/css/style.css

@import "https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css";

保存文件。

接下来，在您的项目根目录中创建一个 .eleventy.js 文件。这是 Eleventy 的配置文件，类似于 Jekyll 项目中的 _config.yml 文件。请注意，此文件将隐藏在您的文件系统中，因为它以句点为前缀。在列出目录的内容时，您需要使用 ls -a 来显示它。

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

十一博客/.eleventy.js

module.exports = function (eleventyConfig) {
  // Copy the `css` directory to the output
  eleventyConfig.addPassthroughCopy('css');

  // Watch the `css` directory for changes
  eleventyConfig.addWatchTarget('css');
};

此时，您需要使用 Ctrl+C 停止服务器，并在更改生效之前使用 npm start 重新启动它。每次修改配置文件时都需要这样做。

如果您现在在浏览器中查看该网站，您不会注意到任何更改。这是因为样式表尚未在任何模板中链接。继续并将其添加到 base.njk 模板中，如下所示。

十一博客/_includes/layouts/base.njk

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/style.css" />
    <title>{{ title }}</title>
  </head>
  <body>
    <header>{% include "nav.njk" %}</header>
    <main>
      {{ content | safe }}
    </main>
  </body>
</html>

保存文件后，样式应立即生效。

在这一步中，您使用 Bulma CSS 框架为网站添加了样式。在下一步中，您将通过创建“关于”页面来扩展站点。

第 6 步 - 创建关于页面

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

在编辑器中打开新文件并使用以下代码填充它。前面的 layout 属性用于表示 page 布局应该继承之前创建的 base.njk 模板。这称为布局链接，它允许我们重用模板，同时添加特定于新模板的独特元素，这有助于避免不必要的基本站点结构重复。

十一博客/_includes/layouts/page.njk

---
layout: layouts/base.njk
---

<article class="page-layout">
  <div class="container">
    <div class="columns">
      <div class="column is-8 is-offset-2">
        <div class="content mt-5">
          <h1>{{ title }}</h1>
          {{ content | safe }}
        </div>
      </div>
    </div>
  </div>
</article>

现在您已经有了页面布局，您可以创建“关于”页面。为此，在项目根目录创建一个名为 about 的目录，并在其中添加一个新的 index.md 降价文件。

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

十一博客/about/index.md

---
title: About Me
layout: layouts/page.njk
---

I am a person that writes stuff.

保存文件后，进入https://localhost:8080/about。该页面应使用指定的布局正确加载。

创建其他页面，例如联系页面或新闻通讯页面，可以用相同的方式完成：创建一个具有页面名称的目录，然后在新目录的根目录添加一个 index.md 文件。如果您愿意，也可以使用 HTML 或 Nunjucks 文件代替 Markdown。

在这一步中，您为静态页面创建了一个独特的布局，并向站点添加了一个“关于”页面。在下一部分中，您将在 Eleventy 网站上创建和处理博客文章。

第 7 步 - 创建帖子

创建博客文章与创建页面非常相似。您将首先在项目根目录创建一个名为 posts 的目录来保存所有帖子。

但是，您将为帖子创建不同的布局。它将类似于 pages 的布局，但您将包含一个日期来区分它。在实际项目中，您可能需要不同的帖子和页面布局，因此最好为每个布局创建一个新布局。

在 _includes/layouts 目录中，创建一个新的 post.njk 文件并在文本编辑器中打开它。将下面的代码粘贴到您的 post.njk 布局文件中。

十一博客/_includes/layouts/post.njk

---
layout: layouts/base.njk
---

<section class="page-layout">
  <div class="container">
    <div class="columns">
      <div class="column is-8 is-offset-2">
        <article class="content mt-5">
          <h1 class="title">{{ title }}</h1>
          <p class="subtitle is-6">
            Published on: <time datetime="{{ page.date }}">{{ page.date }}</time>
          </p>
          {{ content | safe }}
        </article>
      </div>
    </div>
  </div>
</section>

类似于 page.njk 模板，帖子模板扩展了基本模板，添加了对帖子有意义的添加（例如发布日期）。

要使用此模板，请在 posts 目录中创建一个名为 first-post.md 的新文件，然后在文本编辑器中打开它。

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

十一博客/posts/first-post.md

---
title: My First Blog Post
description: This is the first post on my blog
tags: post
date: 2021-06-19
layout: layouts/post.njk
---

You’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 键将它们更改为其他格式。

帖子显示正确，但请注意日期当前的格式。这种日期格式对用户来说很难阅读，但 Eleventy 没有提供内置的日期格式选项，这与大多数其他 SSG 不同。这意味着您必须使用外部包才能在 Eleventy 中获得更易于阅读的格式。

在此步骤中，您为博客文章创建了一个独特的布局，并将博客文章添加到站点。在下一部分中，您将创建一个有助于日期格式化的自定义过滤器。

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

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

继续添加用于格式化日期的通用过滤器，以便它可以在帖子模板中使用。首先安装 Luxon，这是一个用于日期格式化的轻量级 JavaScript 库：

npm install --save luxon

之后，打开 .eleventy.js 配置文件，更新其内容如下：

十一博客/.eleventy.js

const { DateTime } = require('luxon');

module.exports = function (eleventyConfig) {
  // Copy the `css` directory to the output
  eleventyConfig.addPassthroughCopy('css');

  // Watch the `css` directory for changes
  eleventyConfig.addWatchTarget('css');

  eleventyConfig.addFilter('readableDate', (dateObj) => {
    return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat(
      'dd LLL yyyy'
    );
  });
};

突出显示的行描述了如何向 Eleventy 添加自定义过滤器。首先，您需要从任何外部库中导入您需要的任何对象。 Luxon 的 DateTime 类型提供了多种格式化方法。

添加过滤器涉及调用 eleventyConfig 参数提供的 addFilter() 方法。它将过滤器名称作为其第一个参数，回调函数是在使用过滤器时将执行的。在上面的代码片段中，过滤器称为 readableDate，回调函数用于使用提供的日期标记格式化日期对象。这将产生以下格式的日期：19 Jul 2021。

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

十一博客/_includes/layouts/post.njk

. . .
<p class="subtitle is-6">
  Published on: <time datetime="{{ page.date }}">{{ page.date | readableDate }}</time>
</p>
. . .

在浏览器中打开帖子后，您会注意到日期格式已更新。

在此步骤中，您添加了一个过滤器来更改博客文章的日期格式。在下一部分中，您将在主页上显示帖子列表，这与大多数个人博客上的常规做法一样。

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

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

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

十一博客/index.njk

---
title: Homepage
layout: layouts/base.njk
---

<section class="hero is-medium is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">{{ site.title }}</h1>
      <h2 class="subtitle">{{ site.description }}</h2>
    </div>
  </div>
</section>

<section class="postlist mt-3 pt-3">
  <div class="container">
    <h2 class="title has-text-centered mt-3 mb-6">Recent posts</h2>
    <div class="columns">
      {% for post in collections.post | reverse %}
        {% if loop.index0 < 3 %}
          <div class="column">
            <div class="card">
              <header class="card-header">
                <p class="card-header-title">
                  {{ post.data.title }}
                </p>
              </header>
              <div class="card-content">
                <div class="content">
                  {{ post.data.description }}
                </div>
              </div>
              <footer class="card-footer">
                <a href="{{ post.url }}" class="button is-fullwidth is-link card-footer-item">Read article</a>
              </footer>
            </div>
          </div>
          {% endif %}
      {% endfor %}
    </div>
  </div>
</section>

上面片段中的 for 循环结构来自 Nunjucks 模板语言，它是 Eleventy 中迭代集合的方法之一。它以 {% for post in collection.post | reverse %} 开始，以 {% endfor %} 结束。 post 集合由 Eleventy 创建，由 tags 前端属性设置为 post 的任何页面组成。

此处使用 reverse 过滤器，以便迭代从最近的帖子开始，而不是默认顺序，将旧帖子放在首位。在循环内，集合的输出被限制为三个项目，并且 post 局部变量用于访问集合中每个帖子的标题、描述和 URL。

保存文件后，在浏览器中进入首页查看结果。它应该类似于下面的屏幕截图。

在此步骤中，您创建了其他博客文章并使用 Eleventy 的收藏功能将它们列出在网站的主页上。您现在拥有一个带有主页、“关于”页面和一些帖子的样式化网站。接下来，您将通过 GitHub 和 DigitalOcean 的应用平台将其部署到生产环境。

第 10 步——将网站推送到 GitHub

在您可以将代码部署到 DigitalOcean 的应用平台之前，您需要将您的站点放在 Git 存储库中，并将该存储库推送到 GitHub。首先要做的是在您的项目目录中初始化一个 Git 存储库：

git init

接下来，在项目根目录创建一个 .gitignore 文件，以便您可以排除 node_modules 和 _site 目录的内容，使其不被 Git 存储库跟踪。

.gitignore

node_modules
_site

保存文件后，运行以下命令将所有项目文件添加到暂存区，然后进行初始提交：

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

输出应与此类似：

Output[master (root-commit) e4e2063] Initial version of the site
 15 files changed, 6914 insertions(+)
 create mode 100644 .eleventy.js
 create mode 100644 .gitignore
 create mode 100644 _data/site.json
 create mode 100644 _includes/layouts/base.njk
 create mode 100644 _includes/layouts/page.njk
 create mode 100644 _includes/layouts/post.njk
 create mode 100644 _includes/nav.njk
 create mode 100644 about/index.md
 create mode 100644 css/style.css
 create mode 100644 index.njk
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 posts/first-post.md
 create mode 100644 posts/second-post.md
 create mode 100644 posts/third-post.md

导航到 GitHub，使用您的个人资料登录，然后为您的项目创建一个名为 eleventy-blog 的新空存储库（它可以是公共的或私有的）。创建 GitHub 存储库后，将链接复制到存储库，并将其添加为终端中项目的远程位置：

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

在将更改推送到远程位置之前，将默认分支重命名为 main 以匹配 GitHub 的期望：

git branch -M main

最后，运行以下命令将 main 分支推送到 GitHub。出现提示时输入您的 GitHub 帐户凭据。

注意：如果您的 GitHub 帐户启用了双因素身份验证，则在命令行访问 GitHub 时需要使用个人访问令牌或 SSH 密钥。有关详细信息，请参阅在命令行中使用双因素身份验证。

git push origin main

输出应与此类似：

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

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

第 11 步 — 使用 App Platform 部署到 DigitalOcean

继续登录您的DigitalOcean帐户，然后前往https://cloud.digitalocean.com/apps并单击右上角的绿色创建按钮。在下拉列表中选择 Apps 选项，然后在结果页面上选择 GitHub 作为您的源。

您将被重定向到 GitHub，并提示您授予 DigitalOcean 访问您的存储库的权限。您可以选择所有存储库，或者只选择您希望部署的存储库。做出选择后，单击安装和授权。您应该再次被重定向回 Choose Source 页面。

在 Choose Source 页面上，选择 GitHub，然后从 Repository 下拉列表中选择 eleventy-blog 存储库。确保选中的分支是main，勾选自动部署代码更改复选框，然后单击下一步继续。

在下一页上，您的项目将被自动检测为 Node.js 项目。您可能需要将其 Type 更改为 Static Site，并将 输出目录 更改为 _site，如下面的屏幕截图所示。一切匹配后，单击 Next 继续。

命名您的静态站点，然后单击 Next 转到 Finalize and Launch 屏幕。

静态站点是免费的，所以在Plans下保留默认的Starter选择，然后在页面底部按Launch Starter App。

您的网站将立即构建，几分钟后您应该会看到一条成功消息。

默认情况下，您的应用将在 ondigitalocean.app 上获得子域。现在您的站点已部署，您可以访问提供的 URL 以在浏览器中查看实时网站。您也可以按照如何在应用平台管理域为您的站点注册一个自定义域。

结论

在本教程中，您使用 Eleventy 构建了一个静态站点并部署到 DigitalOcean 的应用平台。展望未来，您可以在本地对您的网站进行更改，将更改推送到 GitHub，DigitalOcean 将自动更新实时站点。您可以随时前往app仪表板查看构建进度。

要以您在本教程中取得的成果为基础，请访问 Eleventy 文档以了解有关如何自定义站点模板以及添加响应式图像、等功能的更多信息语法高亮和缓存。如果您想快速上手而不需要从头开始创建自己的主题，请查看入门项目页面。