Astro で、ポートフォリオサイトに本当に求められるものを極めてみた

2025-05-31 21:18 公開

2026-06-03 14:27 更新

こんにちは、uiroです

この度、ポートフォリオサイトをリニューアルしました(手元の記録によると8度目)

定期的にやっていますが、今回は、ポートフォリオとして本当に求められるものとは何なのかを突き詰めた設計にしてみました

考えたことや工夫した点などをアウトプットできればと思うので、ぜひ最後までお付き合いください

目的

ポートフォリオサイトをリニューアルした目的は、大きく以下の2点です。

以前のシステム prism.uiro.dev は、以下のようなページ構成でした。

/ : ホームページ /about : このサイトについてページ /app : Vue.js 製のアプリを見れる /pages : ブログ記事 /arc : アーカイブ

このうち、pagesに置いていたブログ記事は、 Directus というヘッドレスCMSを自宅サーバーにホストして管理していました。
これによって、いつでもブログを書き換えられるし、再ビルドも不要な仕組みになっていました。

しかし、以下の致命的な問題も抱えていました。

これがやばかったです。

ファンの小さなミニPCを自宅サーバーにしていたので、ブログに誰かがアクセスする度に、記事の配信と画像の読み込みが走って、自宅サーバーのファンがうなるという悲惨な状況でした。

バックアップ体制がなかったため、定期的に手動でバックアップを取っていました。

なので、それ以降に突然ミニPCが吹き飛んだら、バックアップ後のデータが消えてしまうという大問題を抱えていました。

これを解決するためには、バックアップ用に別のサーバーを建てるなり、VPSを契約するなりする必要がありました。

しかし、サーバー代を浮かせるために自宅サーバーを使っているのにVPSを契約したら本末転倒だったり、サーバーを増やすと(増やすための筐体はありますが)電気代が倍増してしまったりという問題がありました。

ブログ記事を読み込むたびに自宅PCにアクセスしていたので、当然ですね。

また、これは理由がわかっていないのですが、クライアントサイドで markdown 形式のブログをレンダリングすると、読み込みが終わっていても描画されるまでに5秒ぐらいかかるという謎の不具合も起こっていました。

一般的なWebサイトは、読み込みに3秒かかると、半分のユーザーが離脱すると言われているぐらい、Webフロントにとって読み込み速度は命です。

今まで騙し騙し使ってはきたのですが、さすがに許容できないのではないかと思うようになりました。

そんなこんなして、記事管理大変だなぁと思っている時に、ふと気づきました。
「そもそもヘッドレスCMSを使う意味ってある？」ということに。

筆者は自分しかいない、自分はvscodeを触れるのに、あえてCMSに記事管理をさせていることが謎だし、執筆用のPCにももちろんvscodeが入っています。つまり、vscode上で記事を書いてしまえば良いのです。

もちろんヘッドレスCMSをホストするのはロマンでいっぱいだし、ぜひ今後も続けたかったのですが、上記の問題が起こっている以上、これがポートフォリオサイトに最も適しているとは思えなくなってしまいました。

また、後述する筆記環境を整備することで、記事管理をほぼCMSのように行うことができるようになりました。

これはタイトルそのままといえばそのままなのですが、制作当時の思想として、自分の情報をとにかく載せることが、大正義だと思っていました。

これが、自分を表現するためのサイトとしては、決して間違っているというわけではありません。

しかし、私がポートフォリオサイトを作っている目的は、「多くの人に短時間で自分のことを知ってほしいから」であり、以前の状態だと、サイト中を周回してやっとよく分からないかな？ぐらいのクオリティーになってしまっていました。

これが気になってしょうがなくなり、自分のことをもっとシンプルに表現するべきだと思うようになりました。

(これは私の思想であり、各々のブランディングによって異なる部分だと思います)

設計にあたり、自分の過去の活動や、現在の考え方をまとめ、Notionに起こしました。

方針を最初から明確に立てられたので、行き当たりばったりではない開発ができたと思います。

また、技術的な部分については、フレームワークとして、Astroを採用しました。

Markdown を載せるだけのブログには最も適しているフレームワークだと感じています。