説明書

サイトを公開する時になったら

公開先が決まったら、

• src/_data/site.json

にある、

{
  "url": "https://example.com"
}

のアドレスを公開先のドメインに変更して下さい。
GoogleのSearch Consoleなどに登録するのも自身の公開先ドメインで登録すると思うのでhttps://公開先ドメイン/sitemap.xmlで登録できます。

サイトの名前と説明

src/_data/site.jsonで、nameとdescriptionを入れると各テンプレートでglobalにそれらが使用できます((追加もできると思いますが動作確認はしていない))。

基本動作の確認

✔ マークが付いているものは確認済みです。しかしイレギュラーな使い方だと問題が出る場合があります。

ファイルの削除について

データ上ではファイルを削除したのにそれがサイト上で確認できない

• これは実際に削除されていますが、11tyの仕様でそうなります。一旦停止して(Ctrl+C)、ビルドし直す事で(npm run devあるいは、npm run fresh)消えるのであれば正常動作です。

11tyでは、ビルドして処理したものが最終的な出力なので、それまでの途中経過を確実に反映されるように設計されておらず、しかしそれでは不便なので、実際はビルドされたものが適用されますが、ローカルで記事を書いている途中はviteがsrc/を見に行って画像などを表示するようになります。

一旦作業を終わり(Ctrl + C)、再度ビルドすると_site/には画像ができているので表示はそれを参照するという流れになります。これは例えばスリープなどが入り挙動がおかしくなっても、再度npm run freshをすれば、正しく再開できるということです。

これら参考用、テンプレート(仮)の適用方法

元のデータは残しておいて、配布ファイルをそのまま置き換えます。無いものについては新たに作成して下さい

起動方法、キャッシュクリアなど

npm run dev

これで、11tyとViteが起動して「Whatch」状態になります。何かしらの変更が加わり保存した段階で11tyが処理をしてhtmlに書き出します。このビルドの時間がかかるためhtmlの表示には多少(数秒ですが)時間がかかります。

何かブラウザのデベロッパーツール(F12)でエラーが出た場合に停止するには、

Ctrl + C

で停止します。新たに始める場合はnpm run devでも良いですが、npm run freshだとキャッシュや不要なものを消去してからdevが走るのでより確かです。

一旦停止している状態で、(本番環境と同様の出力である)ビルドされた_site/をクリアするにはnpm run cleanです。本当に本番環境と同等の内容になっているか確認するのに使用して下さい。

posts/img の画像が読めるか

これは記事を書いている/posts/の中の画像が読めるかと言うテストです。
画像は、src/posts/img/に入れていっています。アクセスは、/posts/img/ファイル名.jpg(他のフォーマット)という形です。

src/posts/img/の中の画像は/posts/img/xxx.{jpg|webp|avif}として読めるようです。svgは試してませんがこれらが読めるということは読めるでしょう。