/ #ブログ #テクノロジー 

NetlifyでHugoブログを独自ドメインで無料ホスティングするやり方

Hugoでクイックスタートのブログを作ったけれど、
どのサービスでホスティングするのか迷っている。
Netlifyっていうのが良いらしいけど使い方がわからない。
こういった方の為に、かなり詳しく手順を解説します。

本記事でやること

  • Hugoで作成したブログをgitlabに登録します。
  • Netlifyで無料ホスティングします。
  • Netlifyの設定で独自ドメインを設定します。
  • ブログ記事を作成して、デプロイされる所を確認します。
  • ブラウザで自分のブログを表示される事を確認します。

この記事を書いている自分は、このブログをNetlifyからホスティングしています。
その時に実際に行った手順と経験を解説します。

もし、まだHugoでクイックスタートのブログを作ってないという方は、
この記事を参考にHugoブログを作るところから初めてみてください。

簡単に作れる!Hugoで自分のブログを作る方法

ステップ1: gitlabにHugoブログを登録します。

Hugoブログはgitlabに登録しておくのがベストです。
なぜかと言うとgitlabには無料でプライベートリポジトリが作れるので、
ブログ内容を公開しなくて済みます。

具体的な操作は このような感じでやります

gitlabでの操作

  1. gitlab にアクセス
  2. [newProject]→Project nameにmyblogと入力→Privateにチェック(デフォルト)→[Create project]

Linuxでの操作

  1. linuxでhugoブログのdirectoryに移動
$ cd /home/appuser/sample_hugo/myblog
  1. リポジトリに登録
$ git remote add origin https://gitlab.com/あなたのユーザ名/myblog.git
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin master

gitlabで確認

  1. myblogリポジトリを確認します。Hugoブログのファイル群が表示されます。

ステップ2: Netlifyのアカウント登録

  1. Netlifyを表示
  2. [Get start for free]をクリック
  3. gitlabをクリック
  4. 連携する操作をポチポチ進める。

ステップ3: Newサイトを登録する

  1. [New site from Git]をクリック
  2. [gitLab]をクリック
  3. 連携されるとプロジェクトが表示されるので、myblogを選択します。
  4. [HUGO_VERSION]:[0.53] に変更します(ご自身のHugoバージョンと合わせてください)
  5. [Deploy site] をクリック
    デプロイ成功するとこのような画面になります。

sitedeploy

ステップ4: 独自ドメインの設定

独自ドメインを持っていない方は省略してもブラウザで表示できます

  1. 2と大きく表示されている[Set up a custom domain]をクリック
  2. ドメインを入力します。サブドメイン付きでも大丈夫です。
      例: example.com または myblog.example.com
  3. 本当にあなたのドメインですか?って聞かれるので[Yes, add domain]をクリック
  4. HTTPS欄の[Force https] を押すと、簡単にHTTPS化してくれます。(すごい!)

ステップ5: ブラウザで表示

ここまできたらURLにアクセスして表示してみましょう。
自分の独自ドメインか、nervous-beaver-XXXXXX.netlify.comのようなサブドメインがセットされています。

myblog

ステップ6: ブログ記事を作成して、gilabへPush

netlifyの良いところはgitlabへ新しい記事をPushすると、自動でデプロイしてくれる所です。
この為に苦労してここまで設定をしてきたといっても過言ではないです。

Linuxでの操作

  1. 新しい記事を作成 draft: trueの部分を削除します。
$ hugo new post/netlifyGood.md
$ vim content/post/netlifyGood.md
---
title: "NetlifyGood"
date: 2019-01-08T22:46:49+09:00
draft: true ここを削除
---
Netlify is good !
最高だぜ。
  1. gitでaddしてcommitしてPushする
$ git add content/post/netlifyGood.md    
$ git commit -m 'post netlifyGood'    
$ git push  

これでgitlabへPushできました。

ステップ7: netlifyのデプロイタブを確認

  1. [Deploy]タブをクリック
  2. [Production: master@XXXXXX post netlifyGood]をクリック
    ログの最後のほうにSite is liveのように表示されていればデプロイ成功です。

log

ステップ8: ブラウザでブログ記事の投稿確認

[Preview deploy]をクリックすると、ブラウザでブログが表示されます。
ここで[Netlify is good ! 最高だぜ。]の記事が作られていれば成功です!

successpost

まとめ

みなさま、どうでしたか?
結構難しいかもしれませんが、いったんNetlifyとGitlabを連携してしまえば、
あとはPushすると自動的にデプロイが走ってポスティングしてくれます。
しかも独自ドメインが設定可能で、ワンクリックでhttps化もしてくれます。
中身の証明書はLet`s Encryptを使っていました。

NetlifyはUIも洗練されていて、
master Pushからデプロイが走るまでの時間がとても短いです。
しかもHugoのデプロイは早いので相性が抜群です 。

そしてNetlifyにはCMS機能を追加できるので、
次回はこのCMS機能の追加の方法を解説できたらと思っています 。

追記:CMS機能を追加できたので、ここまで終わったかたはこちらのステップにお進みください。
Hugo + gitlab + netlifyのブログにNetlify CMSを設定する方法

これを追加できたら本当に簡単にブログが更新できて、
Linuxの黒い画面を触る必要がなくなるのでとても便利です。

最後に

このブログではフリーランスのお役立ち情報や最新のIT情報の発信を続けていこうと思うのでぜひ応援お願いします。また、Twitterでも日々の為になる技術情報やフリーランスについての有益な情報をつぶやくので、いいなと思ったかたはTwitter 札幌のフリーランス@クラウドランス望月フォローをお願い致します。 フォローする

それでは皆様、Netlifyでブログ無料ホスティングに挑戦してみてくださいー