11個の静的サイトジェネレーターの簡単なツアー

静的サイトジェネレーターは現在非常にàlamodeであり、 JAMStack が最近の多くのWebプロジェクトで実行可能な代替手段になっているので、不思議ではありません。

JAMStackであろうとなかろうと、静的サイトジェネレーター（SSG）は、従来のCMSに比べていくつかの大きな利点があり、SSGに関しては、豊富なオプションから選択できます。 Jekyll、Hugo、Gatsby、Next.jst、Sapper、…オーマイ！

私は最近、Spiral11と呼ばれる私のプロジェクトに最適な静的サイトジェネレータオプションを探して買い物をしていました。ギャツビーは画像の最適化などの最新の機能を備えているため、最初はギャツビーに傾倒していましたが、その後、11をさらに見て、恋に落ちました。

11tyは使いやすく、邪魔にならず、入れたものを正確に吐き出すので、驚きや隠されたコードの膨張はありません。最も基本的な11tyは、作業ディレクトリから見つけたファイルを静的HTMLファイルにコンパイルするだけです。さらに、JavaScriptで記述されているため、プロジェクトで使用できるパッケージに関してnpm全体にアクセスできます。

ツアーに参加して、それがどのように機能するかを見てみましょう…

11のサイト設定

npmまたはYarnを使用して、マシンにEleventyをグローバルにインストールすることから始めます。

# with npm
$ npm install -g @11ty/eleventy

# with Yarn
$ yarn global add @11ty/eleventy

これで、有効なテンプレートファイルを含む任意のディレクトリでeleventyコマンドを実行できます。

たとえば、best-site-everというディレクトリがあり、その中にindex.mdファイルがあるとします。

index.md

## Chomp Chomp **Chomp** 🐊🐊🐊

これで、そのディレクトリでeleventyを実行できます。これで、Eleventyがindex.htmlファイルを含む_siteディレクトリを作成します。

_site / index.html

<h2>Chomp Chomp <strong>Chomp</strong> 🐊🐊🐊</h2>

テンプレート言語と言えば、たくさんのオプションがあります。 Markdown、Nunjucks、Liquid、Mustacheなどを使用できます。また、組み合わせて使用できるため、Liquidで作成したファイルと、NunjucksとEleventyで作成したファイルですべてが正常に処理されます。

11のコマンドオプション

eleventyコマンドは、いくつかの有用なフラグも受け入れます。例えば：

–watch ：プロジェクトファイルのいずれかが変更されたときに出力ファイルを書き換えます。
–serve ：ローカルWebサーバーを介して出力されたサイトにサービスを提供し、変更を監視します。
–dryrun ：実際にファイルを出力せずに処理をテストします。
–output ：別の出力場所を指定します。

つまり、ローカルで作業する場合は、次のコマンドを使用して変更を提供し、再構築する必要があります。

$ eleventy --serve

ディレクトリ構造

Eleventyを使用すると、お気に入りのテンプレート言語を自由に選択できるだけでなく、独自のディレクトリ構造を選択することもできます。

プロジェクトに別のマークダウンファイルがあるとしますが、今回は2つのネストされたサブディレクトリにあります。

/one/two/blog-post.md

One day *I will write* my 1st blog post!

eleventyを実行すると、_siteの出力は次のようになります。

📁 _site/
  index.html
  📁 one/
    📁 two/
      📁 blog-post/
        index.html

したがって、ディレクトリ構造が保持され、ファイル名がslug / URIとして使用され、Eleventyが出力されたテンプレートごとにHTML出力を含むindex.htmlファイルを含むディレクトリを作成することに気付くでしょう。

最終出力に異なる方法で反映されるディレクトリにファイルを整理したい場合はどうなりますか？簡単です。上部のフロントマターセクション内で特定のテンプレートのパーマリンクを指定するだけです。

/one/two/blog-post.md

---
permalink: '/blog-post/'
---

One day *I will write* my 1st blog post!

eleventyをもう一度実行すると、blog-postが_siteのルートレベルに表示されることがわかります。このように、パーマリンクを指定すると、完全な柔軟性が得られます。

フロントの問題

フロントマターと言えば、あらゆる種類のメタデータをその中に入れることができ、それをレイアウトで利用できるようになります（これについては後で詳しく説明します）。たとえば、投稿のタイトル、メタ説明/抜粋、タグなどを指定し、ほとんどのキーに任意の名前を付けることができます。

説明する例を次に示します。

/one/two/blog-post.md

---
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
permalink: '/blog-post/'
emotion: happy
tags:
  - blog
  - getting-started
---

One day *I will write* my 1st blog post!

コレクション

ここではこのトピックについて深く掘り下げることはしません。詳細については、ドキュメントをお読みください。ただし、Eleventyは、前書きで提供したタグを使用してコレクションにデータを入力します。コレクションは繰り返し使用できます。たとえば、カテゴリページなどの他のテンプレートで。

allと呼ばれる特別なコレクションもあり、デフォルトではすべての投稿が含まれています。 allコレクションを使用すると、不要な投稿/ページを含むサイトマップのようなものになる可能性があるため、コレクションに投稿またはページを含めることをオプトアウトする簡単な方法があります。

---
eleventyExcludeFromCollections: true
---

レイアウト

これまでのところ、作成したマークダウンファイルからHTMLを出力するだけです。ほとんどの場合、このようなマークダウンファイルは、ボイラープレートHTML、ヘッダー、ナビゲーションバー、サイドバー、フッターなどを提供するためにレイアウトでラップする必要があります。

デフォルトでは、レイアウトテンプレートは_includesディレクトリにあります。

Nunjucks構文を使用していくつかのサンプルレイアウトを作成しましょう。 1つはHTMLボイラープレートを使用したデフォルトのレイアウトになり、もう1つはブログのレイアウトになります。

_includes / default.njk

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

_includes / blog.njk

---
layout: default
---

<h1>{{ title }}</h1>
<div>
  Published on {{ date }}
</div>

<article>
  {{ content | safe }}
</article>

ご覧のとおり、レイアウトは別のレイアウトを呼び出すことができ、レイアウトは通常のテンプレートファイルの前にあるデータにアクセスできます。

レイアウトは、コンテンツテンプレートの前書きで指定することで使用できます。

---
layout: blog.njk
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
---

One day *I will write* my 1st blog post!

11の構成

これまでのところ、構成ファイルに触れることなくすべてを実行してきました。これは、Eleventyの使用の単純さを示しています。しかし、Webサイトが複雑になるにつれて、いくつかの構成オプションを設定できるようになりたいと思うでしょう。これは、プロジェクトのルートにある.eleventy.jsファイルで行うことができます。

静的アセットを出力ディレクトリにコピーし、別の出力ディレクトリ名（public）を指定するサンプル構成ファイルを次に示します。

.eleventy.js

module.exports = eleventyConfig => {
  // Copy our static assets to the output folder
  eleventyConfig.addPassthroughCopy('css');
  eleventyConfig.addPassthroughCopy('js');
  eleventyConfig.addPassthroughCopy('images');

  // Returning something from the configuration function is optional
  return {
    dir: {
      output: 'public'
    }
  };
};

HTML出力の縮小、プラグインの使用、ショートコードの構成など、構成ファイルでさまざまなことを実行できます。繰り返しになりますが、構成できるものについて詳しくは、ドキュメントをご覧ください。しかし、最初に圧倒され始めた場合は、デフォルトでEleventyは構成ファイルさえ必要とせず、構成ファイルがなくてもほとんどの面倒な作業を実行できることを覚えておいてください。

スターターの使用

これまで、サイトを最初から作成して、どのように機能するかを確認してきましたが、多くの場合、好みの方法で既に構成および/またはスタイル設定された優れたベースから始めたいと思うでしょう。ここで11tyスターターのリストを閲覧できます。

私は個人的にSkeleventyスターターが本当に好きです。これはスタイリングにTailwindCSS を使用し、PurgeCSSで構成されて本番環境で未使用のスタイルを取り除きます。ブログを始める場合は、公式の11のブログスターターも始めるのに最適な場所です。

詳細はこちら

✨✨この簡単な紹介は以上ですが、次のリソースを確認して、詳細を確認することをお勧めします。

公式ドキュメント
このLearnWithJasonエピソード、 Zach Leatherman 、Eleventyの作成者