はじめに
「WordPressはオワコン？これからはSSGの時代？」
というわけで、ちらっと調べた中でHugoというSSG(静的サイトジェネレータ)が良さげな気がしたので、実際に使ってみようと思います
環境
- macOS Mojave 10.14.2
- Homebrew 2.0.1
- hugo v0.54.0
- git 2.17.2
Hugoってなに？
Hugo公式
https://gohugo.io/
Hugoとは、golangで作られている静的サイトジェネレータの一つです
静的サイトジェネレータとは、静的なサイトを生成するツールです（そのままｗ
hugoは、数多くあるSSGの中でもビルドが早い、すなわち静的サイトの生成スピードが早いです。
理由はgolangで作られているからでしょう。というわけで、hugoを選定しました。
Hugoのインストール
とりまHugoをインストールしなきゃ話が始まらん
brew install hugo
インストールできたか確認
hugo version
whichコマンドでも見ておく
which hugo
homebrew
公式サイト
https://brew.sh/index_ja
問題が無いかチェック
brew doctor
最新版にアップデート
brew update
Hugoテーマの選定
Hugo公式からいい感じのテーマを探す
https://themes.gohugo.io/
キミにきめた〜！
https://github.com/aerohub/phugo
（テーマは自分の好きなもので）
hugoプロジェクトの作成
今回はhitchhike-memoriesというプロジェクトを作成する
（ぼくが個人的に今までにヒッチハイクで乗せて頂いた方々との写真を一つのサイトでまとめたかったので、このサイトを作成します）
（以下、プロジェクト名は適宜自分のものに置き換えて下さい）
hugoコマンドでhugoプロジェクトを作成
hugo new site hitchhike-memories
作成したプロジェクトに移動
cd hitchhike-memories
treeコマンドで確認
.
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
こんな感じのディレクトリ構成になっているんですね（😲「へ〜」）
treeコマンドが入っていない人はbrew install treeで入れちゃってくださいな(´・ω・`)
hugoのディレクトリ構成
- archetypes
デフォのmarkdown記事テンプレートを格納
- config.toml
設定ファイル
- content
記事ファイルを格納
- data
config.toml以外の設定ファイルを格納
- layouts
サイトのデザインファイルを格納
- static
静的ファイルを格納
ビルド時にpublic(公開用ファイル、今回はdocs)にコピーされる
- themes
テーマを格納
Git
hugoのプロジェクトは最終的にGitHub Pagesで公開する。
（また、hugoのテーマをローカルに取ってくるのもgit経由）
というわけで、プロジェクトをgit管理下にする
git init
とりあえずREADME.mdを作成
touch README.md
まずはなにもしていない状態でfirst commit
git add README.md
git commit -m "first commit"
ついでに.gitignoreも作っておく
touch .gitignore
んで、viで簡単に修正
vi .gitignore
.gitignoreではVSCodeの設定ファイルとhugoで生成されるpublicディレクトリを指定する
.DS_Store
public
ただ、後述しますが、publicディレクトリは使わなくなるので、、、ignoreしなくてもいいかも...w
とりまcommit
git add .gitignore
git commit -m "add .gitignore"
githubでリポジトリを作成し、githubと紐付ける
（リポジトリ名は適宜変更して下さい）
git remote add origin https://github.com/hirotatsuuu/hitchhike-memories.git
今回はhitchhike-memoriesという名前のリポジトリと作成しました
とりまpush
git push origin master
これでgithubとの紐づけが完了
テーマを入れる
「キミにきめた〜！」のテーマをローカルに持ってくる
（→ https://github.com/aerohub/phugo この子です😋）
themesに移動
cd themes
submoduleとしてテーマをローカルに持ってくる
git submodule add https://github.com/aerohub/phugo
プロジェクトルートに.gitmodulesファイルが生成されていることを確認
とりあえず、追加したテーマをコミットしておく（すでにステージングされている）
git commit -m 'add theme'
テーマが更新された時はgit submodule updateで更新情報を反映出来るらしい...（まだやったことないからわかりません...）
プロジェクトルートにあるconfig.tomlに使用するテーマを追記する
theme = "phugo"
※どうせ次でコピーしてくるから追記しなくてもいいけど...
実行する
とりあえず、サンプルサイトを使って実行してみる
取ってきたテーマのリポジトリ内にあるexampleSite内を全てプロジェクトルートにコピーする
cp -r themes/hphugo/exampleSite/* .
以下のファイルとディレクトリがコピーされた
- config.toml
- content
- data
- static
hugoでローカルサーバでプレビューしてみる
hugo server
http://localhost:1313/にアクセス
取ってきたテーマが確認できればおｋ
変更のたびに、自動検知して自動更新してくれる。（優秀や〜）
ローカルサーバを止める時はctrl + c
hugo serverについて
いくつかオプションがある
-t theme テーマの指定
-w watch ライブリロードの有効
-D Drafts 記事をビルド対象にする
hugoプロジェクトの修正
archetypes、layouts、staticのフォルダはプロジェクトルートのファイルが優先的に使用されるそう。
プロジェクトルートにない場合は、theme以下が使用されるそう。
というわけで、実際にいらんところを削除して、画像とか文章とかを修正していく。
テーマを編集するときのポイント
テーマを編集する時は、基本的にthemesディレクトリ内のテーマを直接編集はしない
というわけで、とりあえずテーマ内のlayoutsをパクってくる
cp -r themes/hphugo/layouts .
そして、layoutsやconfig.tomlなどを自分の好きなように修正していく
※わからない部分はhttps://gohugo.io/documentation/を参照
記事の生成
記事を生成する
hugo new blog/sample.md
contentディレクトリ以下に生成される
多くのサイトではpost/sample.mdとなっているが、僕がチョイスしたテーマはblogディレクトリ配下に記事を格納するっぽい
静的ファイルの生成
hugoで静的ファイルを生成
hugo
これだけ。
publicディレクトリが生成されているはず
（ただ、後述しますが、GitHub Pagesで公開する場合はpublicディレクトリではなくdocsに公開する静的ファイルを生成する）
GitHub Pagesに公開
GitHub Pagesに公開するには、docsというディレクトリに公開するファイル群を入れなければならない。
今のところpublicディレクトリ内に公開したいファイル群があるので、設定する必要がある。
config.tomlに以下を追記
publishDir = "docs"
これでpublicではなくdocsというディレクトリに静的ファイルが生成される
参考：https://gohugo.io/hosting-and-deployment/hosting-on-github/
またconfig.tomlのbaseURLを修正。
また、相対パスではなくbaseURLを基点とした絶対パスにするためにcanonifyurls = trueを追記
baseURL = "https://hirotatsuuu.github.io/ekk/"
canonifyurls = true
github上でGitHub Pagesの設定をする
Settings→GitHub Pages→Sourceをmaster branch/docs folderに設定
静的ファイルを生成
hugo
生成されたdocsディレクトリをpush
git add .
git commit -m 'create docs'
git push origin master
これで、https://hirotatsuuu.github.io/hitchhike-memories/にアクセス出来るようになった(...はず)
netlify
netlify公式
https://www.netlify.com/
github pagesではなく、netlifyで公開する方法もある...が今回は割愛😋
今回はしない（だってgithub pagesで公開できてるもん！）
独自ドメインの設定とSSL化
好きなドメインを取得
僕はお名前.com( https://www.onamae.com/ )でhitchhike.workを取得しました
お名前.comで各種設定
ドメイン設定→ネームサーバーの設定→DNS関連機能設定→対象のドメインを選択→DNSレコード設定を利用する
Aレコードで以下4つのIPアドレスを設定
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
参考：https://help.github.com/articles/using-a-custom-domain-with-github-pages/
DNSレコード設定用ネームサーバー変更確認にチェックを入れて完了
Githubで各種設定
対象のリポジトリを選択→settings→GitHub Pages→Custom domainを対象のドメインに設定
hitchhike.workを設定します
（http://やhttps://は入れません）
Enforce HTTPSにチェックを入れる
(チェックが出来るようになるまでに時間がかかる場合があります）
公開！！！🎉
おわりに
とりあえず、hugoでプロジェクトを作成して、テーマを適用させてGitHub Pagesで公開して独自ドメインを設定しSSL化するところまでやってみました。
ありがとうございました。
ひろたつ
余談
現在多くのサイトはWordPressで作られていると思います。
WordPressで作られたサイトはサーバサイドで動的にコンテンツを生成しています。
すなわち、リクエストがあった時に裏側でごにょごにょしてから作成したコンテンツを返しています。
これではどうしても時間がかかってしまいます。
こういった背景から静的サイトジェネレータが注目されています。
静的サイトジェネレータは、リクエストに応じて動的にコンテンツを生成するのではなく、予めコンテンツを生成しておいて、リクエストが来たら用意しておいたコンテンツをただ返すだけという仕組みを実現しています。
すなわち、コンテンツの表示速度が早くなります。これはSEOにも良いとされています。
なので、静的サイトジェネレータが注目されている...らしいですｗ
（あくまでも僕が調べた中での見解です）