最初の11のWebサイトを作成して展開する方法
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がマシンにインストールおよび構成され、
npm、Node.jsパッケージマネージャー。 インストール方法については、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 ディレクトリ、プロジェクトを初期化する package.json とファイル npm init -y、およびを渡すことにより、開発依存関係としてEleventyをインストールします。 -D にフラグを立てる 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 以下の強調表示された行を持つプロパティ。
{
"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つのスクリプトがあります。 build ウェブサイトファイルを構築するため、および start EleventyWebサーバーを実行するため http://localhost:8080.
ファイルを保存してから、以下のコマンドを実行して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」メッセージを追加してからファイルを保存します。
<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)
この時点で、次の場所で開発サーバーを起動することにより、ブラウザでWebサイトを表示できます。 http://localhost:8080 以下に示すように。
- 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
The -- 上記のコマンドの区切り文字は、に渡されるパラメーターを区別するために使用されます npm スクリプトに渡されたものからコマンド自体。 開発サーバーを起動したら、 http://localhost:8080 Webブラウザーで、サイトの動作を確認します。 を押すと、いつでもサーバーを終了できます Ctrl + C キーボードで。
このステップでは、テンプレート言語としてNunjucksを使用し、Webサイトの構築を開始しました。 次のセクションでは、Eleventyのレイアウトについて学習し、Webサイトのホームページを作成します。
ステップ3—ホームページを作成する
プロジェクトを最初からより柔軟でスケーラブルにするために、サイトのすべてのページに適用されるベーステンプレートを作成する必要があります。 従来、これは base レイアウト、そしてそれはに入る必要があります layouts 内にネストされたディレクトリ _includes ディレクトリ。 を作成します _includes/layouts 以下のコマンドを使用してディレクトリ：
- mkdir -p _includes/layouts
の中に _includes/layouts ディレクトリ、作成 base.njk ファイルを作成し、テキストエディタで開きます。 次のコードをコピーしてファイルに貼り付けます。 これは、Webサイトのすべてのページの基盤として機能する基本的なHTML5ボイラープレートです。
<!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変数であり、派生ページが作成されるときにそれに応じて置き換えられます。 The {{ title }} 変数はページのフロントマターブロックを介して提供されますが、 {{ content }} フロントマターの一部ではないすべての受信ページコンテンツに置き換えられます。 後者はパイプで送られます safe 逃げるのを防ぐためのフィルター。
に戻る 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—ナビゲーションメニューの追加
The _includes ディレクトリは、Webサイトのさまざまなコンポーネントを配置する場所です。 このディレクトリの内容は、再利用を容易にするためにレイアウトファイルに配置できる部分的なファイルです。 このセクションでは、ナビゲーションメニューを部分的に作成し、それをに含めます。 base レイアウト。
の中に _includes ディレクトリ、という名前の新しいファイルを作成します nav.njk. エディターで開き、以下のコードを入力します。 これはトップナビゲーションバーのマークアップであり、サイトのタイトル、ホームページへのリンク、およびまだ作成されていない「About」ページが含まれています。
<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 以下に示す構文：
<!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 部分的ですが、サイトの他の場所でタイトルを繰り返す可能性があり、使用された場所を見つける必要があるため、後でタイトルを変更するのは面倒なので、これは最適ではありません。
より良いアプローチは、グローバルデータファイルを介してこの値を提供することです。 これらは、に配置されたJSONファイルです。 _data すべてのテンプレートファイルにアクセスできるグローバルデータを提供するプロジェクトルートのディレクトリ。 プロジェクトルートで、 _data ディレクトリ、その後に site.json その中のファイル。 開ける site.json テキストエディタで、以下のコードを使用してサイトのタイトルを指定します。
{
"title": "My Eleventy Blog",
"url": "https://example.com/",
"language": "en-US",
"description": "A simple blog with awesome content"
}
この時点で、ファイルを保存して閉じてから、に戻ることができます。 nav.njk のファイル _includes ディレクトリを作成し、ハードコードされたサイトのタイトルを適切な変数に置き換えます。
. . .
<div class="navbar-item has-text-weight-bold">
{{ site.title }}
</div>
. . .
サイトは以前とまったく同じように見えるはずですが、この小さな変更により、グローバルデータの設定と更新がはるかに簡単になります。 グローバル変数について注意すべきことの1つは、それらがJSONファイルの名前にスコープされていることです。これが、私たちが使用した理由です。 {{ site.title }} その上。 必要に応じて他のデータファイルを作成し、それらをテンプレートで使用できます。 たとえば、 author.json 名前、経歴、ソーシャルメディアプロファイルへのリンクなどの個人情報を含むファイル。 このようなデータには、変数（たとえば、 {{ author.bio }}）ウェブサイトの任意のページ。
あなたに戻る 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 以下のコードを使用して、 BulmaCSSフレームワークをインポートします。
@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";
ファイルを保存します。
次に、を作成します .eleventy.js プロジェクトルートのファイル。 これは、Eleventyの構成ファイルであり、次のようになります。 _config.yml Jekyllプロジェクトのファイル。 このファイルの前にはピリオドが付いているため、このファイルはファイルシステムで非表示になることに注意してください。 使用する必要があります ls -a ディレクトリの内容を一覧表示するときに表示されるようにします。
開ける .eleventy.js テキストエディタで以下を貼り付けて、 css ビルド内のディレクトリ、および変更がないかフォルダを監視します。
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 以下に示すテンプレート。
<!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 テンプレート。 これはレイアウトチェーンと呼ばれ、新しいテンプレートに固有の固有の要素を追加しながらテンプレートを再利用できるため、基本的なサイト構造の不必要な繰り返しを回避できます。
---
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 その中のマークダウンファイル。
次のコードをファイルに追加します。
---
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 レイアウトファイル。
---
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 ファイル：
---
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コンテンツのエスケープを防ぎ、他にも次のような組み込みのものがあります。 slug テキストをURLに適した文字列に変換します。 任意のテンプレートで使用できる独自のカスタムフィルターを追加することもできます。 これらのカスタマイズは、構成ファイルを介して行うことができます。
先に進み、投稿テンプレートで使用できるように、日付をフォーマットするためのユニバーサルフィルターを追加します。 日付をフォーマットするための軽量JavaScriptライブラリであるLuxonをインストールすることから始めます。
- npm install --save luxon
その後、 .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にカスタムフィルターを追加する方法を示しています。 まず、外部ライブラリから必要なオブジェクトをインポートする必要があります。 The DateTime Luxonのtypeは、フォーマットの目的でいくつかのメソッドを提供します。
フィルタを追加するには、 addFilter() によって提供されるメソッド eleventyConfig 口論。 これは最初の引数としてフィルター名を取り、コールバック関数はフィルターが使用されるときに実行されるものです。 上記のスニペットでは、フィルターは readableDate、およびコールバック関数は、提供された日付トークンを使用して日付オブジェクトをフォーマットするために使用されます。 これにより、次の形式の日付が生成されます：2021年7月19日。
構成ファイルを保存し、サーバーを再起動して、変更を有効にします。 次に、 readableDate 以下に示すように投稿テンプレートをフィルタリングして、指定されたレイアウトに従って投稿日をフォーマットします。
. . .
<p class="subtitle is-6">
Published on: <time datetime="{{ page.date }}">{{ page.date | readableDate }}</time>
</p>
. . .
ブラウザで投稿を開くと、日付の書式が更新されていることがわかります。
このステップでは、ブログ投稿の日付形式を変更するためのフィルターを追加しました。 次のセクションでは、ほとんどの個人ブログで一般的であるように、ホームページに投稿のリストを表示します。
ステップ9—ホームページに投稿を表示する
サイトへの訪問者がブログの投稿を見つけやすくするために、ホームページに投稿をリストすることをお勧めします。 この機能を実装するには、Eleventyのコレクション機能を使用します。
更新に進む前に index.njk ファイルの場合、ホームページに表示するには、少なくとも3つの追加の投稿を作成する必要があります。 最初の投稿を新しいファイルにコピーして、それぞれのタイトルと説明を変更できます。 それが終わったら、更新します 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 %}. The post コレクションはEleventyによって作成され、 tags フロントマタープロパティをに設定 post.
The 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リポジトリでディレクトリが追跡されないようにします。
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のドキュメントにアクセスして、サイトのテンプレートをカスタマイズする方法の詳細を確認し、レスポンシブ画像、などの機能を追加してください。構文の強調表示、およびキャッシュ。 独自のテーマを最初から作成せずにすばやく開始したい場合は、スタータープロジェクトページを確認してください。
