Site cover image

Site icon imageゴモクマ書跡

面白いものや楽しいものを振り返る

いにしえのオタクが個人サイトを大改装した

ず~~~~~っとほったらかしてた個人サイトを仕事関連の勉強にかこつけて大改装してやったぜの話

以前はそんなにコンテンツ数もないし、更新頻度も高くないしで、HTMLをベタ打ちしていた。
小説ページとか更新のたびに段落だの改行だのルビだのをめんどくせえと思いつつもコツコツ打っていた。

今日び、イラストでも小説でも投稿サイトがやまほどある。
人から見てほしいならそちらに上げた方が確実に人の目には留まるし、管理も簡単だ。
それでも個人サイトに固執する理由は至極単純。

全部自分の管理下にしたい。ただそれだけ。

同一世界観やシリーズ毎でレイアウトを変えられるようにしたい。
なんなら一話ごとにフォントが変えられるくらいにしたい。

結局、同人誌にして物理本を手元に置いておきたいみたいな欲求と似たようなもの。
インターネット上に「おれがかんがえたさいきょうのさいと」があるという事実が楽しい。

ほんの数年前は、PHP辺りで自分用の超ミニマムCMSでも作るかと考えていた。(CMSになるならWordPressでいいじゃんと没)

WordPressは便利だが、自分のような自己満足の個人サイト規模だと仰々しすぎる。
何より、そもそも使うつもりがなかったので、自分が使っているレンタルサーバーのプランでは利用できない。

そもそもCMSである必要すらあるのか? とむにゃむにゃ考えること数年。

Astroに出会い、「やるかー!」と相成った。

プレーンなHTMLとCSSで作られていた旧サイトを、(これを機に借りていたテンプレートも変えて)Astroで構築しなおす作業は、苦労もあったが大変楽しかった。

javascriptも怪しいレベルの人間でも、出力結果がほぼHTML/CSSであるというAstroのおかげでわりあいなんとかなったのも大きい。

個人的に改装していちばん気に入っているところ

手作業だった各ページの更新作業がファイルを放り込むだけでよくなった。

これに尽きる。

以前なら、小説一本更新するのに

  1. 本文ページを用意する
  2. 前後ページがあれば、前後ページそれぞれにリンクを貼る
  3. 一覧ページにリンクを貼る
  4. トップページを更新する(最新話へのリンク、更新履歴)
  5. 更新履歴のログページを更新する

と、これだけの作業が待っていた。
最低でも6ファイルの更新をしなければならなかったわけだ。
これが

  1. 本文ファイルを用意する
  2. 更新履歴ファイルを用意する

ここまで圧縮された。なんてきもちいいんだ。
本文ページもルビや改行を手作業で反映していたが、今はマークダウンで書けば全部やってくれる。なんてきもちいいんだ。

ルビは以下のjavascriptを参考に使わせてもらった。

自分はルビを振るのが漢字だけとは限らないし、投稿サイトで書いているわけでもないので、一番使いやすい青空文庫記法のみを対応させている。

逆に苦労したのは「コンテンツコレクション」の仕様を理解すること。

別に公式チュートリアルにならってひたすら配下に.mdを並べてもよかったんだけれども、せっかく機能があるならしっかり分けて使いたいなと(超気楽に)考えた。

オブジェクトの扱いに手間取り、ルーティングを理解するまでにおそらくとんでもねえ遠回りをして、ようやく想像通りの動作をしてくれた時の脱力感たるや。

改装作業は実質2ヶ月ほどだと思うが、そのほとんどをAstroの公式ドキュメントとにらめっこして過ごしている。
「意味はわかるが、自分のやりたいことに適用させるにはどうしたらいいかわからない」と延々と戦っていた。

細かいところで改善したいと思っているところはまだまだあるのだが、とりあえず一段落……ということにしておこう。

これでブログの改装(というかレイアウト調整)ももうちょっと手をつけられるかも。

何やっても失敗しても誰も困らない、立派なものができたら嬉しい。
個人サイトって持ち得だなあ。