【Hugo初心者】独自ドメインサイトで最安1円運用&高速化を叶える方法【ゆるゆる解説】

【Hugo初心者】独自ドメインサイトで最安1円運用&高速化を叶える方法【ゆるゆる解説】 #

1 ブログ運用コストとスピードの常識を覆す #

「サイトを運営したいけれど、サーバー代を毎月払うのはもったいない」
「Webサイトの表示スピードが遅くてストレスだ」
—そんな悩みを持つクリエイターやブロガーは多いでしょう。

同じように悩んでいた私は、Hugoというツールに出会い、今はHugoで２つのサイト運営をしています。WordPressなどの動的CMSを使わず、Hugoという静的サイトジェネレーター（SSG）と無料のホスティングサービスを組み合わせることで、初年度の運用費をたったの「1円」に抑えつつ、PageSpeed Insightsで100点近い点数を叩き出す超高速サイト運用を実現しました。

この記事に続く「Hugo初心者・ゆるゆる解説」シリーズでは、「Hugo？ヴィクトル…さん…？」「Go言語…どこにゴーするの…」というレベルの超初心者である私が実践した、導入からサイト公開・運用までの具体的な手順、費用を最小化する具体的なクラウドサービスの選定について解説し、また、超初心者の私がつまづいたポイントも惜しみなく公開していきます。

シリーズ初回の本記事では、まだHugoを知らない人にもとっつきやすく興味を持っていただくために、Hugoとは何ぞやというところから、実際初年度１円を叶えられるのかという解説まで行なっていきます。

第1章：Hugoとは？やわらか〜く説明！運用コストを抑える基礎戦略 #

2 Hugoを採用するメリット：なぜWordPressではないのか？ #

私もつい先日までWordPress一択だと思っていました。今回、新たなサイト作成方法と出会うきっかけになったのは「サイトがなかなか表示されないあまり、そのままページを閉じてしまう人がいるんじゃないか」「用意した画像が表示されずに、こちらが意図しないような読み方をされてしまうこともあるんじゃないか」と考えた「ユーザビリティ」によるものでした。

そこで、サイトの表示スピードを念頭におき、他のサイト作成方法がないか調べていったのです。

まず、従来のWordPressなどのCMSは、訪問があるたびにデータベースにアクセスし、ページを動的に生成します。これにはサーバーリソースと時間が必要になります。

一方、訪問前にページをあらかじめ用意しておいてくれる方法があるとのこと。これがHugoのような静的サイトジェネレーター（SSG）の仕組みです。もっと詳しく言えば、サイトのファイルをHTML形式で生成（静的化）しておくとのこと。

何を言ってるのかよくわからない？例えば、あなたはコロッケを食べようとしています。あなたはサイトの訪問者であり、コロッケはサイトのページのことです。

WordPressは、レストランです。店内にやってきたあなたが注文する「コロッケ」というメニューに合わせて店内で調理を始めます。このレストランには材料は揃っていますが、じゃがいもを潰して丸めて、衣を付けて、揚げて、そうして出来上がったものがあなたに届きます。
Hugoは、お惣菜です。工場でパック詰めまでされているので、出来上がったコロッケを購入できます。

みたいな感じです。この例えで分かる通り、Hugoの利点はスピード。

スピード◎: データベース通信がないため、表示速度はWordPressより圧倒的に速く、ユーザー体験（UX）向上に直結します。レストランでは注文のやり取りをした後に調理工程があるけど、お惣菜ならお客さんがそのまま買うだけですよね。
セキュリティ◎: 動的な要素がないため、データベースへの攻撃など、セキュリティリスクが極めて低い状態になります。調理バイトのふりをして潜入した悪いやつがこっそり料理に毒を入れるというリスクもありません。工場でパック詰めされた食品であれば検査して出荷し、お客様に届けられるのです。
コスト◎: サーバー負荷が低いため、後述するサーバーレスホスティングの無料枠で運用が可能です。惣菜屋にはキッチンスペースは必要ないので、その分場所代を節約できるわけですね。
初期設定の簡単さ×: WordPressはレンタルサーバーの自動インストールで簡単に実装できますが、Hugoは自分で実装を行います。WordPressは工務店にお願いするだけでキッチン付きのレストランを街(ネット)に構えられますが、Hugoは自分の敷地(パソコン)内に工場キット(これがHugo本体)を設置し、街にあるお店までの出荷ルートも自分で設定するのです。また、どちらもデザインテンプレートは豊富でカスタマイズも可、つまり、振りかけるだけで簡単にカレーコロッケやクリームコロッケなどのお好みの味になる魔法の粉がたくさんあり、この魔法の粉を自分で調合することもできます。

私もコロッケは出来立てが好きですが、しかし、サイトにホクホク感やサクサク感を求める人はきっといないので、サイトの訪問者は作り置きのお惣菜にメリットを感じるでしょう。

3 運用費「1円」を実現するホスティングサービスの選定 #

サイトの初年度運用費をたったの「1円」に抑えるカラクリは、サーバーレスホスティングの無料枠の活用にあります。

サイトを作成したことがある人の多くはレンタルサーバー(ホスティングサービス)を契約していたのではないでしょうか？WordPress(CMS)を利用できるサーバーは安くても月数百円〜という価格帯です。Hugoを使えば、サーバーを用意する必要がないので、無料のホスティングサービスを選択することができるのです。つまり、サーバー代はなし、ホスティングは無料の選択肢あり、といったところです。

私はホスティングにNetlifyというサービスを利用しています。Netlifyは、静的ファイル（HTML, CSS, JS）のホスティングに特化しており、個人運営の一般的なブログのアクセス量であれば、サーバー費用が永年無料となる太っ腹な無料枠を提供しています。

初年度の「運用費1円」の具体的な内訳は、独自ドメインの年間契約料のみです。ドメイン会社やドメインの種類によってこの価格は変わります。私はXserverドメインで「.com」ドメインを1円で購入しました(記事執筆時点の価格・初回のみのサービス価格)。

また、初年度以降は更新料がかかるため、更新料を安く設定しているサービスを選んだり、２年度以降は移管料の安いサービスに移管するのがおすすめです。しかし、更新料も年額2000〜3000円に収まるものが多いです。Xserverドメインは更新料も国内の他サービスと比較して安く、記事執筆時点では年間で1,602円です。月に換算すれば約133円です。

さらに更新料・移管料が安いと言われるのはCloudflare。公式サイトにも卸売価格と記載があります。ただ、アメリカの企業が運営・アメリカドルで扱われているので、円安の今はそこまでのコストメリットは感じられません。私が見た時には年間10円程度しか変わらなかったので、現段階においては私のサイトはXserverドメインのままでもいいかなと思ってます。ただ、円高の時代がくれば考え方が変わるかもしれません。

サーバー代は完全にゼロで必要経費がドメイン料のみとなれば、初期設定の手間はかかりますが、このコストメリットは計り知れません。

4 次回へ続く：技術的な壁もゆるーく越える！「真似するだけ構築」のステップへ #

ここまでで、あなたはHugoがなぜ優れているのか、そして運用費を極限まで抑えるカラクリを理解できたはずです。

スピード、セキュリティ、そしてコスト。サイト運用において最も重要な３要素で、HugoはWordPressを大きく上回るメリットを提供します。
特に、サーバー代をゼロにすることで、あなたは金銭的なプレッシャーから解放され、本来注力すべき「コンテンツの質」に全エネルギーを注ぎ込めるようになります。

Hugo公式サイトをチラ見したあなたが英語だらけのページに引いた気持ちもわかります。しかし、ご安心ください！
次回の記事では、Hugo導入を司ると言っても過言ではない「ターミナル部長」をご紹介します。
【Hugo初心者】真似するだけサイト作成ガイド【ゆるゆる解説】 >
Hugoのインストールまでの準備、そしてあなたのパソコンの中にサイトの雛形を作成する具体的な手順を、次回も超初心者目線でゆるく解説していきますので、一つひとつ一緒にやっていきましょう。