当ブログの技術スタック紹介(Astro + Cloudflare Pages)
当ブログの技術スタック紹介(Astro + Cloudflare Pages)
はじめに
このブログは、自分の学習記録やアウトプットを残す場として作成しました。
ブログ開発に採用した技術スタックと、その選定理由をこの記事にまとめます。
ブログのコンセプト
ブログを構築するにあたり、最初に大まかなコンセプトを決めました。
「シンプルな技術ブログ」ということで、以下のようなイメージで成果物を考えることにしました。
- デザイン(見た目)がシンプル
- ブログとして機能がシンプル（いいね機能やコメント機能は実装しない）
開発・運用方針
技術選定に先立って、以下の開発・運用方針を立てました。
- 自分が触れたことのない技術に触れる
- 運用コストを抑える(できれば無料)
- 記事更新がGitHubコントリビューションになる方式にする(モチベーション維持のため)
技術スタックの概要
上記のコンセプト・方針を元に技術選定し、以下の技術スタックを採用しました。
- プラットフォーム：Cloudflare Pages
- フロントエンド：Astro
- スタイリング：TailwindCSS
- 記事作成：Markdown
各アーキテクチャの選定理由を以下に記載します。
プラットフォーム：Cloudflare Pages
まず最初にプラットフォームを選定しました。
Zennやはてなブログなどのブログサービスもよく使われているようですが、今回は記事投稿だけでなく自身の技術力向上も目的としてあったため、独自サイトとして構築することにしました。
そこで採用したのが、静的サイト向けホスティングプラットフォームのCloudflare Pagesです。
主な選定理由は以下の通りです：
1. コスト削減のため
Cloudflare Pagesの料金プランは良心的で、無料枠の「Cloudflare Free」でドメイン取得(サードレベルのみ)、アクセス分析などの機能を利用できます。
個人ブログのホスティング先としては十分な機能が無料枠で提供されています。
2. GitHubと連携しやすいため
GitHubと連携し、リポジトリとブランチを指定するだけで自動ビルド・デプロイを実現できます。細かい設定が不要で使いやすいです。記事投稿をコントリビューションに含まれるようにしたかったため、簡単に連携できるのは高ポイントでした。
フロントエンド：Astro
プラットフォームの選定が完了したところで、言語やフレームワークを選定しました。
ブログサイトには
- 静的要素が中心(動的要素が少ない)
- SEOで優位を取りたい
といった特徴があるため、SPAではなくMPAで、SSGフレームワークを選択することにしました。
今回採用したのは、JavaScriptフレームワークのAstroです。
主な選定理由は以下の通りです：
1. ブログサイト開発に適性があるため
Astroはコンテンツ中心のウェブサイト構築で高い評価を得ているフレームワークで、ドキュメントや情報も静的サイト構築向けに充実しており、今回のケースに最適だと考えました。
2. 自身の学習のため
SSGフレームワークを使用したことが無かったため、この機会に新たな技術に触れたいと考えました。
また、モダンな技術に触れてみたいという理由もありました。
3. Markdownとの親和性が高いため
書き慣れているMarkdownで記事を作成し、GitHubで管理できるのも魅力的でした。
他の選択肢としてはNext.jsやHugoなどが考えられましたが、Typescriptを中心とした技術スタックで構成したかったのと、Next.jsは今回の要件に対してはtoo muchであるという理由から対象外となりました。
スタイリング：TailwindCSS
今回採用したのは、CSSフレームワークのTailwindCSSです。
主な選定理由は以下の通りです：
1. デザイン的な要求が少ないため
なるべくシンプルなデザインにしたかったため、新たなCSSフレームワークを学習するのには効果的でないと考え、使用経験のあるCSS・SCSS・Bootstrap・Tailwindの中から選択することにしました。
2. クラス名管理の手間を省くため
ブログが一度完成した後はスタイルの追加・変更があまり無いため、スタイルに対応するクラス名を考えることにあまりメリットが無いと考えました。
この理由からCSS・SCSSは候補から除外し、Bootstrap・Tailwindの2択となりました。
3. ブログのスタイリングに適しているため
ブログサイトのスタイリングは、決まったデザインを拡張して使い回すよりも、ある程度細かい調整をできる方が好ましく、BootstrapよりもTailwindの方が適性が高いと考えました。
※正直なところ、当ブログのような小規模サイトではBootstrapでもTailwindでも大差は無さそうですが、いわゆる「Bootstrapっぽい」デザインは避けたいという考えはありました。
4. Astroに標準対応しているため
Astro公式パッケージのastrojs/tailwindを利用することで、簡単にTailwindを導入できます。
BootstrapのAstro公式パッケージは現状ありません。
記事作成：Markdown
選択肢としてはMarkdown、MDX、CMSがありますが、以下の理由でMarkdownを選択しました：
1. Markdownに慣れているため
仕事でもプライベートでもMarkdownを使用しているため、抵抗感が全くありませんでした。
2. 公式ドキュメントが充実しているため
Astro公式ドキュメントはMarkdownでの記事作成に関する解説が充実しており、これを読めば実現したいことは一通りできそうだったため、最も慣れていてシンプルな方式を採用しようと考えました。
3. 運用をシンプルにしたいため
ブログのデザインだけでなく、記事の内容も装飾等にはこだわらずシンプルにしたかったため、MDXやCMSはtoo muchだと判断しました。
また、Markdownの場合、記事の作成～公開まで全てがエディタ上だけで完結するのも採用理由の一つです。
今後の展望
記事の投稿だけでなく、サイト自体のアップデートも実施したいと考えています。
現状は以下の機能追加を予定しています。
- ダークモードの実装
さいごに
このブログサイトは、Cloudflare Pages、Astro、TailwindCSS、Markdownを技術スタックに採用し開発しました。
コンセプトである「シンプルな技術ブログ」を簡単に実現出来たので、この選定には満足しています。
特にAstroは今回初めて利用しましたが、個人的に使い心地が良く、好きなアーキテクチャの一つになりました。今後もどこか別の場所で使ってみようと思います🚀