最初の11のWebサイトを作成して展開する方法

著者は、 Write for DOnations プログラムの一環として、 InternetArchiveを選択して寄付を受け取りました。

11 （11tyとも呼ばれます）は、Webサイトを構築するための静的サイトジェネレーター（SSG）です。これは、Rubyで記述された最初の主流SSGの1つである Jekyll のJavaScriptベースの代替として、 ZachLeathermanによって2017年に発売されました。 11は、静的Webサイトを構築するための最も柔軟でパフォーマンスの高いオプションの1つとして評判を得ており、Jamstackエコシステムでの採用率が着実に上昇しています。

EleventyはJavaScriptフレームワークではなく、クライアント側のJavaScriptは含まれていないことに注意してください。 HTML、Markdown、または選択したテンプレート言語で指定されたテンプレートファイルを受け取り、選択したWebサーバーに展開する準備ができた完全な静的Webサイトを出力します。

他のほとんどのSSGは1つのテンプレート言語に制限されていますが、Eleventy は、HTML、Liquid、Markdown、Nunjucks、Handlebars、moustache、EJS、Haml、Pugなどの複数のテンプレート言語をサポートしています。同じプロジェクトでそれらを組み合わせることもできます。この柔軟性は、Eleventyを競合他社から際立たせるものの1つです。

このチュートリアルでは、Eleventyを使用して静的Webサイトを最初から開発し、DigitalOceanの AppPlatformに無料でデプロイします。

前提条件

このチュートリアルを完了するには、次のものが必要です。

DigitalOceanアカウント。
GitHubアカウント。
Node.jsは、Node.jsパッケージマネージャーであるnpmとともに、マシンにインストールおよび構成されています。インストール方法については、Node.jsのインストール方法とローカル開発環境の作成方法に従ってください。執筆時点でのEleventyの最新バージョン（v0.12.1）には、Node.jsv10以降が必要であることに注意してください。
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プロパティを下の強調表示された行に置き換えます。

11-blog / 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"
  }
}

ここには2つのスクリプトがあります。Webサイトファイルを作成するためのbuildと、http://localhost:8080で11のWebサーバーを実行するためのstartです。

ファイルを保存してから、以下のコマンドを実行してWebサイトを構築します。

npm run build

出力は次のようになります。

Output> [email protected] build
> eleventy

Wrote 0 files in 0.04 seconds (v0.12.1)

出力は、まだファイルを作成していないことを示しているため、ビルドするものはありません。次のステップでは、Webサイトに必要なファイルの追加を開始します。

作業するプロジェクトの最終的なディレクトリ構造を以下に示します。空のディレクトリから開始し、この構造に到達するまで新しい機能を段階的に追加します。

.
├── 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 テンプレートを使用します。これは、多くの11のプロジェクトで一般的に選択されています。（好みに応じて、別のテンプレート言語を選択することもできます。）

プロジェクトディレクトリのルートに、index.njkファイルを作成し、テキストエディタで開きます。以下に示すように、ファイルに「Helloworld」メッセージを追加してからファイルを保存します。

11-blog / index.njk

<h1>Hello, world!</h1>

保存したら、ビルドコマンドを再度実行します。 index.njkファイルをindex.htmlファイルに変換し、プロジェクトのルートにある新しい_siteディレクトリに出力します。

npm run build

出力は次のようになります。

Output> [email protected] build
> eleventy

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

この時点で、以下に示すようにhttp://localhost:8080で開発サーバーを起動することにより、ブラウザーでWebサイトを表示できます。

npm start

出力は次のようになります。

Output> [email protected] 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を使用し、Webサイトの構築を開始しました。次のセクションでは、Eleventyのレイアウトについて学習し、Webサイトのホームページを作成します。

ステップ3—ホームページを作成する

プロジェクトを最初からより柔軟でスケーラブルにするために、サイトのすべてのページに適用されるベーステンプレートを作成する必要があります。従来、これはbaseレイアウトと呼ばれ、_includesディレクトリ内にネストされたlayoutsディレクトリに移動する必要があります。以下のコマンドを使用して、_includes/layoutsディレクトリを作成します。

mkdir -p _includes/layouts

_includes/layoutsディレクトリに、base.njkファイルを作成し、テキストエディタで開きます。次のコードをコピーしてファイルに貼り付けます。これは、Webサイトのすべてのページの基盤として機能する基本的な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ファイルに戻り、次のように変更します。

11-blog / index.njk

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

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

トリプルダッシュの両側の内容はファイルの前書きを構成し、ファイルの残りの部分はcontentとしてレイアウトに渡されます。前書きでは、ファイルのtitleとlayoutがそれに応じて指定されています。

開発サーバーがまだ実行中の場合は、サイトのローカルホストURLにアクセスして変更を表示するか、サーバーを最初にnpm startで起動してから、Webブラウザーで表示してみてください。

上のスクリーンショットからわかるように、base.njkテンプレートがホームページに有効になっています。

このステップでは、サイトのページの基本テンプレートを追加し、ホームページを作成しました。ただし、ブラウザのデフォルト以外のスタイルはまだありません。次のセクションでは、ナビゲーションメニューを追加して、Webサイトのデザインを改善します。

ステップ4—ナビゲーションメニューの追加

_includesディレクトリは、Webサイトのさまざまなコンポーネントを配置する場所です。このディレクトリの内容は、再利用を容易にするためにレイアウトファイルに配置できる部分的なファイルです。このセクションでは、ナビゲーションメニューを部分的に作成し、baseレイアウトに含めます。

_includesディレクトリに、nav.njkという名前の新しいファイルを作成します。エディターで開き、以下のコードを入力します。これはトップナビゲーションバーのマークアップであり、サイトのタイトル、ホームページへのリンク、およびまだ作成されていない「About」ページが含まれています。

11-blog / _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構文を使用して、このファイルに新しいナビゲーションパーシャルを含めます。

11-blog / _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>

ブラウザでは、サイトは次のようになります。

ホームページをもう一度確認すると、上のスクリーンショットのようにナビゲーションメニューが表示されます。サイト「MyEleventyBlog」のタイトルは、navの部分にハードコードされていますが、サイトの他の場所でタイトルを繰り返す可能性があり、後で変更するのは面倒になるため、これは最適ではありません。次に、それが使用された各場所を見つける必要があります。

より良いアプローチは、グローバルデータファイルを介してこの値を提供することです。これらは、プロジェクトルートの_dataディレクトリに配置されたJSONファイルであり、すべてのテンプレートファイルにアクセスできるグローバルデータを提供します。プロジェクトルートで、_dataディレクトリを作成し、その中にsite.jsonファイルを作成します。テキストエディタでsite.jsonを開き、以下のコードを使用してサイトのタイトルを指定します。

11-blog / _data / site.json

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

この時点で、ファイルを保存して閉じ、_includesディレクトリのnav.njkファイルに戻り、ハードコードされたサイトタイトルを適切な変数に置き換えることができます。

11-blog / _includes / nav.njk

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

サイトは以前とまったく同じように見えるはずですが、この小さな変更により、グローバルデータの設定と更新がはるかに簡単になります。グローバル変数について注意すべきことの1つは、それらがJSONファイルの名前にスコープされていることです。そのため、上記でテンプレート:Site.titleを使用しました。必要に応じて他のデータファイルを作成し、それらをテンプレートで使用できます。たとえば、名前、経歴、ソーシャルメディアプロファイルへのリンクなどの個人情報を含むauthor.jsonファイルを作成できます。このようなデータには、Webサイトの任意のページの変数（テンプレート:Author.bioなど）を介してアクセスできます。

プロジェクトルートのindex.njkファイルに戻り、以下に示すようにその内容を更新して、サイトのタイトルと説明を使用するようにします。

11-blog / 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>

ブラウザでは、サイトは次のようになります。

このステップでは、Webサイトにナビゲーションメニューを追加しました。ただし、サイトはデフォルトのスタイルを使用しています。次のセクションでは、 Bullma CSSフレームワークを使用してWebサイトのスタイルを設定します。これは、レスポンシブWebサイトを構築するためのフレックスボックスベースのフロントエンドコンポーネントを提供します。

ステップ5—スタイルシートを追加する

現時点では、Eleventyはビルドディレクトリに自動包含されるCSSファイルを認識しないため、これを機能させるにはいくつかの追加手順が必要です。具体的には、スタイルシートディレクトリを作成し、サイトのビルド時にビルド出力（_site）にコピーされるようにする必要があります。また、スタイルシートを変更すると、Webブラウザで再構築と自動更新がトリガーされることを確認する必要があります。これは、Eleventyの構成ファイルを作成することで実現できます。

プロジェクトルートで、cssフォルダーを作成し、その中にstyle.cssファイルを作成します。 style.cssを開き、以下のコードを使用して BullmaCSSフレームワークをインポートします。

11-blog / css / style.css

@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

ファイルを保存します。

次に、プロジェクトルートに.eleventy.jsファイルを作成します。これは、Jekyllプロジェクトの_config.ymlファイルに似た、Eleventyの構成ファイルです。このファイルの前にはピリオドが付いているため、このファイルはファイルシステムで非表示になることに注意してください。ディレクトリの内容を一覧表示するときに表示するには、ls -aを使用する必要があります。

テキストエディタで.eleventy.jsを開き、以下を貼り付けて、ビルドにcssディレクトリを含め、フォルダの変更を監視します。

11-blog / .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テンプレートに追加します。

11-blog / _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>

ファイルを保存した後、スタイルはすぐに開始されます。

このステップでは、BulmaCSSフレームワークを使用してWebサイトにスタイルを追加しました。次のステップでは、「About」ページを作成してサイトを拡張します。

ステップ6—バージョン情報ページを作成する

現時点では、ナビゲーションメニューに存在しない「About」ページへのリンクがあります。これを変更するには、すべての静的ページに固有のレイアウトを作成し、その後、「About」ページ自体を作成します。 _includes/layoutsフォルダーに、page.njkファイルを作成します。これは、サイト上のすべての静的ページのレイアウトになります。

エディターで新しいファイルを開き、以下のコードを入力します。前書きのlayoutプロパティは、pageレイアウトが以前に作成されたbase.njkテンプレートから継承する必要があることを示すために使用されます。これはレイアウトチェーンと呼ばれ、新しいテンプレートに固有の固有の要素を追加しながらテンプレートを再利用できるため、基本的なサイト構造の不必要な繰り返しを回避できます。

11-blog / _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」ページを作成できます。これを行うには、プロジェクトルートにaboutというディレクトリを作成し、その中に新しいindex.mdマークダウンファイルを追加します。

次のコードをファイルに追加します。

11-blog / about / index.md

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

I am a person that writes stuff.

ファイルを保存したら、https://localhost:8080/aboutに移動します。ページは、指定されたレイアウトで正しく読み込まれるはずです。

連絡先ページやニュースレターページなどの他のページの作成も同じ方法で行うことができます。ページの名前でディレクトリを作成し、新しいディレクトリのルートにindex.mdファイルを追加します。必要に応じて、Markdownの代わりにHTMLまたはNunjucksファイルを使用することもできます。

このステップでは、静的ページの一意のレイアウトを作成し、サイトに「About」ページを追加しました。次のセクションでは、EleventyWebサイトでブログ投稿を作成して処理します。

ステップ7—投稿を作成する

ブログ投稿の作成は、ページの作成と非常によく似ています。プロジェクトルートにpostsというディレクトリを作成して、すべての投稿を保持することから始めます。

ただし、投稿には別のレイアウトを作成します。 pagesのレイアウトに似ていますが、区別するために日付を含めます。実際のプロジェクトでは、投稿とページに異なるレイアウトが必要になる可能性が高いため、それぞれに新しいレイアウトを作成することをお勧めします。

_includes/layoutsディレクトリに、新しいpost.njkファイルを作成し、テキストエディタで開きます。以下のコードをpost.njkレイアウトファイルに貼り付けます。

11-blog / _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ファイルに貼り付けます。

11-blog / 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が処理される方法ですが、パーマリンクキーを使用して他の形式に変更できます。

投稿は正しく表示されますが、日付が現在どのようにフォーマットされているかに注意してください。この日付形式はユーザーが読むのが難しいですが、他のほとんどのSSGとは異なり、Eleventyには日付の組み込みの形式オプションがありません。これは、Eleventyでより人間が読める形式を取得するには、外部パッケージを使用する必要があることを意味します。

このステップでは、ブログ投稿の独自のレイアウトを作成し、ブログ投稿をサイトに追加しました。次のセクションでは、日付の書式設定に役立つカスタムフィルターを作成します。

ステップ8—11でフィルターを使用する

Eleventyは、さまざまな方法でコンテンツを変換するためのfiltersをサポートしています。たとえば、以前に使用したsafeフィルタは、HTMLコンテンツのエスケープを防ぎます。また、テキストをURLに適した文字列に変換するためのslugなどの組み込みフィルタがあります。任意のテンプレートで使用できる独自のカスタムフィルターを追加することもできます。これらのカスタマイズは、構成ファイルを介して行うことができます。

先に進み、投稿テンプレートで使用できるように、日付をフォーマットするためのユニバーサルフィルターを追加します。日付をフォーマットするための軽量JavaScriptライブラリであるLuxonをインストールすることから始めます。

npm install --save luxon

その後、.eleventy.js構成ファイルを開き、その内容を次のように更新します。

11-blog / .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と呼ばれ、コールバック関数は、提供された日付トークンを使用して日付オブジェクトをフォーマットするために使用されます。これにより、次の形式の日付が生成されます：2021年7月19日。

構成ファイルを保存し、サーバーを再起動して、変更を有効にします。次に、以下に示すように、投稿テンプレートのreadableDateフィルターを使用して、指定されたレイアウトに従って投稿日をフォーマットします。

11-blog / _includes / layouts / post.njk

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

ブラウザで投稿を開くと、日付の書式が更新されていることがわかります。

このステップでは、ブログ投稿の日付形式を変更するためのフィルターを追加しました。次のセクションでは、ほとんどの個人ブログで一般的であるように、ホームページに投稿のリストを表示します。

ステップ9—ホームページに投稿を表示する

サイトへの訪問者がブログの投稿を見つけやすくするために、ホームページに投稿をリストすることをお勧めします。この機能を実装するには、Eleventyのコレクション機能を使用します。

index.njkファイルの更新に進む前に、ホームページに表示するために少なくとも3つの追加の投稿を作成する必要があります。最初の投稿を新しいファイルにコピーして、それぞれのタイトルと説明を変更できます。それが終わったら、以下に示すようにindex.njkファイルを更新します。

11-blog / 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>

上記のスニペットのforloop 構造は、Nunjucksテンプレート言語からのものであり、Eleventyのコレクションを反復処理する方法の1つです。 {% for post in collection.post | reverse %}で始まり、{% endfor %}で終わります。 postコレクションはEleventyによって作成され、tagsフロントマタープロパティがpostに設定されているページで構成されます。

ここではreverseフィルターを使用して、古い投稿を最初に配置するデフォルトの順序ではなく、最新の投稿から反復を開始します。ループ内では、コレクションの出力は3つのアイテムに制限され、postローカル変数を使用して、コレクション内の各投稿のタイトル、説明、およびURLにアクセスします。

ファイルを保存した後、ブラウザのホームページに移動して結果を確認します。以下のスクリーンショットのようになります。

このステップでは、追加のブログ投稿を作成し、Eleventyのコレクション機能を使用してそれらをWebサイトのホームページに一覧表示しました。これで、ホームページ、「About」ページ、およびいくつかの投稿を備えたスタイル付きWebサイトができました。次に、GitHubとDigitalOceanのAppPlatformを介して本番環境にデプロイします。

ステップ10—WebサイトをGitHubにプッシュする

コードをDigitalOceanのAppPlatformにデプロイする前に、サイトを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アカウントで2要素認証が有効になっている場合、コマンドラインでGitHubにアクセスするときに、個人アクセストークンまたはSSHキーを使用する必要があります。詳細については、コマンドラインでの2要素認証の使用を参照してください。

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にプッシュしました。これで、WebサイトをDigitalOceanのAppPlatformにデプロイする準備が整いました。

ステップ11—AppPlatformを使用したDigitalOceanへのデプロイ

先に進み、 DigitalOceanアカウントにログインしてから、https://cloud.digitalocean.com/appsに移動し、右上の緑色の作成ボタンをクリックします。ドロップダウンでAppsオプションを選択し、表示されたページで、ソースとしてGitHubを選択します。

GitHubにリダイレクトされ、DigitalOceanにリポジトリへのアクセスを許可するように求められます。すべてのリポジトリーを選択することも、デプロイしたいリポジトリーだけを選択することもできます。選択したら、[インストールして承認]をクリックします。もう一度ソースの選択ページにリダイレクトされます。

ソースの選択ページでGitHubを選択し、リポジトリドロップダウンからeleventy-blogリポジトリを選択します。選択したブランチがmainであり、コード変更を自動デプロイするためのチェックボックスがオンになっていることを確認してから、次へをクリックして続行します。

次のページで、プロジェクトはNode.jsプロジェクトとして自動検出されます。次のスクリーンショットに示すように、タイプを静的サイトに変更し、出力ディレクトリを_siteに変更する必要がある場合があります。次へをクリックして、すべてが一致したら続行します。

静的サイトに名前を付け、次へをクリックしてファイナライズして起動画面に移動します。

静的サイトは無料なので、プランの下のデフォルトのスターターの選択を保持し、ページの下部にあるスターターアプリの起動を押します。

サイトはすぐに構築され、数分後に成功メッセージが表示されます。

デフォルトでは、アプリにはondigitalocean.appのサブドメインが割り当てられます。これでサイトが展開されたので、提供されたURLにアクセスして、ブラウザーでライブWebサイトを表示できます。 App Platformでドメインを管理する方法に従って、サイトのカスタムドメインを登録することもできます。

結論

このチュートリアルでは、Eleventyを使用して静的サイトを構築し、DigitalOceanのAppPlatformにデプロイしました。今後は、ローカルでWebサイトに変更を加え、変更をGitHubにプッシュすると、DigitalOceanがライブサイトを自動的に更新します。アプリダッシュボードに移動すると、いつでもビルドの進行状況を確認できます。

このチュートリアルで達成したことを基に、11のドキュメントにアクセスして、サイトのテンプレートをカスタマイズする方法の詳細を確認し、レスポンシブ画像、などの機能を追加してください。構文の強調表示、およびキャッシュ。独自のテーマを最初から作成せずにすばやく開始したい場合は、スタータープロジェクトページを確認してください。