今回のブログ立ち上げの思考経過

今回のブログ立ち上げで自分が最初に考えたことをまとめてみました。

【目的】

自己の習得した技術をブログにすることで、技術への正確で深い理解に繋げ、おまけ程度にはマネタイズを図りサーバー維持資金への補完とする。よって優先順位は以下の通り。

最新の技術を身につける。
運用コストを極力抑える。収益よりも支出が多いと継続が難しくなるため。
運用の手間や記事の投稿などの手間などの、記事以外の手間は極力減らす。
記事の内容は、１番は技術系、次が趣味系という内容を予定。

【運用環境への考察】

ブログを始めるための運用方法をリストアップしてみました。

＜無料サイト系のデメリット＞

最新技術の習得につながらない。
無料系は自動的にサイトの広告が表示され、収益につながらない表示が増える。また意図しない広告が表示される場合もある。
ブログ専用サイトになるおんで、手間はたぶん最低限かな

＜有料サイト系のデメリット＞

最新技術の習得につながらない。
コストがかかる点が問題。継続せずにやめる可能性が高い。
たぶん一番手間がかからない。

＜独自系：wordpress＋自宅サーバー＋Cloudflare Tunnel＞

Cloudflare Tunnelだけは目新しい。
基本無料のみなので継続は容易
wordpress自体が高機能となっており記事の更新など管理が複雑化している傾向があり、習得には多少のコストがかかる。※許容範囲内？

＜独自系：JSフレームワーク＋GitHub＋ヘッドレスCMS＋Cloudflare Pages＞

CMSの新形態であるヘッドレスCMSによるコンテンツ管理＋JSフレームワーク
基本無料のみなので目的は達成。
SaaSを利用した運営は良いが、サービスが終了した場合に詰む。乗り換えコストと手間の増大

【開発環境】

よって、上記の考察や下記のフレームワークの情報から、将来の大規模アプリ開発への勉強の一環として、フロントエンドフレームワーク＋ヘッドレスCMS＋Cloudflare Pagesでブログサイトを構築してみようと考えました。

＜エディッターについて＞

開発コード環境は一般的には IDE という言われる統合環境をインストールし、開発環境に合わせた拡張機能を追加インストールします。VS Codeが最適ではありますが、軽量高速なZedでもAstro機能拡張が実装されたので、こちらを利用します。

＜開発用デスクトップ環境＞

コードの開発には、npm（Node Package Manager）や、GitHubなどの他のクラウドサービスとの連携が必要になります。（参考：npxとは、「Node Package Execute」の略で、npmと違い Node.js のパッケージをインストールせずに一時的に実行するためのコマンドラインツールで、環境を汚さずに実行だけできるコマンドです）

OSの種類	特徴
Linux	全世界のWEBサーバーの凡そ70%がLinuxとも言われるほど、サーバーでのシェアは高く、開発用ツールも一番揃っています。しかしデスクトップGUIの洗練さとアプリの対応はmacやwindowsに比べて格段に落ち、開発者用のマシンにはあまり向いていません。
macOS	元から Unix系のOSとして開発されていた経緯から、Linux系のコマンドにも強く、ほとんどのLinuxコマンドが利用できます。デスクトップインターフェイスは秀逸で多くの開発者に開発マシンとして選ばれています。
Windows	ビジネス用、一般用でのシェアは圧倒的でゲーム用にも向いていることから、デスクトップマシンのシェアは一番。WSL（Windows Subsystem for Linux）をインストールすることで、Windows上でLinux環境を実現します。基本的にはLinuxを仮想マシンとして稼働させ、ファイルなどは共通化することでLinuxの良いとこどりをしたもので、v2.0からは多くの利用者が活用しています。

ブログ用の環境には高度な開発環境は必要ないので、macでもWindowsでも問題ありませんが、WSLをインストールする手間を省くため、今回はmacOSで進めます。

【Dev Container】

開発環境の統一化などで複数メンバーによる開発においては、DevContainerを利用した開発はメジャーですが、正直ブログ程度の１人で開発できる環境においてDevContainerを導入するのは、かえって手間と維持が面倒そうなので、今回は保留にしました。

【フロントエンドフレームワークの特徴】

通常、サイトを構築するにあたって便利な関数やライブラリ群を「設計思想」にしたがってまとめたものがフレームワークと呼ばれ、記述するコードもその設計思想を踏襲するようにすることで、サイト開発を効率的に行うことを可能します。そのためフレームワークの思想への理解とコードの特徴を学習する必要があるものの、学習後は実装コード全体に統一性が生まれコードが読みやすくバグが少なくなる傾向があるため、大規模なサイトでは必須になってくる要素です。

フレームワーム名	作成者	特徴
React （利用者：多い）	Meta社（Facebook）	コンポーネントベースでUIが管理され、Virtual DOMを通じて差分のみレンダリングするために表示が高速。フレームワークというよりUIライブラリに近い。※個人的には嫌い
Next.js	Vercel社	Reactベースのフルスタック（全機能）フレームワーク。Reactがクライアント側のみのライブラリに対して、サーバー側も含まれていることからより最適な描画方法が選択され描画の高速化などが期待できる。 ※現在非推奨！（CEOがゴミなので今は嫌い）
Vue.js （利用者：多い）	尤雨溪	個々がシンプルで学習コストが低い。個々の組み合わせで様々な事が可能。コンポーネントベース。シンプル故に様々なライブラリとも組み合わせができる。日本語の資料が多い。個人的には気に入ってはいる。
Nuxt.js	Alexandre Chopin等	Vue.jsベースのフルスタックフレームワーク。特にSPA（Single Page Application）を利用したサイト構築が得意。
Astro	Astro Technology Company	Astroはページ全体を静的なHTMLにレンダリングし、不要なJavaScriptを削除することで高速なパフォーマンスを実現。ReactやVueなど様々なUIフレームワークを併用可能な設計。SPAよりMPA向き、初回のページ表示が早い。ブログには最適なフレームワーク。

<参考>

Next.js から Astro に移行した結果
Reactには、React Nativeと言ったスマホのネイティブアプリ作成にも利用できるものもあり派生系が多く広範囲にサービスを提供する場合には、学習コストが相対的に低下する。
但し、iOSやAndroid向けのクロスプラットホームでの開発は。React Nativeより、GoogleのFlutterの方が勢いがあり、UIが共通化されるので機種が違っても操作感が変わらず、ビジネス用途では特に利便性が高い。よって、Reactを無理に採用する根拠もないかと。

【オープンソース（無料）のヘッドレスCMS】

オープンソースで自社サーバーを利用するヘッドレスCMSはあまり種類がありません。microCMSなどのように、SaaS型のクラウドサービスとして提供している会社が多いようです。しかし、データを自社で持ちたい、大規模化したときの利用料が気になるなど、オープンソースにも大きなメリットがあります。但し、自前サーバーが必要になります。

名前	特徴
strapi	OSS版ヘッドレスCMSでは一番有名か。MITライセンス。個人・商用利用ともに無料だが、高機能版を有料で提供。※本体はReactベースみたい例：npx create-strapi-app@latest my-strapi-project --quickstart ※ quickstart オプションをつけると、DBはSQLiteになる。
Sanity	柔軟なデータスキーマとリアルタイム共同編集が強み。動的なコンテンツ管理に強い。クラウド型(SaaS)。無料枠。
Ghost	JavaScriptで書かれ、Node.jsで動作。MITライセンスの下で配布。Docker Hubにオフィシャルイメージあり。ブログ型のWebサイトに特化したヘッドレスCMSであり、WordPressに近い構造を持っている。
Decap CMS	旧Netlify CMS。MITライセンスの下で配布。記事が少ない。GitベースのオープンソースCMS。Gitレポジトリと直接連携。例：npm install decap-cms-app --save
Directus	大手企業での導入事例多数。JavaScriptで実装、Node.JSで動作。既存のSQLデータベースを高速API化。データベースの構造を自動でAPIに変換。SQLデータベースをそのままAPI化。
Wagtail CMS	Pythonベース。NASAやGoogleでも採用。例：pip install wagtail
Payload CMS	DBがMongoDB固定みたい。JavaScriptベース。例：npx create-payload-app
Tina	Unity社で利用。Apache2.0ライセンス。例：npx create-tina-app@latest
Keystone.js	企業開発。例：npm create keystone-app@latest
Publii	GPL3.0ライセンス。DBを使わずにjsonファイルなどで保存。

※ いまどきcms20選

＜ヘッドレスCMSの選択＞

基本的には無料でないと持続できない個人ブログなので、strapi , Ghost , Directus などのMITライセンスのオープンソースで利用できるものに絞られます。そのうえで将来的な拡張や通販サイトなどの構築にも役に立ちそうなのは strapi のようなので、今回はこれで行こうと思います。

【結論】

という事で、今回のブログの技術基盤は、Astro + Strapi + Alloydb(PostgreSQL) + WindtailCSS + Cloudflare Pages + Macbook Pro + Zed editor で進めることにしました。ここでポイントはビルドの流れです。

macで strapi コンテナ起動、記事を作成
ブログ作成の build で、strapi から静的ページと画像をコピーして、本番では、strapi を利用しない（自前サーバー不要！）
buildで作られた本番のデータを一式、Cloudflare Pagesにアップ（Deploy）。サイトはすべて静的データでJavaScriptも最低限。表示超早いｗ

肝は本番はすべて静的データ。strapi は記事書くときだけ利用する感じです。