Hugoで生成した静的なサイトをNetlifyでホスティング

Hugo という静的サイトジェネレーターと, 無料でホスティングが行える Netlify を使ってサイトを構築していく手法について, 浅く広く書いていきます.

サイトを構築する手段としては, レンタルサーバーを借りてWordpressを使って公開していくのが一般的だと思いますが,

• 独自ドメイン代以外一切お金がかからない
• Markdownで記事がかける
• 記事を書いてGithubにPushするだけで投稿できるので, (ターミナル操作に慣れてさえいれば)管理が楽
• DBから記事を持ってくるわけではないのでアクセスが高速

などのメリットがあります.

ぜひお試しあれ.

ページ構成

• 環境構築
• サイト構築
• テーマの設定
• Netlifyでホスティング
• 記事の作成
• サイトの構成と設定
• Disqusコメントの有効化
• 独自ドメインの設定
• Google Analyticsの設置
• Google Adsenseの設定
• サイトの日本語化

環境構築

Homebrewからhugoを取得します.

$ brew install hugo

あと, 記事はMarkdownをエディタ等で書いていくことになるので,

お使いのエディタに Markdown の補助系のプラグイン等を入れておくと良いかも.

サイト構築

取得したhugoコマンドを利用してサイトの雛形を作ります.

今回は TestSite を作ります.

$ hugo new site TestSite
$ tree TestSite
TestSite
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

サイトの雛形が作成されました.

この他にもhugoコマンドを利用することでサイト構築に関する様々な処理を実行していくことになりますが,

各コマンドは <サイト名>ディレクトリ 直下で動かします.

今回の例では, TestSite/ からコマンドを打つことになります.

テーマの設定

利用したいテーマを選んでサイトに適用していきます.

公式の Hugo Themes で配布されているのでそこから選んでも良いですし,

公式サイトではないですが, 公式のテーマを人気順に並べている HUGO THEME STAR RANKING というページもあるので, いずれかから利用したいテンプレートを選びます.

テーマのソースはGithubで公開されていることがほとんど(たまにGitlabも)で, ローカルの <サイト名>/themes/ にクローンすることで利用できるようになります.

今回は, hugo-nuo を使います.

$ cd TestSite/themes
$ git clone git@github.com:laozhu/hugo-nuo.git

cloneしたhugo-nuoをgitから切り離してしまいたいので, .gitディレクトリを中身毎消去します.

$ rm -rf hugo-nuo/.git

危ないコマンドだから間違ったディレクトリを消さないように注意.

また, hugo-nuo/exampleSite/ にサンプルサイトの設定ファイルや記事ファイル等が あるので, 丸々コピーしてきます(一から設定してもいいけどたぶん必要なところを修正するほうが効率良い).

$ cd /Users/path/to/TestSite/
$ cp -r themes/hugo-nuo/exampleSite/* ./

これで exampleSite の内容がそのままコピーされましたので,

$ hugo server

をして, 適当なブラウザで, http://localhost:1313/ にアクセスすると, exampleSite の内容が表示されるはずです.

Netlifyでホスティング

まだ exampleSite を移しただけですが, とりあえずホスティングしていきます.

静的サイトのホスティング先としては,

• Netlify
• Github Pages

がメジャーだと思いますが, 今回はNetlifyを使います.

Githubリポジトリを作成して, サイトソースをプッシュして行きます.

$ pwd  # TestSite/にいることを確認
/Users/path/to/TestSite
$ git init
$ echo "public/" > .gitignore
$ git add .
$ git commit -m "initial commit"
$ git remote add origin <URL>
$ git push origin master

次に Netlify にアクセスして, ホスティングします.

GithubからNetlifyにログインして, 認証等々を流れにそって進めていくと, ホスティングしたいリポジトリを選択させられるので, 今回作成したリポジトリを選び, 最後に Deploy Site をして完了です.

この辺の流れは以下のサイトが詳しかったです.

NetlifyでHugoで作った静的サイトをホスティングしてビルドを自動化する

デプロイが終わるとホスティング先のURLが得られるので,

このURLをコピーして, TestSite/config.tomlのbaseURLに渡します.

baseURL = "<コピーしたURL>"

再びプッシュします(PushするとNetlify側で自動デプロイされます).

$ git add config.toml
$ git commit -m "baseURLを追加"
$ git push orign master

これで一応完了です.

最後に, ローカルのHugoとNetlify側のHugoのバージョン違いを修正しておきます.

$ hugo version
Hugo Static Site Generator v0.55.5/extended darwin/amd64 BuildDate: unknown

バージョンが0.55.5と分かったので,

Deploy Settings -> Environment -> Edit Variables -> New Variablesと進み,

を設定します(もしデプロイに失敗していた場合はこれで治るかも).

記事の作成

記事の作成は, 以下のように行います.

$ hugo new post/test.md

すると, TestSite/content/post/test.md に, 最小限の情報が記述された以下のような状態でmarkdownファイルが作成されます.

---
title: "title"
author: "author name"
thumbnail: "hoge.png"
tags: ["tag1", "tag2"]
date: 2019-06-20T21:47:37+09:00
draft: true
---

— で区切られた範囲に, 投稿時間や, タグ, タイトルなどの情報を記述し,

ファイルの下部にMarkdownで記事の内容を書いていきます.

Markdownの具体的な記法については, Hugo特有の記法も含めて,

HugoでのMarkdown記法

にまとめたのでよければご一読ください.

サイト構成と設定

サイトのホスティングができたので, あとはサイトをカスタマイズしていくためにディレクトリ構成を見ていきます.

TestSite
├── archetypes
│   └── default.md --- ①
├── config.toml --- ②
├── content
│   └── post --- ③
├── data
├── layouts --- ④
├── static
└── themes

① archetypes/default.md

記事ファイルのテンプレートです.

ここに記述された内容が,

$ hugo new post/hoge.md

で記事ファイルを作成するたびに, 記述されます.

最初は初期設定で良いと思います, ある程度書くのに慣れてきたら記事の概形等を記述しておけば効率的に書けるかも.

② config.toml

諸々の設定を記述するファイルで, 手順通り進んでいれば exampleSite の設定がそのままコピってこれてるはずです.

最低限の設定としては,

baseURL = "https://www.example.com/"  # 公開予定のURL
languageCode = "ja"
title = "ブログタイトル"
theme = "hugo-nuo"

辺り.

その他に,

• Share用の email, github, twitter等
• コメントを有効化するための Disqus
• GoogleAnalytics設置

など, テーマによっていろいろです.

③ content

記事ファイルが置かれるディレクトリ.

大抵は, この中に postディレクトリが置かれてその中に記事ファイルを並べていくことになります.

ただ, 記事でないページ, 例えば About 等はpostの中に置く必要はないのでその編は臨機応変に.

また, ページ内に貼り付ける画像ファイル等もcontentの中に, images等のディレクトリを設置して置いていくことになります.

④ layouts

htmlテンプレート等を置いていくディレクトリですが,

基本はテーマの中にあるlayoutsから読み出しているので初期設定ではからっぽのはずです.

自分でスタイルをいじりたくなったときや, なにかコードを追加したくなったときに,

themes/<テーマ>/layouts の中にあるhtmlファイルをコピーしてきてコードを追加する形になります.

Disqusコメント有効化

Hugoのサイトにコメント機能を追加したいときには, Disqus を利用するのが一般的です.

Disqus に登録してShortnameを取得し, config.tomlに貼り付けます(おそらくほとんどのサイトテーマで, disqusShortname = “", 的な項目がサポートされているはずです.)

詳しい手順は以下のページがわかりやすかったのでリンクを載せておきます.

参考: Hugo で作ったブログに Disqus を使ってコメント機能を追加する

独自ドメインの設定

手順通りホスティングできていれば, すでにデプロイしたサイトにアクセスできますが, Netlifyでは独自ドメインを設定することもできます.

ただ公開できさえすれば良いなら設定する必要はありませんが,

• SEO的に強い
• Google Adsenseの設置に必須

なので, 本格的に運営するなら設定することをおすすめします.

設定方法は,

Netlifyでホスティングしているサイトに独自ドメイン(お名前.com)を設定する

を参考にしてください.

Google Analyticsの設置

訪問者数, アクセス数等を把握したい場合は, Google Analytics を設置しましょう.

ほとんどのテーマで,

googleAnalytics = "UA-xxxxxxxxx-x"

がサポートされているはずですので, GoogleAnalyticsからトラッキングIDを取得して, 貼り付ければOKです(トラッキングIDの取得方法については, 各自で調べてください).

ちなみに, テーマでGoogle Analyticsがサポートされていない場合は, トラッキングコードを直接貼り付けることで対応できます.

似たようなことを Google AdsenseをHugo+Netlifyでホスティングしているサイトで設定する でやるのでそちらを参考にしてください.

Google Adsenseの設定

Google Adsenseを設定することで, サイトに広告を表示して収益化することもできます.

興味がある方は,

Google AdsenseをHugo+Netlifyでホスティングしているサイトで設定する

を参考にサイトに設定してみてください.

サイトの日本語化

テーマは基本的に英語ベースで作られているので, 細かい部分を日本語化したくなるかもしれません.

その時は, themes/<テーマ>/layouts以下にサイトを構成する htmlファイルが入っているので, これを layoutsにコピーした上で修正すればOKです.

詳しくは,

Hugoサイトの日本語化

を見て下さい.

最後まで閲覧ありがとうございました❗

サイト構築に必要な基本的なパーツはこれでだいたい揃ったのかなと思います.

初期設定はやや大変かも(Wordpressとか使ったこと無いんで比較できないですけど)しれませんが,

初期設定さえすめばあとは書きたいときに Markdown で記事書いて, GitHubにプッシュするだけなのでエンジニア系の人からするとだいぶ快適な環境だと思います.

ぜひ快適なブログライフを😁