プロダクト一覧に戻る
Library
2026年8月18日
relat11ve
11tyの pathPrefix 書き換えを不要にするプラグイン
プロジェクト概要
Eleventy（11ty）で静的サイトをビルドする際、HTMLやCSS内のルート絶対パス（/assets/...など）を、出力されるディレクトリ階層に応じて自動的に正しい相対パス（../assets/...など）へ変換するプラグインです。
GitHub Pagesのサブディレクトリへのデプロイや、ローカルでの直接表示の際に発生するリンク切れのストレスを解消します。
- 制作期間: 個人開発（2026年8月公開）
- 担当ロール: 設計・開発・ドキュメント作成
- リポジトリ: https://github.com/corun-qoo/eleventy-plugin-relat11ve
- デモサイト: https://coru2.com/relative/
主な特徴と機能
- パスの自動相対化:
HTML属性（
href,src,data-*）や、styleタグ内・style属性内のurl()を自動的に相対パスへ変換します。 - コードブロック保護（マスキング）:
preやcodeタグ内のサンプルコードが誤って書き換わらないよう、一時的に退避・復元する仕組みを搭載しています。 - ゼロ依存関係（No Dependencies）: Cheerioなどの重いHTMLパーサーは使用せず、正規表現を用いてピンポイントで変換するため軽量で安全です。
- 手動無視機能:
例外的に変換したくない箇所は、専用のHTMLコメント（
<!-- RELATIVE_IGNORE_START -->）で囲むことで保護できます。
開発に至った背景
従来、11tyで複数のテスト環境や本番環境へアップロードする際、その都度設定ファイルの pathPrefix を書き換えてビルドし直す必要がありました。
この pathPrefix の設定漏れによるリンク切れや古い環境へのパス参照を防ぐため、どこにデプロイしても、あるいは直接フォルダを開いても動く「ポータブルな静的サイト」をビルド時から実現したいと考え、本プラグインを開発しました。