11個の静的サイトジェネレーターの詳細

公開: 2022-03-10

簡単な要約↬11 （別名11ty）は、静的サイトジェネレーターの中でランクが上がっています。このノードベースのビルダーは、ゼロ構成の開始点、純粋に静的な出力、および4つの完璧な100の切望された最高のLighthouseパフォーマンススコアを簡単に達成できるため、魅力的です。他に何がユニークなのかを掘り下げて、うまく始めるのに役立ついくつかの重要な概念について学びましょう。

しかし、最初に—「静的サイト」が何を意味するのかを簡単に確認してから、ジェネレーターが何を提供するのかを簡単に確認しましょう。静的サイトは静的コンテンツで構成されています。たとえば、HTML、CSS、アセット、およびすべてのコンテンツは、Webサイトホストにプッシュする前にすでに一緒にコンパイルされています。これは、実行時にデータベースにクエリを実行してそれらをコンパイルする動的サイト（WordPressなど）や、クライアント側のAPIからコンテンツをプルする動的サイト（サーバー側レンダリングのないJavaScriptフレームワークなど）とは異なります。

静的サイトジェネレーターは、コンテンツを静的HTMLにコンパイルするための環境およびビルドプロセッサーです。それらは通常、コンテンツを書く際の柔軟性を提供するヘルパーを提供し（Markdownのサポートなど）、テンプレートを作成するためのメソッドを含みます。したがって、HTMLページを1つずつ記述し、繰り返される部分をコピーして貼り付ける代わりに、ジェネレーターは、特定のテンプレート言語を介してそれらをコンポーネントに分割することをサポートします。次に、ジェネレーターのビルドプロセスにより、すべてがまとめられ、WebホストとしてアップロードしてWebサイトとして提供できる最終的なHTMLが出力されます。使用するウェブホストによっては、このビルドプロセスをホストが実行することもできます。

利用可能な多くの静的サイトジェネレータがあります。 Jekyll、Hugo、Gatsby、Next、Nuxtのようなものを聞いたことがあるか、使用したことがあるかもしれません。包括的なリストはJamstack.orgによって提供されます。

11が他の静的サイトジェネレーターと異なる点は何ですか？

11は、ビルド中とブラウザー内の両方で非常に高速です。これは主に、コンテンツを提供するためにクライアント側のJavaScriptバンドルをロードする必要がないためです（Gatsbyのようなものと比較して）。ファイルシステムページの作成はデフォルトで静的HTMLであるため、サーバー側のレンダリングはここでは問題になりません。

Eleventyを本当にユニークにしているのは、最大10の異なるテンプレート言語から選択して混合できることです。

HTML、Markdown、JavaScript、Liquid、Nunjucks Handlebars、Mustache、EJS、Haml、Pugなどの利用可能なテンプレート言語をリストした11ty.devドキュメントのスクリーンショット。（大プレビュー）

言語の混合は、同じファイル内、またはレイアウト間で発生する可能性があります。たとえば、NunjucksレイアウトにフィードするMarkdownを使用してメインコンテンツを作成することがよくあります。一部のプロジェクトでは、Markdownファイル内でNunjucksを使用して一部のデータをループできると便利であることがわかりました。言語を組み合わせるこの機能は非常に強力であり、自分とプロジェクトに最適な書き込みとビルドのワークフローを設計できます。

11には、BrowserSyncを使用してサイトをローカルで提供し、ファイルの変更時にホットリロードを有効にする--serveフラグが含まれています。これは非常に便利であり、静的サイトジェネレーターを探しているのではなく、Gulpなどのビルドツールからのアップグレードを探している場合は覚えておくとよいでしょう。

ゼロ構成の一部として、すべてのサイトファイルがプロジェクトのルートに存在する可能性があります。入力ディレクトリと出力ディレクトリを変更するには、Eleventy構成を作成できます。これは、 .eleventy.jsというルートファイルであることが期待されています。この変更を行う方法を示す簡単なスニペットを次に示します。

 module.exports = function (eleventyConfig) { return { dir: { // default: [site root] input: "src", // default: _site output: "public", }, }; };

前述のように、デフォルトの動作はファイルシステムページの作成であり、これは一般的に、特に迅速に開始する場合に非常に役立ちます。これは、カスタムpermalinkを割り当てることで簡単にオーバーライドでき、ファイルごと、ディレクトリ全体、またはデータセットに対して動的に実行できます。パーマリンクはまた、私たちが少し探求するもう一つの超大国を提供します！

ユニークなことに、ビルド中に、JavaScriptを使用し、フィルターとショートコードを活用することで、コンテンツ、データ、およびそのコンテンツとデータの変換を準備できます（これらについては後で説明します）。繰り返しになりますが、これはすべて、JavaScriptバンドルをクライアント側に追加せずに、テンプレート言語としてJavaScriptを使用できるようにしながら行われます。

重要な注意： JavaScriptの知識がなくても、知識が少なくても、Eleventyを正常に使用できます。

Gatsbyのような他のSSGやWordPressのような環境とは異なり、ほとんどの11のサイトはプラグインを必要としません。利用可能なプラグインがいくつかありますが、それらは基本的な機能には必要ありません。

Eleventyで構築する場合、必要に応じて機能を追加できます。実際、HTMLを使用するだけで、他のテンプレート言語を使用することはできません。 11は、プロジェクトに必要なだけ複雑です。

ジャンプした後もっと！以下を読み続けてください↓

重要な11の概念を理解する

11のプロジェクトを成功させるのに役立ついくつかの用語と概念を見ていきましょう。

レイアウトとテンプレート

これらの用語は互換性があると考えるかもしれませんが、11の文脈では、文脈上の意味があります。

テンプレートは、すべてのコンテンツファイルの総称です。
レイアウトは、他のコンテンツをラップする特別なテンプレートです。

たとえば、テンプレートはすべてのMarkdownファイルを参照しますが、レイアウトはHTML5ボイラープレートとテンプレートコンテンツ用のスロットを含むNunjucksファイルである可能性があります。開始のセクションで、これを機能させる方法を学習します。

フィルタとショートコード

これらは、コンテンツ出力を変更し、再利用可能なテンプレートパーツを作成するための追加の方法です。これらは、Nunjucks、Liquid、Handlebars、およびJavaScriptテンプレートで使用できます。フィルタとショートコードは.eleventy.js内で定義されています。

選択したテンプレート言語で使用できる変数と演算子に加えて、Eleventyは、以前にリストされた言語間でフィルターの概念を統一しました。フィルタは、コンテンツタイプに固有の方法でコンテンツを変換します。たとえば、文字列を大文字にするためのフィルタを作成できます。または、ランダムなアイテムを選択するなど、返されるものを変更するために配列で使用することを目的としたフィルターがある場合があります。一部のフィルターはEleventyによって提供されており、そのうちのいくつかは入門チュートリアルで使用します。

ショートコードを使用すると、再利用可能なテンプレートパーツを作成でき、引数を受け入れることができます。これらはスタンドアロンでもペアでもかまいません。つまり、コンテンツを開始タグと終了タグでラップします。

私のお気に入りのショートコードの1つは、現在の年をレンダリングすることです。つまり、フッターに著作権の年が古くなることはありません。 yearのショートコードを作成する方法は次のとおりです。

 eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

NunjucksまたはLiquidテンプレートで使用するには、次のようになります： {% year %} 。

ペアのショートコードの例については、11のドキュメントを確認できます。

コレクション

コレクションは関連するコンテンツのグループであり、通常、 tagsを定義することによってフロントマター内に作成されます。タグ構文オプションには、単一の文字列、複数の単一行配列— ["tagA", "tagB"] —、または複数のタグを割り当てるYAMLスタイルのリストが含まれます。たとえば、「ページ」コレクションを作成するには、そのコレクションに含めたいすべてのコンテンツに次のフロントマターを追加します。

 --- tags: pages ---

コレクションを定義すると、グローバルcollectionsオブジェクト内で選択したテンプレート言語を介してコレクションにアクセスできます。「pages」コレクションにアクセスするには、 collections.pagesのようになります。これにより、そのコレクションのデータの配列が返されるため、リンクのリストや記事のティーザーカードを作成するなど、コレクションをループするなどの配列操作を実行できます。通常のファイル出力を抑制し、コレクションのみを使用してデータ表示を管理することもできます。これは、単一ページのサイトコンテンツの管理に役立ちます。

カスタムデータ

これまで、コンテンツをファイルとして作成することについて説明してきましたが、Eleventyを使用すると、さまざまなデータソースを非常に簡単に管理できます。これは「カスタムデータ」と呼ばれ、JavaScriptモジュールのエクスポートまたは_dataディレクトリ内のJSONファイルとして機能します。

カスタムデータは次の目的で使用できます。

基本的なJSON配列を定義します。
フェッチ操作の結果を返します。
ヘッドレスCMSからコンテンツを取得して再フォーマットします。

11は、ファイル名に一致する変数の下で_data内のすべてのデータを使用できるようにします。たとえば、 posts.jsonを作成すると、テンプレートでpostsとしてアクセスできます。 Nunjucksを使用して、 postsデータをループする例を次に示します。

 {% for post in posts %} {{ post.title }} {% endfor %}

データからのページ付けとページの作成

11の用語では、ページネーションとは、データセットを反復処理し、そのデータ「チャンク」の出力用のテンプレートを定義することを指します。これは、frontmatter内のページネーションを定義する専用ファイルを使用して行われます。このファイルには、データの目的の出力の設定も含まれています。つまり、データも独自のテンプレートになります。コンテンツを送信するレイアウトを定義したり、タグを追加してコレクションを作成したりして、参照しやすく、出力に柔軟性を持たせることができます。

注：カスタムデータを使用してCMSからコンテンツを取得する場合、ページ付けは、そのデータを動的にページに変換するために探している11の方法です。

これは、ヘッドレスCMSからのフェッチを介して取得していると想定するpostsカスタムデータを参照する例です。重要なのは、 sizeが1に設定されていることです。これは、各「ページネーションチャンク」が1ページの出力を生成する必要があることを意味します。次に、 aliasを使用してページネーションループ内の現在のアイテムへの参照を作成し、その参照をpermalink定義とテンプレート本体で使用します。

ページネーションを定義するファイルは、入力ディレクトリ内のどこにでも配置できます。私の組織の好みは、 generateディレクトリを作成し、作成するコレクションと同じ名前を付けることです。以下をsrc/generate/posts.njkと見なします。

 --- pagination: data: posts size: 1 alias: post addAllPagesToCollections: true permalink: "/{{ post.title | slug }}/" tags: posts layout: post templateEngineOverride: njk, md --- {{ post.body | safe }}

この場合、 permalinkは、サイトルートから直接出力されるページを割り当てています。これを変更して、 /posts/{{ post.title | slug }}などのプレフィックスを追加できます。 /posts/{{ post.title | slug }} 、例えば。

さらに、生成されたすべてのページをタグによって作成されたコレクションで使用できるようにする場合は、 addAllPagesToCollectionsをtrueに設定して、最初のアイテムより多くを含める必要があります。

最後に、コンテンツがプリコンパイルされたHTMLではなくMarkdownとして受信される場合は、 templateEngineOverrideを使用する必要があります。スニペットの例では、 njk, mdに設定しました。これは、変数を変換するためにテンプレートコンテンツをNunjucksとして処理し、次に変数で返されたコンテンツをコンパイルするためにMarkdownとして処理する必要があることを意味します。

safeとはどういう意味か疑問に思っているなら、次にそれを学びましょう！

11を始める方法

了解しました。これで、最初の11プロジェクトを開始する準備が整いました。この簡単なチュートリアルは、構築を継続するための開始構造を整えるのに役立ちます。すでに学んだ概念を使用し、いくつかの新しいアイデアも追加します。

ここでの最初の重要な注意点は、Eleventyはスコープ付きパッケージであるため、インストールコマンドは次のとおりです。

 npm install @11ty/eleventy

次に、私がやりたい便利なのは、次のスクリプトをpackage.jsonに追加することです。

 "scripts": { "start": "eleventy --serve", "build": "eleventy" }

前述のように、 --serveフラグは、BrowserSyncを介してローカルサーバーを有効にします。

私の好みは、すでに見たように入力/出力ディレクトリを更新することです。それで、今度はsrcまたは選択した入力ディレクトリ内にコンテンツを作成します。

プロジェクトを最初からより柔軟でスケーラブルにするために、HTML5ボイラープレートを含むレイアウトを少なくとも1つ作成することをお勧めします。レイアウトは、直接呼び出される_includes内で定義する必要があります。これは、予想される数少ないディレクトリの1つです。

初心者の間でよく見られる慣習は、このレイアウトbaseを呼び出すことです。私はそれをNunjucksファイルにすることを好みます。

これがサンプル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変数はEleventyによって提供され、すべての着信する非フロントマターコンテンツが配置されるスロットをマークします。重要なことに、これは、コンパイルされたHTMLがエスケープまたはレンダリングされるのを防ぐ提供されたsafeフィルターと組み合わせて使用されます。

次に、サイトインデックスを作成します。これをindex.mdとして追加します。

 --- title: Hello Smashing Readers! layout: base.njk --- Thanks for reading — hope you're excited to try Eleventy!

前書きでタイトルを追加し、レイアウトも定義したことに注意してください。

この時点で、追加したスクリプトnpm startを使用してプロジェクトを実行できます。これにより、BrowserSyncがトリガーされてlocalhost:8080がセットアップされます（使用可能な場合）が、ブラウザーで手動で開く必要があります。ブラウザを自動的に開く場合は、このクイックヒントを確認してください。

最後の重要なステップは、スタイルシートを追加することです。現在、CSSは自動的に含まれるファイルタイプとして認識されないため、スタイルシートを作成した後、追加の構成手順が1つあります。

css/style.cssなど、入力ディレクトリの好きな場所にCSSファイルを追加できます。次に、 .eleventy.jsを開き（または、入出力のカスタマイズを行わなかった場合はプロジェクトルートに作成します）、以下を追加します。

 module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/css/"); eleventyConfig.addWatchTarget("./src/css/"); // - input/output customization if using - };

まず、 cssディレクトリを「パススルーコピー」として追加します。これは、Eleventyが出力ディレクトリへのプッシュに含める必要があることを意味します。次に、これを「ウォッチターゲット」として追加し、 startコマンドの実行中にスタイルを変更すると、Eleventyが再構築をトリガーしてローカルサイトを更新します。

最後に、 baseレイアウト内のスタイルシートへのリンクを追加することを忘れないでください。

 <link rel="stylesheet" href="{{ '/css/style.css' | url }}" />

スタイルシートの場所を定義するとき、ビルド時に必要に応じて相対ファイルパスを調整するEleventyのurlフィルターを通過させます。

次に、コレクションとレイアウトをもう少し使用して探索する「ページ」投稿タイプを作成しましょう。これを行うには、 pagesのディレクトリを追加し、 titleのフロントマターキーを含むがレイアウトを含まない1つまたは2つのMarkdownファイルを作成します。

今回は、少し異なる方法を使用してレイアウトを定義します—データディレクトリファイル。このファイルは通常JSONとしてフォーマットされており、ディレクトリ内のすべてのファイルに適用する必要のあるデータを追加できるため、ファイル間でデータを複製する必要がありません。ファイルには、使用するディレクトリと同じ名前を付ける必要があるため、ファイルpages.jsonを作成し、次のコンテンツを追加します。

 { "layout": "page.njk", "tags": "pages" }

また、「ページ」コレクションを作成するためにタグを定義しました。ただし、定義したレイアウトは実際にはまだ存在しないため、 _includes/page.njkを作成し、以下を追加します。

 --- layout: base.njk --- <article> {{ content | safe }} </article>

ここでは、レイアウトチェーンの11の概念を使用して、 baseテンプレートを再利用できるだけでなく、 pageレイアウトに一意の要素である<article>を追加できるようにしています。これは、ページのすべてのコンテンツがpageレイアウトとbaseレイアウトの両方を使用することを意味します。

レイアウトチェーンは、ボイラープレートとベースサイトのレイアウト構造を再利用できるようにすることで、重複を減らします。

pagesコンテンツタイプのコンテンツを作成し、タグを介して「ページ」コレクションとして定義したので、そのコレクションにアクセスする方法を見てみましょう。ここでは、Nunjucksを使用してコレクションをループし、各ページへのリンクのリストを出力します。このループは、 index.mdファイル内に追加されます。

 {% for post in collections.post -%} - [{{ post.data.title }}]({{ post.url }}) {% endfor %}

ループの内側が実際にMarkdownに戻ってリンクをレンダリングするという、ユニークなことをしました。これは、このシナリオを処理するために必須の方法ではありませんが、非常に便利です。複雑さによっては、これが機能しない場合があります。本当の理由は、MarkdownレンダラーがデフォルトでLiquidテンプレート言語になっているため、基本的なループ以外のNunjucks機能を使用している場合は、ファイルの処理方法をEleventyに通知する必要があります。

ページネーションに関する前のセクションでは、実際にこれに対する解決策をすでに検討しました。そしてそれは、 templateEngineOverrideを利用して、ファイルをNunjucksとMarkdownの両方として処理する必要があることを示すことです。次の完全なソリューションをテンプレートの最前線に配置する必要があります： templateEngineOverride: njk, md 。

この時点で、基本的な複数ページのサイトが作成されました。外部データを使用する必要がある場合は、ページネーションのセクションに戻ってください。

11のプロジェクトを開始する他の方法

WordPressのような他の静的サイトジェネレーターや環境には「テーマ」の概念がありますが、Eleventyでは「スターター」という用語を使用しています。選択できるコレクションは増え続けており、その多くは11のドキュメント内のリストにあります。

私の好みは、11のプロジェクトでSassを使用することです。ビルドプロセスにSassを追加する方法を知りたい場合は、Sassスターターを利用できます。他の人は、アセットと処理のためのパイプラインを構築することに慣れている場合、Gulpを追加することを選択できます。

また、この記事で説明した機能を含み、チュートリアルの結果との類似点を共有する最小限のスターターを作成しました。また、外部データをフェッチする小さな例があり、コレクションに基づいてサイトナビゲーションを表示するためにパーシャルを追加する方法を示しています。

基本を拡張する

基本的なコンテンツとカスタムデータを使用して最初のサイトを作成してみたら、そのコンテンツを操作するための追加の方法を知っておくと役に立ちます。ここに、知っておくべき他のいくつかの概念の簡単な概要があります。

パーマリンクを使用したファイル出力タイプの変更

パーマリンクには超大国があることを先に述べました。つまり、それらを使用してHTML以外のファイルタイプを出力できます。

2つの便利な例は、RSSフィードとサイトマップの作成です。どちらも通常はXMLファイルです。本当に強力なのは、選択したテンプレート言語を引き続き使用してこれらのファイルを生成できることです。たとえば、Nunjucksを使用してページデータをループし、RSSフィードを最新の状態に保つことができます。

コレクションのカスタマイズ

タグを使用してコレクションを作成するだけでは不十分な場合があります。または、既存のコレクションのフィルタリングされたバリエーションを作成することもできます。提供されている一連の関数を使用して、コレクションを変更または作成できます。これらは.eleventy.jsファイルに存在します。

この例では、 addCollection関数を使用して、既存のコレクション内のアイテムをフィルタリングしています。新しいコレクションは、フロントマター内のcustomKeyの存在に基づいています。このキーは、生成されたすべての11個のコンテンツに添付されているdataオブジェクトから返されます。

 eleventyConfig.addCollection("specialCollection", function (collection) { return collection.getAll().filter((post) => post.data.customKey); });

11のドキュメントで、コレクションを作成、変更、および使用する他の方法を確認できます。

データカスケードの操作

11には、データカスケードと呼ばれるテンプレート用にデータをコンパイルする方法についてのより完全な概念があります。これは、このガイドで調査を始めたばかりです。ドキュメントから始めて、それがどのように機能するかを確認すると、Eleventyを最大限に活用できます。 Ben Myersには、データカスケードを理解するための優れたガイドもあります。

推奨される11個のプラグイン

イントロで、プラグインが利用可能であると簡単に述べましたが、それらは常に必要なわけではありません。ただし、ほとんどのプロジェクトで使用する傾向のあるものがいくつかあります。これには次のものが含まれます。

@ 11ty / 11ty-plugin-rss RSSフィードが必要な場合、この公式プラグインには、フィードの生成に役立ついくつかのフィルターが用意されています。リンクされたリポジトリにはサンプルフィードが含まれており、一部のスターターでも使用されている場合があります。
@ 11ty / eleventy-plugin-syntaxhighlight Prismをコード強調表示のスクリプトとしてロードする代わりに、このプラグインを使用すると、その処理を11ビルドプロセスの一部として適用できます。つまり、コードブロックは、事前にPrismテーマを適用するためのクラスを含むように変換されるため、選択したPrismCSSテーマを追加するだけで済みます。
@ 11tyrocks / 11tyrocks / eleventy-plugin-social-images 11回目の調査の早い段階で探していた機能は、ソーシャルメディア共有画像を生成する機能でした。これにより、舞台裏でPuppeteerを使用してスナップショットを撮るプラグインを作成することになりました。プラグインには、ビルド済みのテンプレートと、独自のテンプレートファイルを定義するための構成オプションが付属しています。

また、ナビゲーションや画像処理などの他の一般的なニーズに対応するため、残りの公式Eleventyプラグインに精通することをお勧めします。

11があなたのプロジェクトに適しているかどうかを判断する

11は、ほとんどの静的サイトと同様に、通常は動的またはオンデマンドで提供する必要のないコンテンツに最適です。これは、すべてのサイトが静的である必要があるということではなく、コンテンツを動的にする方法がないということでもありません。 JavaScriptをロードして、APIからのフェッチやインタラクティブなウィジェットの作成などの動的コンテンツを有効にすることもできます。ホストがビルドWebhookをサポートしていて、スケジュールに従って更新したいパーツがある場合は、IFTTTやZapierなどのサービスを使用してサイトの再構築を容易にすることもできます。

カスタムデータとページ付けのおかげで、ヘッドレスCMSやその他のAPIからの外部データを簡単に含めることができました。したがって、静的に提供されますが、コンテンツをプルする場所とその管理方法には、依然として多くの柔軟性があります。

Eleventyについての私のお気に入りは、 _includesと_dataについて説明したいくつかの予想されるディレクトリを超えて、サイトをどのように構成するかについて多くの意見を課さないことです（そして、それらの命名規則も更新できます）。これは、サイトの移行を検討していて、既存のファイル構造も移動できる可能性がある場合にも役立ちます。ただし、より独創的なアーキテクチャを好む場合は、別のオプションを探すこともできます。

また、複数のテンプレート言語、フィルター、ショートコード、レイアウトを活用して、特定のプロジェクトのメンタルモデルに合わせてEleventyを作成する方法も楽しんでいます。スターターはまた、あなたが本当に重要なもの、つまりあなたのコンテンツに集中できるように、後押しを与えるのに役立ちます。また、純粋に静的な出力の高性能も大きなメリットです。

ビルドプロセスでもう少し必要な場合は、Webpack、Gulp、Parcelなどの他の使い慣れたツールを追加できます。あなたはすでにそれらのものを含んでいるスターターを見つけることができるかもしれません。 11ビルドプロセスにすでに固有のノードスクリプトを利用することもできることに注意してください。

11は、大量のページ生成を処理する能力が非常に高いです。これは、Googleのweb.devやNetlifyのマーケティングサイトなど、大規模で複雑なサイトで使用されています。また、この概要で説明されている他のいくつかと一緒に、電子メールやWebコンポーネントジェネレーターなどのいくつかの型破りな目的でEleventyを使用しました。

追加リソース

このガイドがあなたの興味をピークにし、Eleventyを使い始める準備ができたことを願っています！それを使って最初のプロジェクトを作成したときに、明らかにするのが少し難しいと感じた多くのポイントが含まれていました。 2020年4月に初めてEleventyを見つけて以来、スターター、プラグイン、サイドプロジェクト、コース資料を含めて20を超えるEleventyプロジェクトを構築してきました。それらの多くは私のサイト11ty.Rocksにあり、チュートリアルやヒントもあります。 11は私が話し合うのが本当に楽しいものなので、Twitterで気軽に連絡してください！

以下は、Eleventyを学び、最大限に活用するための旅のお手伝いをするためのその他のリソースです。

Andy Bellは、非常に包括的な有料コース「LearnEleventyFromScratch」を提供しています。
Tatiana Macのチュートリアルシリーズは、「初心者向けガイド11」から始まり、静的サイトジェネレーターのこれまでの経験がないことを前提とした徹底的な説明を提供します。
Bryan Robinsonは、無料のHTMLテーマを11のサイトに変換するためのYouTubeコースを提供しています。

最後に、11のコミュニティは小さいですが活発です！情報が見つからない場合は、公式の@eleven_tyアカウントに質問をツイートできます。 11の作成者であるZachLeathermanは、質問にすばやく回答したり、RTの質問に答えたりして、帰り道に戻ることができます。