はじめに(シリーズ全体のゴール）

今回から数回にわたり、「Remix × Cloudflare Pages × microCMS」を使って、無料で運用できるブログサイトを構築した過程をまとめていきます。

第1回では、プロジェクトの背景や「なぜこの技術スタックを選んだのか」を中心にお話しします。

結論、かなり大変でした💦（知識不足や経験不足を如実に感じました）

しかし、Web開発未経験だけど、何か開発してみたいと考えている方やWeb標準などWebサイト構築の知識を勉強してみたいと考えている方にとっては、

良い機会になるのではないかと考えています。

前提条件

無料と聞いて誤解を生みたくないので、この記事の内容について、以下の前提条件があると考えています。

• 基本的なプログラミングに関する知識を有していること
• WEB開発の基礎的な知識を有していること（ここに関しては、私も都度調べながらではありますが）

要するに、プログラミングやWEB開発の込み入ったIT知識無しで楽に簡単にできるものではないということです。

また、現在はプログラミングの知識が無くても、容易に独自のブログを構築できる仕組みがございますので、

プログラミング知識なんて不要だという方は、以下のリンクを参考頂けると良いと思います。

（ヒトデさんのブログやyoutubeチャンネルは、とてもわかりやすく私も様々な面で勉強させていただいているので参考までに...)

技術選定の背景

サイト構築の目的

私はこれまで、主にローカル環境で動作するアプリケーション（デスクトップ向けツールなど）の開発を行ったことはありますが、Webアプリ開発の経験や知識はほとんどありませんでした。

そのため、今回のサイト構築では「Webアプリケーションの構造やデプロイの仕組みを実際に手を動かしながら理解する」ことを最大の目的にしました。

昨今WordPressなどを用いてノーコードでWebサイトを作成できますが、あえて、自前でプログラムを組んで作成することにしました。

• 目的
  • Web開発の未経験から、フロント〜バックエンドまでの構成やデプロイの仕組みを体験的に理解する
  • ポートフォリオとして作品やコードを公開でき、学習アウトプットができるブログサイトをつくる
  • わざわざ自前でプログラムを書くなら無料で運用したい
  • ホスティング・記事管理・ドメイン・メールを1人で完結できること

技術選定の全体像

今回選んだ技術スタックは以下の通りです。

Markdown記述で記事管理をすることを検討しましたが、WebAPIの仕組みを勉強したかった為、ヘッダーレスCMSであるmicroCMSを使ってサイトを構築しました。

また、単に記事を表示するだけでなく、ユーザーからのリクエスト（問い合わせ）を受け付けるような「双方向の処理」についても学習したいと考え、お問い合わせフォームを追加しました。

Remix選定理由

始めに、基礎知識習得の為にHTML、CSS、Javascriptで動くWEBページを作成し、JavascriptのライブラリであるReactを学習しました。

Reactベースのフレームワークを色々触っている中でRemixを選定しました。

個人的に魅力を感じたのは、各ルートファイル内に、UIの記述（Reactコンポーネント）とサーバーサイドの処理（loader や action 関数）を一体的に記述できるという点です。
これにより、フロントとバックの責務を明確にしつつ、同一ファイル内で完結するシンプルな構造で開発できるため、私のようなWeb開発初心者でも扱いやすいと感じました。

他にも以下の点が挙げられます。詳しくは、私以外の人が詳しく説明してくれているので、参考リンクに載せておきます。

理由:

• SSR対応でSEOに強い
• ルーティングとデータフィッチの一体化
• Cloudflare Workersとの親和性

microCMS選定理由

選定理由は、以下の通りです。

無料枠が大きく、シンプルに記事管理がしたい方にはおすすめできます。

記事内容を入力するリッチエディタ内にHTMLを記述する際は、工夫が必要です。

• 理由:
  • REST API/GraphQL 対応の柔軟なヘッドレスCMS
  • 無料枠が個人利用に十分
  • アイキャッチ画像や記事内の画像についても保存可能な点

Cloudflare選定理由

無料枠が広く、デプロイが容易であることが選定理由です。

無料枠が広いところにメリットを感じるので、個人開発でポートフォリオを作りたい方には、とてもおすすめできるサービスです。

WordPressも利用できるようですが、キャッシュ事故対策が必要のようですね。

まとめ

ブログ開発に用いたRemix、Cloudflare、microCMSについて紹介しました。

自主開発でコストを抑えたかったので、特に無料で開発、デプロイ、その後の管理が出来る面に着目しました。

次回は、Cloudflare×Remixテンプレートを用いたプロジェクトファイルの作成～Cloudfrareの初期設定まで紹介します。