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