テクノロジー ブログ運営

HugoとNetlifyを使って完全無料の静的サイトを作ってみた

By 栞 09 November 2020
HugoとNetlifyを使って完全無料の静的サイトを作ってみた

前から興味のあった静的サイトがやっと運営できるようになったのでメモを兼ねて書き留めておきます。

使用したもの

Hugo

Go 言語で書かれた静的サイトジェネレータです。ほかにも Jekyll や Gatsby も試しましたがとにかく速い Hugo に惹かれました。 自作テーマも考えましたがそれなりに時間と労力を要するので断念しました。無料でも素敵なテーマはたくさんあります。まとめてテーマが見れるサイトも参考にしました。わたしが使用しているテーマのはLiva Hugoです。

公式サイトはこちら

Netlify

静的サイトをホスティングするためのサービスです。他にも Amazon S3、Firebase を検討しましたが Amazon はクレカ入力が必要なので断念し、Firebase は Netlify に比べて無料で使える容量が少なかったため Netlify を選びました。GitHub との連携がとても簡単にできるので CI/CD がデフォルトで楽なのも魅力的です。

公式サイトはこちら

Git と GitHub

Hugo のテーマのクローンと Netlify のデプロイに使います。これを読んでいる人たちは既に GitHub を持っているものだと思って話を進めていきます。

公式サイトはこちら

OnlyDomains (任意)

ドメインが購入できるサイトです。nordic-life.euを購入しました。地域ドメインなので.eu の制約を満たす必要がありますが、比較的お手頃で信用度が高いドメインが買えたので満足です。以前運営していた WordPress ブログはお名前ドットコムでドメインを購入した記憶があります。もちろん Netlify が自動で生成するランダムな URI でも趣味程度のブログは運営できるのでドメイン購入は任意です。

公式サイトはこちら

サイトを作る

1. Hugo をインストールする

これを読めば全部わかる公式サイトの説明がどうしても読みたくない人はどうぞ。

Mac または Linux

brew install hugo

Windows

brew install hugo

2. Hugo サイトを作る

いま参考にしてるのはこちら公式サイト。 一行で全部生成できます。myHugoSite のところに自分がつけたいフォルダ名を入れてください。

hugo new site myHugoSite

3. Hugo のテーマを追加する

上の続きから。さっき hugo コマンドで作ったフォルダに移動します。同じ名前を入れましょう。 テーマはBeautiful Hugoを選びましたが、公式のテーマ集から好きなものを選べます。

cd myHugoSite
git init
git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo

これで全部揃った！と思ったら実はコンテンツがないので真っ白のページになります。

4. Hugo にコンテンツを追加する

themes 内にある exampleSite フォルダにデフォルトで例となるコンテンツが入っています。これを全部ルートディレクトリにコピーするとテンプレっぽいサイトが出来上がります。 /themes/beautifulhugo/exampleSite/config.toml -> config.toml に、/themes/beautifulhugo/content/ -> content/にという感じ。面倒くさがりなので exampleSite の中身を全部ルートにドラッグアンドドロップすると書き換えますか？と聞かれるのではいを押せば全部移動します。

5. ローカルにサーブする

ここまで上手くいけば以下のコマンドで hugo がローカルに動きます。

hugo server

コンソールにエラーがないことを確認したら あなたのサイトが同じように出来ているはずです。

わたしが見えている画面はこんな感じ。 image 数分でサイトが作れてしまう簡単さに驚きが隠せませんが、コンテンツ等も自由に変えられるのでブログなり備忘録なり好きなものを書けます。

サイトをデプロイする

ローカルに動いているブログではつまらないのでインターネットに上げたい！ということで、Netlify を使って簡単にデプロイしてみましょう。

0. Hugo サイトを GitHub にアップロードする

先ほど作った Hugo サイトのフォルダを GitHub に上げます。Git の説明は特に書きません。 レポジトリはプライベートでもオッケーです。

cd myHugoSite
git remote add origin git@github.com:username/myHugoSite.git
git branch -M main
git push -u origin main

1. Netlify に登録する

無料でこちらから登録できます。GitHub との連携も可能です。

2. Git から新しいサイトを作る

新しいサイトを作るボタンを押します。 image

GitLab 他を使っている人は各自で好きなように進めてください。 ここでは GitHub と連携させます。 image

レポジトリが選択できるようになるのでわたしの場合は shyamajp/nordic-life を選びます。 image

デプロイの設定をします。 image Branch to deploy に書かれたブランチのみがサイトに反映されます。 Build command は hugo、Publish directory は public に変えてください。

終わったら一番下の Deploy site を押します。これで次から main にコミットをプッシュするたびに自動でデプロイされるという豪華な CI/CD が完成します。

ちなみにわたしは一番最初は CSS が反映されない／リンクが動かない（example.com にいってしまう）問題がありましたが、これは Hugo の config.toml ファイルにある baseURL を Netlify で使用しているものに変えたら直りました。

サイトのドメインを設定する（任意）

0. OnlyDomains でドメインを購入する

自分の好きなドメインをなんらかのドメイン提供サイトから購入します。日本だとお名前ドットコム(https://www.onamae.com/)やムームードメイン(https://muumuu-domain.com/)、さくらドメイン(https://domain.sakura.ad.jp/)あたりが有名です。以下の説明はOnlyDomainsで購入した場合になりますが、内容はどこも変わらないはずです。

1．Netlify でドメインを設定する

Site settings > Domain management をクリックします。Add domain alias というボタンを押して購入したドメインを入れます。 DNS 設定を促されます。

2. OnlyDomains の DNS 設定を変更する

Domains > My Domains > DNS Settings から Netlify のネームサーバーを委任（Delegate）します。 数分も経てば自分のドメインから自分のサイトにアクセスできるようになります。

3．Netlify で HTTPS を有効化する

デフォルトで Let’s Encrypt による SSL 化ができます。HTTPS がついているので、DNS 設定がうまくいった後、勝手に証明書を発行してくれます。 これでベーシックな独自ドメイン+静的サイトの完成です。

まとめ

初心者でも簡単に完全無料でブログが運営できます。ドメインを使用しても大した金額にはなりません。もしトラフィックや容量が超えたら自動的にストップするので追加料金を取られる心配もないですし、個人の範囲で運営するブログなら十二分です。静的ブログ、既にめちゃくちゃ気に入っています！