静的サイト構築のためのフロントエンド開発環境です。ページ数の多いサイトも柔軟かつ快適に開発できます。静的サイトジェネレーターの Eleventy と Vite を中心に構成されています。
- 静的サイトジェネレーターの Eleventy を利用した HTML ファイル構築の支援
- Vite の採用および Eleventy との連携
- HTML のテンプレートエンジンとして Pug を採用
- 別のテンプレートエンジンとの入れ替えおよび併用も可能
- Tailwind CSS の採用
- TypeScript の採用
- MPA(非 SPA)向けの JavaScript コンポーネント化ライブラリとして Stimulus を採用
- Prettier の採用
- サブディレクトリでの公開に対応
- Internet Explorer を除くモダンブラウザに向けた構成
要求開発環境:
- macOS、Windows、Linux
- Node.js 16 以降
依存パッケージのインストール:
npm install
ローカルサーバーの起動:
npm run dev
.
├── _templates/
├── dist/
│ ├── assets/
│ │ ├── images/
│ │ │ └── apple-touch-icon.png
│ │ ├── main.[hash].css
│ │ └── main.[hash].js
│ ├── favicon.ico
│ └── index.html
├── public/
│ ├── assets/
│ │ └── images/
│ │ └── apple-touch-icon.png
│ └── favicon.ico
├── src/
│ ├── scripts/
│ │ ├── controllers/
│ │ │ └── modal-dialog.controller.ts
│ │ └── main.ts
│ ├── site/
│ │ ├── data/
│ │ │ └── metadata.js
│ │ ├── includes/
│ │ │ ├── components/
│ │ │ │ └── base-button.pug
│ │ │ └── layouts/
│ │ │ └── base.pug
│ │ └── pages/
│ │ ├── index.11tydata.js
│ │ └── index.pug
│ └── styles/
│ └── main.css
├── .eleventy.js
├── config.js
└── package.json
サイト本体のソースコードを配置します。
Eleventy で生成するページやそのデータファイル、その他 Eleventy に関するファイルを配置します。
Stimulus コントローラーを配置します。
コンパイル等の処理を行わず、そのまま公開されるファイルを配置します。dist
ディレクトリ直下にコピーされます。
ビルドされたファイルが当該ディレクトリに出力されます。
ローカルサーバーを起動して、ファイルの変更監視を行います。
本番用にビルドしたファイルを dist
ディレクトリに出力します。
本番用にビルドしたファイルをプレビューできる静的サーバーを起動します。事前に npm run build
を実行しておく必要があります。http://localhost:5000 から確認できます。
Hygen を利用して、ソースコードの雛形(scaffold)となるファイルを生成します。テンプレートは _templates
ディレクトリに配置されています。
コンポーネント:
npx hygen component new my-component
コンポーネント(コントローラー含む):
npx hygen component new my-component --controller
コントローラー:
npx hygen controller new my-controller
ページ:
npx hygen page new path/to/page
Hygen をグローバルインストールすることで、入力するコマンドから npx
を省略できます。
npm install --global hygen
hygen component new my-component
Prettier を利用して、ファイルの自動整形を行います。
GitHub Actions によって、GitHub リポジトリにプッシュされるたびに当該コマンドが自動実行されます。
サブディレクトリでサイトが公開される場合、config.js
を次のように記述することでビルド設定を変更できます。
const config = {
// root: `/`
// subdir: `/path/to/subdir/`
- pathPrefix: "/",
+ pathPrefix: "/my-subdir/",
};
Eleventy の Pug テンプレート内でサブディレクトリのパスを解決するためには、f.url()
関数を使用する必要があります。
-a(href="/about/") 私たちについて
+a(href=f.url('/about/')) 私たちについて
Vite 環境でビルドされる JavaScript か TypeScript からサブディレクトリのパスを参照するには、import.meta.env.BASE_URL
変数を使用します。
import.meta.env.BASE_URL; // "/my-subdir/"
デフォルトで生成される robots.txt
は、サブディレクトリでは機能しません。
- eleventy-img: 指定した画像を複数のサイズと形式で出力する Eleventy プラグイン
- eleventy-cache-assets: 外部ネットワークに依存する、取得に時間がかかるデータをキャッシュするための Eleventy プラグイン
- Stimulus-Conductor: Stimulus コントローラーの親子関係を管理するためのコントローラー