Hugoでプロジェクトを作成しHugoのテーマを適用させGitHub Pagesで公開しお名前.comでドメインを取得しSSL化するまで #GithubPages

はじめに

「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ディレクトリを指定する

.gitignore

.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に使用するテーマを追記する

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に以下を追記

config.toml

publishDir = "docs"

これでpublicではなくdocsというディレクトリに静的ファイルが生成される

参考：https://gohugo.io/hosting-and-deployment/hosting-on-github/

またconfig.tomlのbaseURLを修正。
また、相対パスではなくbaseURLを基点とした絶対パスにするためにcanonifyurls = trueを追記

config.toml

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にも良いとされています。
なので、静的サイトジェネレータが注目されている...らしいですｗ
（あくまでも僕が調べた中での見解です）