Astroで個人サイト作ってみた
写研部員のゆいのページを見ていたらひさびさに個人サイト作ってみたいなと思ったので作ってみた。おじさんも昔はYahoo!ジオシティーズでブイブイ言わせてたんじゃ……。とりあえずブログと自己紹介と機材紹介(ここが一番情報量ある)だけ。
Astroを使う
慣れ親しんでるのは手打ちでコシのあるhtmlだけど、共通部分とか全部手書きはしんどいので静的サイトジェネレータみたいなの使ってみたい(ゆいのページはジェネレータも自作らしい。つよい)。でもJekyllとかHugoとかはちょっと違う(未知の言語でテーマを書かなきゃいけない？)、とか思っていたところ、写研部員(PENTAXのヲタク)からAstroなるものの存在を教えてもらった。
ざっと調べたらまさに求めていたものっぽいので使ってみた。htmlと若干のJavaScriptさえ分かってれば部品を手書きと同じノリで作ってがっちゃんことかできる。ブログ部分はMarkdownで書いて、ほかの部分はhtmlをゴリゴリ書くとかもできる。だけどふれーむわーく？ みたいなのを使えるポテンシャルもあるらしく、つよつよ系の人が未知の技術で遊んでるのを目にする。
とりあえずだいたい公式チュートリアルの通りに作った。公式ドキュメントがしっかりしてるうえ日本語もあるのは素晴らしい。ちなみにNode.jsのインストールってめんどくさいのかなと思ってたのにwinget install CoreyButler.NVMforWindows nvm install lts nvm use ltsだけで終わった。
デコる
実用性を差し置いた見栄え偏重のデザイン()は好きではないのでシンプルにまとめたい。でもあんまりダサいのは嫌だ。そのへんのバランスをとるのがまあ大変だけどおもしろい。大学の授業で作ったページ(学籍番号知ってる人は学内回線で見られるよ)のをベースにしたけどだいぶ別物になったかも。
まずフォントは具体的に指定せずブラウザの設定を尊重します。これはだいじ。文字を読むのがメインのサイトだからね。気に食わないフォントで表示されてるって人は設定にれっつごー。残念なことにほとんどのサイトで反映されないけど。
Windows 11みたいなスッカスカで見づらいくせにかっこよくもかわいくもない感じはまずありえないけど、すべての余白が悪というわけではないということを知った。まだちょっと詰めすぎな気もするけど、塩梅がむずかしい。
ダークテーマ切替機能は一度実装したけどいらないので外した。常に端末/ブラウザの設定と同期します。ちなみにカラーパレットはWindows Terminalで使われてるCampbell。
誰かさんにクソ煽られたのでページ高さが表示高さ未満のときでもフッターが一番下に表示されるようにしたりもした。flexを使ってすまーとな感じ(body要素の外に物体が存在したりフッターと被るのを避けるためにmarginを入れたりする必要があったりしない)に実装できたので満足。
パンくずリスト
上にある階層を表示するやつ。これも大学の授業でやったね。既存のみたいなのもあるっぽいけど、なんかよくわからないので自分で作ってみた。ディレクトリ構造とそれぞれの表示名を保持する構造体(?)みたいなのを作り、パスと照らし合わせてリストを生成してる。大学の授業でやった連結リストみたいになってる。TypeScriptなんもわからんので雰囲気で作ってるけど若干気持ち悪さある。名前を定義してないパスがあってもディレクトリ名をそのまま表示するようにしてみたり。
if (Astro.url.pathname == "/") {
// トップでは表示しない
return;
}
interface DirectoryData {
dir: string;
name: string;
child?: DirectoryData[];
}
const root = "";
let rootDir: DirectoryData = {
dir: root,
name: "あづみのメモ帳",
child: [
{
dir: "blog",
name: "あづみのブログ",
},
{
dir: "about",
name: "あづみについて",
},
{
dir: "misc",
name: "その他",
},
],
};
let path: string[] = Astro.url.pathname.split("/").filter(dir => dir != "");
path.pop(); // 自分自身を除去
let currentDir: DirectoryData = rootDir;
let currentPath = "/";
let pathNamePairs: { path: string; name: string }[] = [{ path: currentPath, name: rootDir.name }];
for (const dir of path) {
currentDir = currentDir.child?.find(dirNamePair => dirNamePair.dir == dir) ?? { dir: dir, name: dir };
currentPath += currentDir.dir + "/";
pathNamePairs.push({
path: currentPath,
name: currentDir.name,
});
}
このスクリプトはビルド時に処理されるので、クライアント側では一切の処理はない。Astro万歳。ちなみに開発中のプレビューだと404ページでも個別に処理が走るので、パスに応じて表示が変わって面白かった。
名づける
タイトルとか(サブ)ドメインを考えないと公開しようがないけど、なかなか悩んだ。とくに後者はころころ変えるわけにもいかない。結局「あづみ」に連帯助詞の「の」をつければ「安曇野」になるだじゃれを採用した。先人と同じフォーマットになっちゃったけどまあいか。
公開する
セルフホストはしんどいけど、昔と違って(知らなかっただけかも)今は無料かつ広告なしでサイトをホストしてくれるサービスなんてものがある。GitHub PagesとCloudflare Pagesが選択肢だったけど、制限が緩いのとmain以外のブランチを別URLで確認できるとかいう機能があるので後者を選択。あとgithub.ioよりpages.devのほうがかっこいい。
で、産まれたのがこのサイトってわけ。
ToDo
なくても最低限機能するからとりあえず公開したけど、いつかつけたい要素。
- ナビゲーションメニュー
- ある幅を基準に2カラムとハンバーガーメニューとで切り替えるとかするのが定番？ 2カラムよりは上に表示するようにしたいけどたぶんめんどくさい。これができてないので代わりにパンくずリストをつけた。
- 画像表示
とりあえずいいかんじにした。記事のサムネみたいなのもつけたいね。<img>ポン置きしてるだけの状態なのでいいかんじの表示にしたいね。写真とか貼りたいし。- 記事一覧
- リンク並べただけの状態なのでかっこよくしたい。
- 内容拡充
- ブログだけは寂しいだろ。