こんにちは！
KTgraphのKEISUKEです。
前回に引き続き、「HUGOとNetlifyでお手軽サイト構築-開発～公開まで」と題して、今回は後編「Netlifyで公開」を紹介しようと思います！
Netlifyの登録から実際に前回作成したHugoサイトをデプロイ（公開）するところまでお話するので、ぜひ参考にしてみてください！
前回の内容はこちらから↓
「前編 HUGOとNetlifyでお手軽サイト構築-開発～公開まで1開発編【無料】」
前回の内容
ざっくりと前回やったことのおさらいです！
- 静的ジェネレーターについて
- Hugoの導入方法
- Hugoテーマの適用
- Hugoサイトのローカル起動
「前編 HUGOとNetlifyでお手軽サイト構築-開発～公開まで1開発編【無料】」
開発したコードをGitへプッシュ
さて、今回はいよいよHugoサイトを一般公開します！
まずは、そのために前回作成したコードをGitへプッシュしておきます。
※NetlifyからGitを介してデプロイするため
リポジトリがなければ、今回のサイト用にリポジトリをGithubに作成して、そこにプッシュしましょう。
無料でNetlifyを使用する場合、Organization配下のリポジトリだとデプロイできませんでした。
どうやらOrganization配下のリポジトリを公開する場合、有料プランにアップグレードする必要がありそうです。
Netlifyで公開
Githubへプッシュできれば、いよいよNetlifyで公開していきます。
Netlifyとは
デプロイ前にNetlifyについても軽く触れておこうと思います。
Netlify（ネトリファイ）は、静的コンテンツを公開できるホスティングサービスです。無料の範囲で、独自ドメインとSSLが可能。
Netlifyは、ウェブサービスをデプロイする環境として利用するのに適しています。
つまり、WordPress等の動的な処理のいらないLPなどの静的なWebサイトであれば、Netlifyを通じて簡単かつ低コストで公開することができます。
あと、Githubと直接連携できるのがありがたい！！
登録からGithub連携
それでは登録からしていきます！
まずは、Netlify公式ページにアクセスし、「Get started for free」から無料登録しましょう！
この後もgithubのリポジトリからデプロイするので、「GitHub」でSign in しておくのがよいでしょう。
Githuhbとの連携を承認した後は、ユーザ情報を入力していきます。
続いて、いきなり何をデプロイするのか聞かれます。
ここから進めてもよいですし、一度ホーム(skipリンクから)へ戻ってもサイトをデプロイできるので、どちらでもOKです。
ビルド・デプロイ
続きです！
今回はGithubからデプロイしますので、「Import from Git」を選択して次へ進みます。
次は、どのリポジトリをデプロイするのか聞かれます。
「Github」を選択し、今回は専用のリポジトリ(Hugoサイト)を作成しているので、それを選択します。
最後のステップです！
対象のGitブランチ、Build Command等を指定します。
Hugoサイトになるので、Build Commandは以下を入力しておきます。
hugo --gc
「Deploy site」をクリックでビルド・デプロイが開始されます。
自サイトのリンクやビルド状況はすべて「Site overview」画面から確認できます。
デプロイ後、しばらくたつとリンクを踏めるようになるので、こちらから公開した自サイトへアクセスしてみましょう。
特に指定がなければ、Netlifyが自動でドメインをつけてデプロイしてくれます。
自分のドメインを持っているのであれば、独自ドメインの設定をしましょう。
（初期テーマのままですが）無事Hugoで作成したサイトを公開することができました！
実際にデプロイしたHugoサンプルサイト
もし画像などが表示できていない場合、baseURLに問題があるので、configのbaseURLを公開先のURLに変更してGitへプッシュしましょう
プッシュ後に自動で再デプロイしてくれます
Netlify CMS
ここまでで、公開するところまで実施することができましたが、Netlify CMSについてもすこし紹介しておきます。
NetlifyにはCMSもあり、ブログや記事などをコードではなく、GUIで投稿したいときなどに使えます。
導入も既存のHugoプロジェクトにAdmin用の設定を書き加える形で行えます。
（あとNetlifyとGithubとのOAuth設定が必要ですが、これがすこし面倒です）
本記事では、具体的な手順は割愛しますが、参考サイトを紹介しておきます。
Netlify CMS 導入参考サイト
ちなみにCMSを入れておくと、↓な感じで記事やブログを入稿できます。
さいごに
さて、いかがだったでしょうか。
Hugoの導入からサイトの公開まで一気に紹介しましたが、なかなかお手軽だったと思います。
また、すべて無料で公開までできるのはありがたいですね。
ちょっとしたポートフォリオサイトやブログなんかはこの方法で即公開できそうですね！
今後もWeb系の記事をちょくちょく書いていくので、ぜひチェックしてみてください！
ちなみにKT-Grapghでは出張撮影以外に、WEBサイト制作なども行っているので、興味のある方は覗いてみてください！↓
それでは良きフォトライフを！
出張撮影については下記を御覧ください！！
KT-GraphのInstagramをチェック！！
KT-GraphのTwitterをチェック！！
LINEへのお友達追加もお願いします！！