どうもこんにちは。
これまでWordPressを用いて個人ブログを運用してきたのですが、AstroというSGGベースのJavascriptフレームワークを用いた個人ブログに移行したので、その経緯と詳細について書いていきます。
Table of Contents
Open Table of Contents
WordPress以前
私が個人ブログを始めたのは大学生の頃です。ブログの実現方法としては
- はてなブログやNoteなどのブログサービス
- VPS + WordPress
- 個人開発
がありました。
難易度としては 1 → 2 → 3 の順番に難しいと思います。はてなブログやNoteは運営元がSEOについて保証してくれていますし、 特に労力をかけることなく簡単にブログを始めることができるので、手っ取り早く開設するにはもってこいの環境です。
一方で、複数のテンプレートが用意されてはいますが、カスタマイズ性に乏しいことや、有料アカウントでなければサブドメインの形でしかドメインを付けることができないことなど、制約が存在するのが事実です。 特にその辺りについて気にしなければ良いのですが、ソフトウェアエンジニアとしてはやっぱりカスタマイズ性が欲しい。なので、1番目の方法は当時の私の選択肢からはハズレました。
また、自分のブログがサービスの盛衰に依存することがあまり好ましくありませんでした。
どちらかというと技術のアウトプットがメインなので、ブログで何らかの収益を得るつもりはなく、個人のポートフォリオとしての側面を意識してブログを運営したかったのです。（これは今も同じです）
そうすると、自分のポートフォリオがサービスに完全に依存してしまうのは避けたい。そのような理由もあり、自前（レンタルか何か）でサーバーを用意する形で運営する形を目指しました。
当時の私は開発経験が積みたかったのもあり、次に3番目の個人開発の道を選びました。 そして、選定技術としてはバックエンドにDjango、フロントエンドにVue.jsを用いて開発を行いました。 はい、SSRのNuxtではなく、SPAのVueです。その当時は知らなかったんですよね、SPAの場合はSEOの観点で不利になることに。
また、Djangoの管理画面からMarkdownエディタを実現したり、RDBでブログの情報を管理したりと、今考えればわざわざブログのために過剰な技術を駆使していたと思います。 もちろんその際に行った開発で数多くの学びやスキルが得られたことは事実ですが、個人ブログをゼロから作るという目標は完全に頓挫してしまいました。
ただ、個人ブログで無制限に情報を発信するプラットフォームは欲しかったので、2番目のVPS + WordPressというやり方で一旦は個人ブログを作りました。
WordPress時代
WordPressはCMSとしては非常に優秀だと思います。Conoha VPSで契約していたのですが、WordPressが契約した瞬間からインストールされている。 しかも、各種プラグインを入れることで、簡単に拡張機能がインストールできるのは体験としては非常に良かったです。
しかし私は職業プログラマなので、WordPressの細かい不具合や動作が微妙なことにだんだん不満が出てきました。 Google AnalyticsやSEOのためのプラグインの動作が無料だと制限があること、そもそもプラグインのUI/UXがあまりよくないこと、色々ありました。
また、結局気に入ったテンプレートが少なかったことや、WordPressといえどもカスタマイズ性が要求を満たすことができなかったこと、 VPSの契約料金が高いことが原因で、WordPressでブログを書くのが辛くなり、やめてしまいました。
WordPressからの移行
個人ブログを巡る以上の一連の失敗を踏まえて、私は以下の条件を必要としていました。
- SSR/SSGによるフレームワークを用いること
- GitHubにpushした瞬間にデプロイフローが走ること
- 簡単に実装できること
- 無料で運用できること
SSR/SSGによるフレームワークを用いる
Vue.jsでの開発経験を踏まえて、SEOに有利になるようにSSR or SSGでサーバーからページが返却されるものを目指しました。
技術選定としてはNuxtかAstroがありました。NuxtはVue.jsエコシステムのSSRを可能にしたフレームワークですが、こちらだとレンダリングのためのアプリケーションサーバーを用意する必要がある。
なんだかんだアプリケーションサーバーを運用するための維持費がかかるんですよね。しかも、ブログなのでWebアプリケーションのような複雑な処理が必要というわけでもない。
ということで、Astroが有力な選択肢として挙がりました。
ReactやVueなどのUIフレームワークのコンポーネントを自由に使うことができて、基本的にはJavascriptが含まれない形でビルドされてクライアントにレスポンスされる。
Typescriptによる型注釈の恩恵を十分に受けながら、パフォーマンスが非常に優れていてSEOの観点で優秀。
極めつきは、localhost:4321を常に開いておけば、執筆途中の記事をリアルタイムでホットリロードできる点も魅力的です。
私の満たすべき要件においては、Astroが理想的で完璧に近いフレームワークでした。
GitHubにpushした瞬間にデプロイフローが走ること
GitHubにpushした段階で瞬時にデプロイされることが理想でした。ブログの記事もバージョン管理したいですよね。
また、普段業務でもプライベートでもコリコリにチューニングしたNeovimを使用しているので、Neovimのキーバインドを使用して高速に記事を書きたい。
フレームワークとしてAstroを使うことが決定したので、それを用いることができるホスティングサービスとしてGitHub Pages or Cloudflare Pagesがありました。
GitHub PagesもCloudflare Pagesも対象ブランチへのpush時にホスティングサーバーにデプロイすることができます。
大きな違いとしては、Cloudflare Pagesはプライベートリポジトリのpush時にもデプロイできる点です。 GitHub Pagesだと、個人の無料アカウントではパブリックリポジトリのデプロイしかできません。ブログをプライベートリポジトリで運用するという要件の可能性を考えた時に、 Cloudflare Pagesに軍配が上がりました。
簡単に実装できること
AstroはJSXに似たような宣言的な記述でUIを実装できる仕組みがあります。また、ReactやVueのコンポーネントをそのまま実装できる点も魅力的です。 MDXが使用できるので、Markdownで足りない、高度なコンポーネントを使用したい場合にも簡単に実現できるのも評価ポイントです。
GPT-4もあるのでブログのデザインをゼロから実装しても良かったのですが、Astroには最初から有志でテンプレートが用意されています。 しかも、結構シンプルで良いものがあるじゃないですか。ということでAstro Paperをカスタマイズする形でまずは世にリリースすることにしました。
無料で運用できること
Herokuが無料サービスを終了した今、有力候補としてはCloudflare Pagesだと思います。お名前.comで無料でドメインも取得できたので、完全に無料です。
完成！
ということで、
- Astro
- 一部ReactやVueコンポーネント
- Typescript
- Cloudflare Pages
を用いたブログができました！当初考えていた私の個人ブログの要件を全て満たすことができ、尚且つ簡単に運営できそうです！
もしチャートが必要だったり、高度なUIが部分的に必要であればmdxが使用できる点もとても気に入っており、構成としてはもう完璧に近いです。
こちらのブログはどちらかというと日々の技術のアウトプットが中心なので、小さい単位でブログの更新をしていこうと思っています。
個人ブログもアジャイルで、ですね。