はじめに

コンテンツ特化のウェブサイトを構築するためのフレームワークAstroを使って、個人ブログサイトを作りました。
構築したサイトはCloudflare Pagesでホスティングしています。

この記事では、個人ブログを開発するまでの流れを紹介します。

初期の構想

もともとは記事一覧ページ、記事ページ、RSSページの3ページを作るつもりでいました。
結果的に、現段階でもそのようなページ構成となっています。

最初のラフスケッチはこちらです。

記事一覧ページにはカテゴリ一覧も表示するようにしました。
記事ページはQiitaやZennのUIを参考にして、記事本文と目次を表示することをイメージしていました。

技術選定の理由

Astro

上記のラフスケッチを見てもらうとわかるように、シンプルなサイトになっています。
そのため静的にコンテンツを生成できればよく、そうすることでキャッシュも効かせやすくなり閲覧のストレスを最低限に抑えられると考えました。

フロントエンドの技術としてはReactの経験があったので、Reactを使った静的サイトジェネレーターも視野に入れて検討しました。
候補としてはNext.jsやGatsbyがありましたが、最終的にはReactを使わずともコンテンツを生成できるAstroを選びました。

Astroは特徴の一つにZero JS, by defaultを掲げており、閲覧のストレスを減らすためには最適だと考えました。
また、必要であればUIフレームワークと統合することができるので、今後の拡張性も考えてAstroを採用しました。

Astroに関する詳しい情報は、Astroの公式ドキュメントをご覧ください。

Cloudflare Pages

Cloudflare Pagesは、GitHubのリポジトリを指定するだけでウェブアプリケーションを簡単にデプロイできるサービスです。
Cloudflare Workersと組み合わせることで、サーバーレスなAPIを作成することもできます。

これまでFirebase HostingやVercelなどを使ってウェブサイトをホスティングしてきたことがあり、別のサービスを使えたらと考えていました。
Cloudflareの製品は今まで使ったことがなく、事前調査の段階でCloudflareの無料枠の広さや標準のWeb Analytics機能などが魅力的だったのでCloudflare Pagesを選びました。
Web Analyticsの他にも強力な機能が多数あり、それらとの統合も容易です。

詳しい情報はCloudflareの公式ページをご覧ください。

開発の流れ

ここからは、実際に開発を進めていった流れを紹介します。
Kanbanを用いた一般的な開発フローになっているため、サクサクとかいつまんでいきます。

GitHub Repositoryの作成とProjectsの管理

まずはGitHubにリポジトリを作成し、Projectsを使ってタスク管理をしました。

画像は現在のスクリーンショットです。
ブログのネタもこちらで管理しているため、リポジトリは一応Privateにしています。

Astro Tutorial

Astroの作法を学ぶために、Astro Tutorialに取り組みました。
こちらは6章からなるチュートリアルで、Astroの基本的な使い方を学ぶことができます。

チュートリアルの内容(成果物)はGitHubにコミットしています。
https://github.com/hytkgami/astro-tutorial
後から見返すことができるようになるべく章ごとに、意味のある単位でコミットするようにしたため、チュートリアルの概要はコミット一覧を見ることでも分かるかもしれません。

デザイン

Figmaを使ってデザインを作成しました。
PCレイアウトとSPレイアウトを作成し、OGP画像やfaviconなども用意しました。
デザインは専門ではなく、実際に作成したサイトにはグラデーションなどが入っているのですが、Figma上は対応できずに置いてけぼりとなっています…。

UI実装

開発を進めているときにFigmaのDev modeがオープンベータでリリースされたため、早速VS Codeのプラグインを利用して開発を進めることができました。
AstroのコンポーネントにほとんどコピペでCSSを当てるだけで、Figmaで定義したデザインを再現することができました。

RSS機能

AstroのドキュメントにAdd an RSS feedというレシピがあり、こちらを参考に実装しました。
Astro TutorialにもRSSに関するセクションが用意されています。
スタイルシートはaboutfeedsのpretty-feed-v3.xmlを利用しています。

動的なOGP画像生成

QiitaやZennのように記事のタイトルをOGP画像に表示したかったため、vercel/satoriを使って動的にOGP画像を生成するようにしました。
実装の際には以下の記事を参考にさせていただきました。

• satoriを使ったAstroのOGP画像生成メモ | 遠近法
• Astroでsatoriを使ったOG画像の自動生成を実装する | Blog

なるべくReactを使わずに実装したかったので、natemoo-re/satori-htmlを利用して、satoriにHTMLを渡すようにしました。
画像化はできてもCSSのミスでテキストが全く表示されず、フォントの問題だと勘違いして予想以上に時間を使ってしまいました。
こちらに関しては別途記事を書く予定です。

Cloudflare Pagesへのデプロイ

こちらは特に大したことはしておらず、GitHubのリポジトリを連携することで簡単にデプロイできました。
Pull RequestをトリガーにPreview環境へのデプロイが走るため確認が容易で、かつmainブランチへのpush時に本番環境へのデプロイが走るため、CDパイプラインを組まずにそのまま利用しています。
この機能自体はFirebase HostingやVercelにも存在します。

今後について

ここまでご覧いただきありがとうございました。
ブログを作ろうと思ったのは、気になっている技術を試したかったことと、日頃の気づきを記録していく必要性を感じたことがきっかけです。

これまで結構いろんなことをやってきたとは思うのですが、いざそれを説明しようと思うとなかなかうまく説明できずに困るシーンがありました。
キャリアとしてはモバイルからバックエンドまで幅広く経験してきたので、その分ふわっとしている部分も多くありそうです。
ブログを書くことで自分の理解を深めるとともに、説明する機会があったときに困らないようになればと思っています。

最近は以前よりも外部の方との交流も増えてきており、自分のことを知ってもらうためにも地道にコツコツとブログを書いていきます。