Project

ポートフォリオサイト作成

Astro とテンプレートを使って、ポートフォリオサイトを作成しました。 情報工学に関する備忘録、noteで書き溜めてきたエッセイなどを一箇所にまとめた、目録です。

いわゆる「おしゃれなだけのポートフォリオ」みたいな、 きれいだけど中身が薄いサイトにはしたくありません。 自分が何を考え、どう実装したかを重視する場にしたいと思っています。

なぜ新しく作ったの?

理由はいくつかありますが、一番は情報の断片化を解消したかったからです。 わたしはnoteに3日に1回ほどエッセイを書いているのですが、 あそこはあくまでフローの場所で、過去の記事がどんどん流れていってしまいます。

GitHubのコードも、勢いで書いたものが散らばっていて、 それらが自分のなかでどう繋がっているのかが見えにくくなっていました。

それに、既存のプラットフォームはどうしても「植民地感」があります。 フォーマットを自由にいじれないし、コンテンツを人質に取られているような感覚がずっとありました。

自意識過剰かなと悩みもしましたが、芸工への編入という新しい環境へ行く前に、 自分のこれまでを整理しておく場所が必要だと思い、重い腰を上げました。

どうやって作ったのか?

要件定義

新しく作るにあたって、次のようなことを考えました。

  • なるべく早く、形にしたい(モチベーションが続くうちに)
  • GPTにおんぶにだっこは避け、構造は自分で管理する
  • 日本語を主軸にする(FeaturedとかArchiveとか、英語のヘッダーはあまり使わない)
  • 「見栄え」よりも「情報の密度」を優先する

やはり、個人開発のモチベーションはアイディアを思いついた瞬間が最大です。 悠長にチュートリアルを完走している暇はありません。 また、GPTに関しても、わたしは保守的です。 ベストプラクティスがまとまっていない段階でAIに頼りすぎると、 あとで自分がコードを修正できなくなるのが怖いからです(といっても、これはあくまでも理想です…)。

技術選定・設計

以前はPythonのmarkdownモジュールを使ってHTMLを無理やり生成していましたが、今回はAstroを選びました。

Astroを選んだのは、つくりがシンプルでわかりやすいからです。 Next.jsやReactのような複雑なエコシステムを最初から全部理解するのは大変ですが、 Astroは必要なところだけ動的にできるのが素朴で良いと感じました。

また、一から作るのも勉強になって良いですが、今回の目的は「Astroの勉強」ではなく 「ちゃんとしたポートフォリオサイトをつくる」でしたので、とりあえずいい感じのテンプレートを採用しました。

不満があったら修正したり機能を追加していこうと思います。

採用したテンプレート

感想

完成してみると、自分の活動が目録として並んでいる状態には、独特の安心感があります。

おしゃれなサイトを作るのが目的ではなく、あくまで何を考え、何を作ったかという事実を保存するための場所を作ったのだ、という手応えがあります。

今後は、noteの記事を少しずつこちらへ再編集して移植したり、作りたいと考えているアイディアに関して書いていきたいです。

参考

Astro 公式ドキュメント: