プロジェクト構成

本ページは、scaffold されたプロジェクトのディレクトリ構成と、それぞれの役割を扱います。編集したい対象がどこにあるかを掴むための地図として活用してください。

全体像

scaffold 直後のディレクトリ構成は次の通りです。

.
├── dist
├── eleventy.config.js
├── package.json
└── src
    ├── _data
    ├── _includes
    │   └── partials
    └── public

src/ 配下がすべての執筆・実装対象になります。dist/ はビルド成果物にあたり、eleventy.config.js は Eleventy 設定 (プリセット を呼び出すだけの薄い層) になります。

dist

ビルド成果物の出力先です。手で編集しません。.gitignore に含まれます。

src

Eleventy がテンプレートとして参照するルートです。ページの MDX、部品、静的アセット、グローバルデータを、すべてここに置きます。

src/_data

グローバルデータ を配置する場所です。ファイル名がデータキーになり、テンプレートから参照できます。scaffold には site.js (サイト全体のメタ情報) と nav.json (ナビゲーション定義) が入っています。

src/_includes

レイアウトチェイニング 用の レイアウトテンプレート を置く場所です。ページの frontmatter で layout: "..." と指定した対象は、ここから探されます。scaffold の base.mdx は HTML 骨格を、post.mdx は記事の見た目のラッパを担います。

src/_includes/partials

テンプレートから呼び出す JSX コンポーネントと MDX テンプレートを置く場所です。scaffold には header.mdx footer.mdx ogp.mdx が入っています。

src/public

静的アセット (favicon、robots.txt、画像など) を置く場所です。ここの中身は build 時に dist/ 直下へ丸ごとコピーされます。

次に読む

構成が掴めたら、Architecture で本ボイラープレートの全体設計を、Preset の規約 で書き方の規約を追います。