GW期間中に暇を見つけてGitHub Pagesに新たにtoy siteを公開しました。
昨年のクリスマスシーズンに子どもたちと一緒に『クリスマスの12日間』の歌や絵本を楽しみました。
ただ私は歌詞を覚えるのがすこぶる苦手であり、次のシーズンまで覚えてられる気がしないので簡単なクイズ要素を含むものにしました。
https://mitsuboshi.github.io/12days-of-xmas/
技術的に面白みのある工夫は特にありません。
ビルドツールにViteを使ったのですが、唯一後述の点がハマりどころでした。
▼公式docsからの引用 1
> GitHub Pages
> 1. vite.config.js で base を正しく設定してください。
カスタムドメインとそれ以外で base に設定すべき値も異なります。
開発時のローカル環境とGitHub Pagesで設定値を分ける必要があったため、最終的にはbuild時に環境変数 “GITHUB_PAGES” を渡して動的設定をするようにしました。2
base: process.env.GITHUB_PAGES
? "/12days-of-xmas/"
: "/",
公式docsにGitHub Pagesに関する記載があるのは大変助かりました。