HugoでWebサイトを立ち上げる+テーマを適用してみる

自分のポートフォリサイトやブログを作成する時、はてブやQiita、WordPressがありますが今回は静的サイトジェネレーター`Hugo`でWebサイトを作成し、テーマを適用する方法を書いていきます

<div align="text-align:center;">
<img src=https://qiita-image-store.s3.amazonaws.com/0/131669/815cb206-d127-b42e-0f51-3cbf4f666473.png "hugo.png">
</div>

## 環境
- macOS Sierra 10.12.6
- Hugo:`v0.29`
- git:`2.14.1`
- Homebrew: `1.3.4`

## Hugo・Gitのインストール
Hugo・GitはHomebrewでインストールします
`~`はホームディレクトリという意味です

```bash:
~$ brew update
~$ brew install hugo
~$ brew install git
```

## HugoでWebサイトを立ち上げる
`hugo new site サイト名`でHugoプロジェクトを作成します
作成するディレクトリはお好みの場所で

```bash:
~$ hugo new site hugo_my_site
```
実行後以下のような結果が返ってきたらOKです

```bash:
Congratulations! Your new Hugo site is created in /Users/ユーザー名/hugo_my_site.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.
```

## Gitリポジトリを作成

```bash:
~$ cd hugo_my_site
hugo_my_site$ git init
```

この時点で一旦コミットしておきましょう

```bash:
hugo_my_site$ git add --all
hugo_my_site$ git commit -m "initial commit"
```

### 除外ファイルを指定
今のうちに除外ファイルを指定して不要なファイルがコミットされないようにしましょう

```bash:
hugo_my_site$ touch .gitignore
```

`.gitignore`を開き以下のように編集します
`public`は`hugo`コマンドでビルドした時に作られるフォルダです。

```diff:hugo_my_site/.gitignore
+ .DS_Store
+ /public
```

`.gitignore`をコミットしておきましょう

```bash:
hugo_my_site$ git add .gitignore
hugo_my_site$ git commit -m "add .gitignore"
```

## テーマを利用する
自分でテーマを作成するのもアリですが、今回は既存のテーマを利用しようと思います
テーマのページはこちら
https://themes.gohugo.io/

※テーマを選ぶ時の注意点
テーマの詳細ページに移動すると`License`(ライセンス)という項目があるので
ライセンスの範囲内での利用をするようにしましょう
また、実際のテーマが置いてあるGithubのリポジトリのREADMEもチェックして置く
とさらにGoodです
ライセンスの種類については各々調べてみてください

今回は`Unlicense License`というライセンスの下記のテーマを利用します
https://themes.gohugo.io/artists/
https://github.com/digitalcraftsman/hugo-artists-theme

## テーマを利用する

### テーマをダウンロードする
テーマをダウンロードします。この時大抵は`git clone`コマンドをしますが、
このプロジェクト自体のgitリポジトリを作成しているため、`git clone`コマンドをすると、
テーマの方のgitリポジトリも作成されるため結果的に2重管理となります。
そのため、テーマの方はサブモジュールとして扱う`git submodule add`コマンドを使います

```bash:
hugo_my_site$ git submodule add https://github.com/digitalcraftsman/hugo-artists-theme themes/hugo-artists-theme
```

以下のような結果が返ってきたらOKです

```bash
Cloning into '/Users/ユーザー名/hugo_my_site/themes/hugo-artists-theme'...
remote: Counting objects: 331, done.
remote: Total 331 (delta 0), reused 0 (delta 0), pack-reused 331
Receiving objects: 100% (331/331), 7.90 MiB | 1.13 MiB/s, done.
Resolving deltas: 100% (136/136), done.
```

テーマの方で更新があった場合は`git submodule update`をすると更新内容を反映することが出来ます

テーマの追加ができたのでここらへんでコミットしておきましょう

```bash:
hugo_my_site$ git add --all
hugo_my_site$ git commit -m "add theme"
```

### テーマを適用する

これで、テーマをダウンロードできました。
ここから、ダウンロードしたテーマを利用して自分のWebサイトを作成していきます
ここで注意するポイントとして、テーマをカスタマイズする時は
**基本的に`themes`ディレクトリのファイルを直接編集しない方法で進めます。
そのため、プロジェクト(`hugo_my_site`)直下にある`themes`ディレクトリ
以外のディレクトリのファイルを編集します**
どうゆうこと?? って思うかもしれませんが、
とりあえずダウンロードしたテーマを使えるようにします

### `exampleSite`ディレクトリのコンテンツをコピー
themesディレクトリにある`exampleSite`ディレクトリのコンテンツをプロジェクト直下のディレクトリへ上書きコピーします
![0ab954d7-86ba-0a21-daf8-b0bff126ff31-1.png](https://qiita-image-store.s3.amazonaws.com/0/131669/0185a9ee-639c-12e2-c19a-8737a0e533ab.png)

### `hugo-artists-theme`のコンテンツをコピー
`hugo-artists-theme`の`layouts`と`static`をプロジェクト直下のディレクトリへ上書きコピーします
![f742d7c4-bb77-f7fd-a927-fccc35687678-1.png](https://qiita-image-store.s3.amazonaws.com/0/131669/5ad9993f-8a8a-252f-89b0-5e48522fda5a.png)

ここでHugoを立ち上げます

```bash:
hugo_my_site$ hugo server
```

こんな具合の結果が返ってきたらOKです

```bash
Started building sites ...

Built site for language en:
0 draft content
0 future content
0 expired content
8 regular pages created
8 other pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
total in 29 ms
Watching for changes in /Users/ユーザー名/hugo_my_site/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
```

`Web Server is available at http://localhost:1313/` と表示してあるので
ブラウザで`http://localhost:1313/`へアクセスし表示を確認してみましょう

以下のように表示が確認できればOKです
![sample1.png](https://qiita-image-store.s3.amazonaws.com/0/131669/5f490a42-60e2-2091-e3df-410acf640822.png)

## ガチャガチャ動かしてみる
ここまででテーマの適用ができました。ここで終わっても良いのですが
アイコンやテキストを変更してみようと思います

### テキストを変えてみる
`Artists Theme` という文字列を変えてみましょう。
この場合は、プロジェクト直下にある`config.toml`という設定ファイルを編集します

```diff:hugo_my_site/config.toml
	# Header an navigation
	#
	# To change the header background the 'hero-bg-jpg' at 'static/img'.
	# Do the same with the logo ('logo.svg').
	# But keep the original filename!
	[params.header]
-		title = "Artists Theme"
+		title = "Sample Theme"
		shortBio = "Thinker // Designer // YouTuber"
```

すると、以下のように変更されます
![sample2.png](https://qiita-image-store.s3.amazonaws.com/0/131669/f3a6feb5-2243-2a71-33d0-51ffc61669bb.png)
大文字で表示されているのはCSSの`text-transform: uppercase;`が当たっているためだと思います。
`hugo server`を立ち上げた状態で変更すると文字列はリアルタイムで反映されるようです。

### 画像を変更してみる
背景画像を変更してみましょう。
画像は`static`フォルダの`image`置いてあります。
どうやら画像名は今回の場合、`hero-bg.jpg`であるようなので、
フリーの背景画像を`hero-bg.jpg`にリネームして上書きしてみます
リロードすると以下のようになりました
![sample3.png](https://qiita-image-store.s3.amazonaws.com/0/131669/e6b6644b-4b28-e947-c6c0-7fb5e992ac4c.png)


ちなみに、お借りした画像はこちら
https://www.pakutaso.com/20171116320post-14060.html

### 変更内容が反映されない場合
以下を試してみてください

- `hugo server`を落として(`Ctrl`+`c`)再度`hugo server`で立ち上げてみる
- ブラウザのシークレットモードを起動して確認する(もしくは、ウィンドウやブラウザ自体を再起動する)
- `hugo server`を落として(`Ctrl`+`c`)、`hugo`コマンドでビルドをし、ビルドエラーがある場合は原因箇所を修正する

これで以上となります
あとは、自分好みで画像やテキストを変更したり新しいページを加えたりしてみましょう
ドキュメントはこちら
https://gohugo.io/documentation/