V0とAstroJS使って爆速で個人サイトを作りました。

2024年11月10日(日)

2024年にもなり、AIブームが絶好調の中、個人サイトがどれだけ価値があるのかはわかりませんが、ものつくりが好きなエンジニアの僕にとっては、そんなことはどうでもよく、ただただ新しい技術を使ってみたいという欲求が強かったので、AstroJSを使って個人サイトを作ってみました。

AstroJSとは

おそらくこのページを見に来てくれている人なら、ご存知かと思いますが、AstroJSは静的サイトに特化した（もちろんSSRもできるので、WEBアプリも作れます）フレームワークです。ReactやVue、svelteのようなUIフレームワークをいくつも同時に使うことができる上に、ビルド時にHTMLに変換されるので、パフォーマンスが非常に高いのが特徴です。 そして、一番うれしのが、デフォルトでマークダウンパーサーを備えているのと、MDXをサポートしていることです。これにより、ブログを書くのに最適なフレームワークとなっています。

スタック

• AstroJS
• TailwindCSS
• Cloudflare Pages
• Svelte
• TypeScript

svelteに関しては、JSを使う必要がある画面でのインとラクティブなUIを作るために使いました。

作業時間

2日ほどで作業が完了しました。デザインはTailwindCSSを使っているので、デザインに時間をかけることなく、コンポーネントを組み立てるだけでサイトが完成しました。

デザイン

個人サイト作るときにエンジニアにとっては一番時間がかかるのがデザインだと思います（もしこだわるのであればの話ですが）、ただ、時代はAIです、なので、今回はAIを屈指して、爆速でデザインも完成させました。

その手順は以下のいくつかあります。

アイディア収集

デザインするときに、まずはアイディアを収集します。PinterestやDribbble、Behanceなどのデザインサイトを見て、自分がいいなと思うデザインを集めます、つまり誰かのアイディアを元に自分のアイディアを作ります。

何時間漁りまくった結果GhostというオープンソースのCMSのテンプレートが一番気に入ったので、参考にすることにしました。

https://ghost.org/themes/onflow/

V0を使ってモックアップを作成

このスクショをそのままV0に投げると、なんとほぼほぼ完成品を返してきます、時代ですねーｗ

ちなみに、svelte5で作成してくれと頼んでも、何ら問題なく変換してくれました、ただ、v0のプレビューがsvelteに対応していないので、プレビューこそはできないですが、コードをそのままsvelteのreplに貼ると、全く問題なく動作しました。

個別ページに関しては大体同じフォーマットでいいので、あとはv0が出してくれたコードを分割して再利用可能なコンポーネントにしていけばいいだけですね。

ちなみに、記事カードのところをグラデーションがかかっているガラスのようなデザインにしたかったので、そのままv0に何回か要望を投げて、うまく丸めて使うことができました、昔だったらいちいち自分でゼロから忘れかけていたCSSを調べながら書いていたので、本当に楽でした。

最終的に気に入るまで何回も何回も作ってもらい、近づけていく感じですね。

実装

残りの個別ページに関しては、AstroJSのブログテンプレートプロジェクトをpullをしてきて使いだけです、markdownのパースはAstroJSがやってくれるので、見た目に関してはtailwindのtypographyプラグインを使えば、ほぼ完成です。

トップページはv0のコードを分割して、再利用可能なコンポーネントにしていけばいいだけです。

以上。