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

## はじめに
「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`にチェックを入れる
(チェックが出来るようになるまでに時間がかかる場合があります）

公開！！！🎉

https://hitchhike.work


## おわりに
とりあえず、hugoでプロジェクトを作成して、テーマを適用させてGitHub Pagesで公開して独自ドメインを設定しSSL化するところまでやってみました。

ありがとうございました。

ひろたつ


### 余談
現在多くのサイトはWordPressで作られていると思います。
WordPressで作られたサイトはサーバサイドで動的にコンテンツを生成しています。
すなわち、リクエストがあった時に裏側でごにょごにょしてから作成したコンテンツを返しています。
これではどうしても時間がかかってしまいます。
こういった背景から静的サイトジェネレータが注目されています。
静的サイトジェネレータは、リクエストに応じて動的にコンテンツを生成するのではなく、予めコンテンツを生成しておいて、リクエストが来たら用意しておいたコンテンツをただ返すだけという仕組みを実現しています。
すなわち、コンテンツの表示速度が早くなります。これはSEOにも良いとされています。
なので、静的サイトジェネレータが注目されている...らしいですｗ
（あくまでも僕が調べた中での見解です）


## 参考
- https://www.staticgen.com/
- https://www.esz.co.jp/blog/181.html
- https://bokunonikki.net/post/2018/0424_hugo_themes_git_submodule/
- https://qiita.com/bake0937/items/e0914efbd9434be474a4
- https://qiita.com/zak74702675/items/b84cd883c01d72720c35
- https://qiita.com/sotarok/items/0d525e568a6088f6f6bb