初めてのAstro
Astroでブログを作ったぞー！！！
Astroでポートフォリオ兼ブログサイトを作りました！
発端
自分のポートフォリオサイトを作ったのは、実はこれで二回目です。一回目は10年前、中学生の時に作った https://niwaniwa.github.io でした。
月日は流れ、就活や外部とのコミュニケーションが増える中で、最新のポートフォリオを載せる必要が出てきました。
そこで、ポートフォリオサイト兼情報発信サイトを作ろう！となりました。
noteやQiita、GitHub、ココナラなどでいいのでは？と思われるかもしれません。しかし、自分の活動範囲は多岐にわたるため、理想とするポートフォリオサイトがこの世に存在しませんでした。
そこで、一昨年末からポートフォリオサイトを作ろう！ということになりました。
技術探し
最初のポートフォリオサイトはBootstrapを使ってGridレイアウトを構築したり、CSSを書いたりと大分悪戦苦闘していました。また当時はHonokaと呼ばれるBootstrapテーマが日本を席巻していた(個人の感想)ので、こちらを使ったりしていました。
そんなこともあり、もっと手早く構築したい！ということで、最初はHugoのCoderなどを利用していました。
しかし、いくら調べても理想とするレイアウトと違うという事に悩まされます。
そこでより柔軟性のある静的サイトジェネレーターを探すことになりました。その結果、Astroに行きついたわけです。
Astroの勉強と実装
まずはブログを作りたいので、チュートリアルを実施することにしました。
https://docs.astro.build/ja/tutorial/0-introduction/
フロントエンドは初めてだったため、概要を理解するために3回繰り返すこととなりました。
結果として、Astroが再利用性を極限まで高める思想を垣間見ることができました。
ClaudeCodeを利用した学習
とはいえ、チュートリアルだけではTypeScriptなどのキャッチアップは限定的です。そこで、コード開発補助ツールのClaudeCodeをメンターに据え、実際にペアプロのような形でポートフォリオサイトを制作しました。
流れは以下の通りです。
事例収集 -> 要件定義・設計 -> デザイン設計 -> 実装1. 事例収集・設計
まずどんなポートフォリオが良いのかを具体化するために事例を収集します。例えば以下の通り。
https://blog.koinunopochi.lynxes.org/
https://hodalab.com/portfolio/
みなさん思想が出てていいですね
2. 要件定義・設計
というわけで事例を集めたら何が必要かを書き出します
今回は画面要件と機能要件の二つを定めました
機能要件
機能要件は以下の通り
- ページトランジション
- ダークモード
- 検索機能
- レスポンシブデザイン
- Markdown拡張
- TOC(目次)
- RSSフィード
画面要件
画面要件は以下の通り
- About
- 自身の事を一覧性良く示すページ
- blog
- いろんなことを書く
- works
- 請け負った仕事とかアクティビティ
3. デザイン設計
1と2を元にこれ熱いなというデザインを描きます。
実際に書いたのは以下の感じ
4. 実装
というわけで実装に入っていくわけですね。
完成したもの
👇いやーいい感じですね(自画自賛)
こうしてみるとデザイン設計と完成図はほぼ同じですね。
こだわりポイント
worksは時系列順に、Blogは長方形のカード型にしました。記事が多い場合は「すべて見る」ボタンで一覧ページへ遷移できます！
一番気に入っているのは、アイコン周辺を飛ぶパーティクルです。色、動き、範囲にこだわり、「なんかやわらかそう」「なんか落ち着いていいな」と感じてもらえることを目指しました。
ダークモードも結構お気に入りです。ただ、Topページで切替ボタンの配置に悩みました。
今後
いい感じになったのでしばらくは使い倒す気持ちですが、markdownのプレビュー機能が若干貧弱というのと、notionやgithubのコールアウト機能が使いやすすぎる！ので、そのあたりの機能実装やURLプレビュー、OGP画面の自動生成など進めていきたいですね。