月額200円で独自ドメインでブログを運用する方法

ブログの運用費、節約できてますか?

レンタルサーバー代、できれば払いたくないなぁ。ブログの運用費ってどこまで抑えられるんだろう?とか考えたことあるのじゃないでしょうか。

結果からお伝えしますと、月額200円でブログは運用できます!

当ブログがその運用でやっていますのでご安心ください。

でも少し工夫が必要なのでその方法をお伝えしたいと思います。

月額200円運用で出来ること

200円の運用でも以下のことは実現できます。

  • スマホからもPCからも記事を管理
  • 自分のアフィリエイト広告だけを表示
  • 独自ドメイン
  • 高速な記事表示
  • 記事をGitでmarkdown管理
  • ブラウザから記事の更新可能(CMS機能)

レンタルサーバーとは異なり、自前でホスティングの仕組みを作るのでアフィリエイト広告は完全に自分でコントロールできます。

記事の管理は基本的にmarkdownになりますが、ここは工夫をすればいくらでも自分の好きなように変えられます。

それにしても、月額200円で独自ドメインで運用費込みってかなり魅力的な価格じゃないですか?

ちなみに「はてなブログ」の有料プランで2年まとめて払っても月額600円はかかるので、どれだけお得かは分かっていただけるかと思います。

やったことがある方はわかるかと思いますが、初心者が広告で月額600円稼ぐのって結構大変ですよね?でも200円だったらなんとなく現実味がでてきます。

それでは次に具体的にどうやって200円を実現していったか解説します。

やったこと

実際には以下の方法で実現しました。

  • お名前.comで独自ドメイン取得
  • 静的サイトジェネレータの環境をGitHubのリポジトリに構築
  • netlifyでGitHubのリポジトリをホスティング
  • AWSでドメインの向き先を指定
  • リポジトリにnetlifyCMSの設定ファイルを配置

最初に独自ドメインの取得を行いました。3年契約で約4000円だったので、月額になおすと111円程度になります。わたしは.comにこだわりましたが、こだわりはないという人はここはさらに節約できます。

≫ お名前.comで詳細を確認

次に自分好みの静的サイトジェネレータを選んでmarkdownをGitHubで管理できる環境を作っていきます。

わたしのオススメはHUGOです。記事作成コマンドがあったり、コンバータが高性能だったり、色々面倒見てくれてる感があるジェネレータです。

データソースをmarkdown以外にしたり、APIから取得させたい場合はGatsbyJSが良いです。こちらはHUGOと比べて少し上級者向けです。

環境がGitHubに構築できたらnetlifyに登録していきます。netlifyはかなり優秀なサービスで、リポジトリとの連携さえ正しく設定してしまえば、あとはコミットをトリガーにして自動で更新までしてくれます。おまけにホスティングのURLを自動で生成してくれます。

netlifyの設定が終わったらあとはAWSを使ってnetlifyが生成したURLと取得したドメインを繋ぎます。 取得したドメインではなくてサブドメインにしたい場合はAWSで設定します。

AWSではRoute53とCloudFrontを使います。今のところこの2つの運用費用は月額100円程度です。 これは運用してるブログすべての合算値なので、単体としてはもう少し安くなります。 ということでドメイン代とAWS代でだいたい200円というからくりです。

さて、ここまでできればGitHubにコミットしたら独自ドメインのブログが更新されるという流れは完成です。

さらにブラウザから記事を更新したいという人はnetlifyCMS用の設定ファイルをリポジトリに追加することでそれができるようになります。

メリット

静的サイトジェネレータで作る自前ブログのメリットはざっとこんな感じです。

  • レンタルサーバーの広告が入らないので、自分のアフィリエイト広告を好きな場所に設置できる
  • ページの表示速度がめちゃくちゃ早い
  • ページのレイアウトを自分で好きなようにカスタマイズできる
  • ブラウザからの記事更新もできる

広告を完全にコントロールできるのいうのはアフィリエイトで収入を得ようとしている人には大きなメリットですよね。

基本的には何らかの静的サイトジェネレータを使うことになるかと思いますが、わたしが試したHUGOとGatsbyJSはどちらも表示がメチャクチャ早いです。 特にGatsbyのほうはReactの技術使ってるのでそれが顕著ですね。

レイアウトを自由に変えられるのも大きなメリットですが、HUGOの場合はテーマごと切り替えられるのでブログの戦略を後から変えたいときにも役に立ちます。

ブラウザからの記事更新という意味ではnetlifyCMSを使えば簡単に解決できます。 WordPressにくらべてCMSが無いことが静的サイトジェネレータの弱点でもあるので、netlifyCMSの存在感はハンパないですね。 記事更新がメチャクチャ捗ります。

デメリット

デメリットははっきり言ってあまり思いつきませんが、、強いて挙げるならばこちらでしょうか?

  • スマホから記事を編集するの大変
  • 無いプラグインは自作の必要あり

netlifyCMSがレスポンシブ対応していないのでスマホからの更新は少しめんどいです。 しかし、少しトリッキーなことをすればもう少し楽に解決できます。

それがCloneというアプリ。(iOSの話です)CloneというGitクライアントアプリで直接リポジトリを更新したりできるのでこれを利用します。

Cloneはpush機能が有料ですが、買い切りなので私はあまり気にせず購入してしまいました。

netlifyCMSをスマホで使っても、使いづらいだけで使えないわけではありません。 だから記事の追加だけnetlifyCMSに便り、本文の作成はCloneでとかもありです。

それからCloneのエディタもあまり使いやすいと言える方ではないので、わたしは更に記事編集にMWebというアプリを使います。 使ってみればその便利さがわかるかと思いますが、このアプリのmarkdown編集能力は異常ですね。。

さて、もうひとつのデメリットとして、ほしいプラグインが静的サイトジェネレータになかった場合のケースですが、これはあまり気にならないかと思います。

たとえばHUGOの場合だったら、大体の機能はテンプレに実装されているし、テンプレを選ぶ時点で欲しい機能が実装されているものを選べば良いからです。

Gatsbyの場合は自分のほしいプラグインをnpmで探して追加していくスタイルになりますがこちらも主要な物は先人たちが開発済みなのでほとんど困ることはないです。

いずれにせよ、無ければ自分で作れば良いというスタンスはデメリットでもありながらエンジニアとしては嬉しい環境です。

自分だけの理想のブログを作ろう

この構成だったら200円です。

主な特徴は以下のとおりです。

  1. 月額費用が格安(netlify)
  2. スマホからもPCからも記事を管理(GitHub)
  3. 画像の管理が楽(netlifyCMS)
  4. 自分のアフィリエイト広告だけを表示
  5. 独自ドメイン(お名前.com)
  6. 表示速度が早い(HUGO)
  7. 記事はGitでmarkdown管理(GitHub)
  8. ブラウザから記事の更新可能(netlifyCMS)

あなたもチャレンジしてみてはいかがでしょうか?

≫ お名前.comで独自ドメインを取得