技術的な話

いきなりですが、このサイトはAstroという、静的サイトを簡単に作れるWebフレームワークで構築しています。

今回は「なぜAstroを採用したのか」と「どうやってこのサイトを作ったのか」を簡単に紹介します。

経緯

子どもと過ごす日々をなるべく記録したいと思い、なんとなくブログを始めようと思いました。
↓
ブログを始めるなら、アメーバブログやはてなブログなどのブログサービスかな……
↓
でも、どうせやるなら仕事でも触ってきた CMS（ブラウザから記事を管理できる仕組み） を使ってみようかな。
※仕事でCMSを使ったサイト構築・運用を多数経験しています。
↓
個人ブログなら WordPress（世界で最も利用されているCMS） が定番かな。
ホスティングサービス（レンタルサーバー）にするか、それとも VPS（自分で管理するサーバー） にするか……
↓
VPSだと監視やセキュリティパッチの適用など、運用が少し面倒そう。
そうなるとXServerやロリポップなどのレンタルサーバーかな……
↓
……あれ？
WordPressを動かそうとすると、思っていたより運用コストが安くない。
そもそも更新頻度もそれほど高くないはずだし、CMSじゃなくてもいいのでは？
多少の学習コストはかかるけれど、 静的サイトジェネレーター で十分なのでは？
↓
というわけで Astro を採用しました！
最初はAWS S3に配置することも考えていましたが、独自ドメインだけ取得して Cloudflare Pages（静的サイトを公開できるサービス） に配置する構成が、一番コストを抑えられそうでした。
これなら運用コストは独自ドメイン代だけです。

構築

環境

  • Windows 11
  • WSL2（Windows上でLinuxを動かす仕組み）
  • Docker CLI（開発環境を簡単に構築するためのツール）

手順

  • ローカル環境を作成
    • Astro公式サイトで好みのテーマを探す
    • 手順どおりにインストール
    • ローカル環境の完成
  • 自分好みにカスタマイズ
    • サイト設定
    • ロゴ
    • デザインなど
  • とりあえず記事を書く
  • GitHub（ソースコードを管理するサービス）のアカウントを作成し、リポジトリを作る
  • 独自ドメインを取得
    • XServer Domainで取得
  • Cloudflare Pagesを設定
    • ドメインを設定
    • GitHubと連携
    • main（またはmaster）ブランチへPushすると、自動でビルド・デプロイされるよう設定
  • ローカルから git push origin main
構成図

これでサイト構築は完了です。
かかった時間は約3日ほどでしたが、仕事の合間に少しずつ進めていたので、実際の作業時間は2日もかかっていないと思います。
コストも年間3,000円程度（独自ドメイン代）のみ。
多少のWeb開発経験があればもちろん簡単ですが、最近は生成AIに相談しながら進められるので、経験がなくても十分チャレンジできると思います。

低コストでブログやWebサイトを運用したい方には、

  • Astro
  • GitHub
  • Cloudflare Pages

の組み合わせはかなりおすすめです。

今後も少しずつ機能を追加しながら、このブログを育てていきたいと思います！