概要

自己紹介、ブログ、制作物紹介（ポートフォリオ）を兼ねた個人サイトです。元々Hugo製のブログとVue製のプロフィールサイトを別々に運用していましたが、自分関連のサイトがいくつも分立しているのは不便でした。そこでフロントエンドには先日アップデートが入ったNuxt最新バージョンであるv4と、Markdownから高速でページ生成を行うNuxt Content 3を採用し、実用的で統合された個人サイトを作成しました。

Github Source

技術スタック

Frontend: Nuxt 4, Nuxt Content 3, Tailwind CSS, shadcn-vue
Backend: AWS Lambda, AWS API Gateway, AWS DynamoDB
Infra: Cloudflare Pages

設計上のポイント

SSGとAPI流用によるハイブリッド化

Nuxt 4では、SSGと統合されたNitroを活用したSSRのハイブリッド化が可能になりました。当初は本サイトも新機能であるハイブリッド化をする想定で設計をしていました。しかし、以前のHugo製のブログから記事やその時点でのいいね数をこちらに移行するにあたって、AWS上のDBのデータをNuxt側で全て入力し直すといった無駄な工程が発生することに気付きました。そこで、本サイトではいいねボタンといった動的な部分はかつてのAWSのAPIをそのまま流用することで工程を減らし、フロントエンドが変わってもバックエンドの変更が不要な設計にしました。

いいねボタン実装記事

シンプルなサイトデザインの追求

shadcn-vueとtailwind CSSを組み合わせ、モダンでシンプルなデザインを追求しました。shadcn-vueにはコンポーネント側で用意されたカラーパレットがあり、それを使うことでサイト全体のデザインに統一感を持たせることを意識しました。

サイトの安定性とCI/CD

自宅サーバー（オンプレ）上でスクリプトを書いてビルドしNginxで公開する方式か、Cloudflare Pagesで公開する方式を比較して考えました。Cloudflare Pagesはリポジトリを登録するだけで、git pushをトリガーにしてビルド＆デプロイを行ってくれる優れものです。ドメインをCloudflareで契約していることや、可用性やキャッシュといった自宅サーバーにはない利点を考慮し、結果的に安定したCloudflare Pagesを選択しました。

既存ブログについていた機能の移植

タグやカテゴリ、日付表示、読了時間といった基本的な要素はもちろん、rss配信も追加しました。以前のブログは前述の通りHugo製で、そういった機能はHugo側でデフォルトでついていたり、あるいはテーマ側の作者が開発してくれたものを使うという形だったのですが、今回は全て0から作り、機能面で劣るということがないように設計しました。

苦労した点

Nuxt Content3の仕様把握

以前Nuxt3 + Nuxt Content3で記事公開サイト（デモ版）を作った際の知識があるからなんとかなると楽観視して挑んだ今回のプロジェクトだったのですが、デモ版と比べてカテゴリ機能やblogとworkで別々のページを表示するなど、機能がかなり増えていたこともあって以前のアプローチ方法では通用しなくなっていたことで苦労しました。こちらもAIの情報がほぼ当てにならなかったため、自力でドキュメントを読解したり、Content3のソースを確認してAPIの挙動を理解し実装しました。

また、Content3 の ProseComponent 内で、インラインコードを表示する ProseCode だけが正常にスタイル適用されない現象に直面しました。

`ProseCode`

GitHubのIssueやネット上にも同様の報告がない稀なケースでしたが、ブラウザの開発者ツールでレンダリング結果を解析し、CSSを直接調整することで解決しました。これも原因特定から解決までかなり難航したポイントです。

SEOやogImageの仕様

すでに用意されたテーマやdockerイメージを一切使わない、完全自作のWebページ制作が初挑戦だったこともあり、検索結果に載る情報やSNSにシェアした際に表示される説明文や画像のデザインにかなり手こずりました。このサイトは、Nuxt/SEOというSEOやogImage、Schemaなんかをまとめて設定できるというモジュールを使っているのですが、そもそもそういったweb制作の基礎知識ともいえるものが不足していたことが原因でこちらも難航しました。

他2つと同様AIが役に立たなかったので、ドキュメントを徹底的に読み込むのは勿論、Nuxtで開発サーバーを起動した際に表示されるNuxt Dev toolsを使って仕様の理解とメタデータのカスタマイズに取り組みました。

今後の課題

PageSpeed Insightsのスコアが、スマートフォン版だけ異様に低いです。（主に画像の拡張子関連）

今後は機能追加や改善、記事の更新をしつつこれらのスコアを100点に近づけられるようにしたいと考えています。

まとめ

今回の自サイト制作を通して得た最大の収穫は、未経験の技術領域であっても興味と熱量次第でどうにでもなるという自信だと言えます。今は生成AIがあることもあって、未経験領域に挑戦するハードルはかなり下がりましたが、全てAI任せで順風満帆にいけるかと言われると首をかしげたくなるかと思います。そういった状況をどうにかできるのは、やはり自身の好奇心や開発にかけられる熱量であると痛感しました。

また、初めての小規模web開発過程で実感したのが、それを支える「三種の神器」と言える存在の重要性でした。

ドキュメント
開発者ツール
先人のコードや友人エンジニアの存在

前述の通り、今は生成AI全盛の時代です。しかし、だからこそ困ったら原点回帰ともいえるこれらの3軸を使い倒し、泥臭く問題を解決していく力が重要だと実感できました。

これまでのMinecraftのpluginの開発といった「既存の拡張ツール」とは違い、今回は0から動くものを作り上げる経験ができました。数十時間かけて幾多のエラーと格闘して小さな課題解決を積み重ねた末、自分の理想といえるサイトをついに公開できたときの達成感は今まで感じたことのないものでした。この感覚を糧に、今後も新しい開発に挑戦していきたいと思います！

個人サイト（ブログ + 制作物紹介）

概要