個人ブログサイトを作りました

個人ブログサイト、始めました。

作成のモチベーション

インターンを通して「自分の表現力、足りなさすぎ…！？」と感じ、文章をたくさん書くことで自分の考えをまとめられるようになりたいなと思っていました。 ただ、今まで使っているサービスでは不満があり自分で作ることにしました。

• X/Twitter
  • 多くの人に見てもらえるのはいい
  • 最大140文字しかツイートできず、文章を書く力を上げるのには向いていない
  • 心が荒んでいるユーザーが多く、自分の考えを吐き出す場としてはリスクが高い
• note
  • 有料記事を簡単に作れたり、多くの人に見てもらえたりするのはいい
  • Twitterに比べれば、心が荒んでいる人が少ない
  • デザインが好みではない
  • 公式APIで記事一覧を持ってこれない
• Zenn
  • デザインが最高
  • 技術系の記事しか書けない

はてなブログなどの利用も検討しましたが、元々持っていたポートフォリオサイトの出来にも不満がありました。そこで、ポートフォリオの改修も兼ねて、ブログ機能を統合したサイトを自作することにしました。

Astroを採用した理由

Astroを選んだ理由としては次の3つがあります

• Markdown ベースのコンテンツ管理が、公式プラグインを使って簡単に実装できる
  • もし今後、別のサイトに移行する場合に簡単に持っていける
  • VScodeで書きやすい
• 必要な箇所だけ React (UIフレームワーク) を利用できる
  • 複雑な状態管理が必要な箇所は React、ちょっとした動きなら素の JavaScript というように、パフォーマンス重視で柔軟に書き分けられるのが便利。
• クライアントサイドJSを最小限に抑えることができる

所感

ページ遷移が快適

この内容なら動作が軽くて当然だろ！！と思う人もいるかもしれませんが、ページ遷移が爆速で気持ちいいです。 それだけではなく、View transitionsが公式で実装されているため、ページ遷移にアニメーションを簡単に実装できたうえでこの軽さなのがうれしいです。ブラウザ標準の「戻る」の挙動も、意識せずともスムーズに動くのが嬉しいです。

画像を自動で最適化してくれる

Astroでは、組み込まれている<Image>を使えば勝手に画像を最適化してくれます。画像ファイルをWebPファイルに自動で変換してくれるので最高です。

WebPにするメリットはこの記事を見てください。

WebPとは？メリットやほかの画像ファイル形式との違い・変換方法を詳しく解説｜Webp変換・配信エンジン ImageFlux｜さくらインターネット

WebPを利用することでウェブサイトのパフォーマンスは向上し、ユーザーエクスペリエンスを向上させることができます。WebPの特徴やほかの画像形式との違い、利用のメリット、Webp変換の最適化ツールについても紹介します。

imageflux.sakura.ad.jp

devContainer神

もはやAstro関係ないですが、これ作ってるときにPCを買い替えたのでWSLの環境汚したくないなと思いdevContainerで作成することにしました。起動が普通に速いし、環境構築もGeminiに手伝ってもらって1時間くらいで終えることができてよかったです。 これからすべての開発でdevcontainerを使うことになりそう。メモリ32GBにしといてよかった～。

今後対応したいこと

未完成な状態でデプロイしたので、まだまだ作成途中です。

• レスポンシブ対応
• 各ページのメタデータをちゃんとつける
• 制作物のページのデザイン
• 外部サイトからの記事一覧の取得