Kouryuの記録帳

思考の発散場所。合気道、ラーメン、日々の生活での気づき、その他ガジェット関係など。

Back to list
技術

【ブログ移転】ほぼ維持費無料の自作個人ブログを立ち上げた話【React × GitHub Pages】

長年ライブドアブログでブログを書いていたんですが、この度自作のブログ(ココ)に移転したため、その方法だったり移転して良かった事だったりを記事に残したい次第。なお過去記事はほんの一部だけ残してます。


元々私のブログは完全に身内向けであり、当時のtwitterアカウントのプロフィールにリンクを乗せて、ごくごく一部の合気道関係者向けの見世物小屋として運営していました。ブログ開設の目的としては、その時の感情なり記録なりを文章化する訓練?くらいの位置付けだったため、ブログのデザインやSEO対策には全く拘っていませんでした。検索流入もほとんど無かったんじゃないかな。
ところがどっこい、最近になってようやく、ブログのデザインにこだわったり、読み手側に立ってUI・UX改善を行い、多くの人に読んでもらいたい!という気持ちが出てきた訳ですよ。

さて、ブログを始めるに当たって、どのプラットフォームを利用するかには大きく分けて以下の3つの選択肢があります。

①ライブドア、Abema、FC2などの企業ブログ
②WordPress、 WIXなどの、ノーコード・ローコードで独自性の高いブログを作れるプラットフォーム
③完全自作


①については、全く技術的な知識が要らないため、ブログを始めるまでのハードルが非常に低いです。それが唯一にして最大のメリットです。文章を書きたいからブログを始めるのに、文章を書く以外の手間が大きいとやる気が無くなる気持ちは非常に理解できますので、この点は特に個人の日記帳のようなブログの運営者にとって非常に大きいメリットだと思います。一方でデメリットとしては、ブログデザインの自由度が低かったり、運営から強制的に挿入される広告表示を切ることが出来ない点が挙げられます。ブログデザインに関しては、テンプレート選択やカスタムhtml・CSSである程度はいじれるのですが、それでもどうにもならない点が多かったです。特にスマホ表示の行間がいじれないのが致命的でした(ライブドアだと、なぜかスマホ表示のみカスタムhtml・CSSが使えない)。広告に関しては、特にライブドアは広告収益を上げたい人向けの設計なのか、ブログ執筆者とライブドア運営がこぞって空きスペースに広告を入れまくる前提のデザインになっているように思えます。2chまとめサイトなんかはよくライブドアで作られていますが、スマホで見ると広告が多過ぎて本文に辿り着くまでに多大なストレスがかかります(そもそも強制ジャンプさせられて本文に辿り着けないことも多数)。私は現時点でブログ運営で広告収益を得るつもりが無く、広告は無い方が良いと考えているためここは大きな足枷でした。ホ○エモンにあんまり良いイメージも持ってないしね。


で、じゃあ企業ブログはやめて②か③にしようと考えた訳ですが、最終的に③を選ぶに至った理由を順番に説明していきます。

一般的に②のメリットは、独自ドメインやデザインの自由度は③に匹敵しつつも、ローコードゆえ本格的にhtml・CSSを学ぶ必要が無いことだとされています。要は、技術的な知識を学ぶ"余分な時間"を削り、その時間を記事の質向上やUI・UX改善、SEO対策に充てられるという訳ですね。一方で、技術的な部分については会社に委託している訳ですので、その月当たり使用料金が発生します(要はブログサービスのサブスク)。これらを踏まえると、②を選ぶ人達の多くは、将来的にブログに載せた広告から広告収入を稼げるようになって、月数千円の維持費をペイ出来る状態を目指しているのではないでしょうか。つまり、趣味ではなく副業としてブログをやる人達向けという事ですね。私の場合ブログに広告を載せる予定が無く、しかも趣味としてブログをやっているので技術的な知識を学ぶことについての抵抗もそこまでありませんでした。なら、いっそ一から自分で作るかと思い至ったという訳です。

ただ、じゃあ一からブログを作るとして、技術的なハードルについては何とかなるとしても、実はほぼ無料で完結するというのはあまり知られていないのではないでしょうか。サーバーのレンタル代はどうするの?とか、ドメイン名の取得にもお金がかかるんじゃね?とか、色々疑問に思う方もいるかと思います。
結論、お名前ドットコムでのドメイン取得とその紐付けだけは手動でやる必要がありますが(維持費はドメインによって違うものの年1,000〜1,500円程度)、その他はほぼLLMに任せきりでした。使用したのはGemini CLI(3.0pro)です。元々WEBエンジニア並の知識が無いと出来なかったことが、今やAIの進歩によって素人でも出来るようになっているわけですね。ユーザーがやることは、最初にAIと対話しながら仕様書を作り、仕様書通りに作らせた成果物の動作確認をすること、管理者画面にてmarkdown形式で記事を執筆すること、そして使っていく上で気に入らないことがあればコード修正の指示をすることだけです。末尾に、このブログがどうやって動いているのかGemini君に質問した回答を載せておくので、技術的な仕様についてはそちらを参考にしてください。VS Codeを入れて2日くらいGemini CLI or Claude Codeと格闘する気合いがあれば、このブログ程度のクオリティの物は完成します。AIの加速度的な進化によって、素人でも簡単に自作ブログを運営出来る時代が到来していますので、今企業ブログやWordPressなどを使っている方も乗り換えを検討してみてはいかがでしょうか。





普通のブログじゃ満足できない!完全自作の「コックピット」で、最強の0円ブログを立ち上げた話

はじめに:なぜ「自作」したのか?

みなさん、こんにちは。このブログを読んでいただきありがとうございます。 実はこのブログ、ライブドアブログやWordPressといった既存のサービスを一切使わずに作られています。

「じゃあどうやってるの?」 答えは、**「記事を書くための『専用ソフト』から自分で作った」**です。

通常、ブログを始めるには「レンタルサーバー」を借りて月額費用を払ったり、無料ブログの広告を我慢したりする必要があります。でも、私はそのどちらも嫌でした。

「もっと自由に、維持費は0円で、しかも世界一表示が速いブログを作りたい!」

そんなワガママを叶えるために、プログラミングの力を使って自分だけのブログシステムを開発しました。

このブログの仕組み(専門用語なしで解説)

このブログの裏側は、ちょっと特殊な仕組みで動いています。イメージしやすく例えるなら、**「全自動のデジタル出版工場」**です。

従来のブログ(WordPressなど)は、読者がアクセスするたびに、サーバーというコンピュータが裏で毎回ページを作っています。注文が入ってから料理を作るレストランのようなものです。だから、アクセスが集中すると重くなります。

一方、私のこのブログは違います。

  1. **私のパソコン(工場)**で、記事を書き上げます。
  2. 「送信」ボタンを押すと、原稿が**巨大な倉庫(GitHub)**に送られます。
  3. すると、倉庫にいる**ロボット(GitHub Actions)**が自動で起動し、一瞬で「HTML」というWebページの形に製本してくれます。
  4. 完成したページだけが、お店の陳列棚に並びます。

読者のみなさんが見ているのは、すでに完成して陳列されたページだけ。だから、待ち時間がなく、爆速で表示されるのです。

こだわりの「自作コックピット」

一番の自慢は、記事を書くための**「管理者用画面」**も自分で作ったことです。 これはネット上には存在せず、私のパソコンの中でだけ動くヒミツの画面です。

MacBook Airの写真

  • 左側: 記事を書くエリア。
  • 右側: 実際のブログでどう見えるか確認するプレビュー画面。

書き心地は最高です。余計な機能は一切なし。 そして、書き終わって右上の**「送信ボタン」をポチッと押すだけ。**

これだけで、裏側でプログラムが通信を行い、原稿データを倉庫へ飛ばし、数分後にはブログが更新されています。 まるでSF映画のコックピットから、遠隔操作で世界に情報を発信しているような感覚。これがたまらなく楽しいんです。

このシステムのメリット

エンジニアっぽい自己満足に見えるかもしれませんが、実は理にかなったメリットがたくさんあります。

  • 維持費が完全無料 サーバーを借りていないので、月額費用は0円です。お財布に優しい!

  • セキュリティが最強 管理画面がネット上に存在しない(私のPCにしかない)ので、パスワード漏洩や乗っ取りのリスクがほぼゼロです。

  • デザインが100%自由 テンプレートという概念がないので、1ピクセル単位で自分の好きなデザインにできます。

おわりに

「ブログを書く」という行為自体は今までと同じですが、その「道具」から自分で作ることで、愛着が段違いに湧いています。

これからは、この自作システムを使って、技術の話や日々の気づきをサクサク発信していきます。 「表示が速いな〜」と感じながら読んでいただければ、開発者冥利に尽きます。

これからもよろしくお願いします!

gemini君、僕の気持ちを勝手に代弁しないでくれ


技術スタック

  • Frontend: Next.js (App Router)
  • Hosting: GitHub Pages
  • CMS: Custom React Admin (Local) + GitHub API
カテゴリ:技術