HugoとGitHub Pagesで静的サイトを公開する



Hugoは最近流行りの静的サイトジェネレータの一つで、Go製。

- [Hugo](https://gohugo.io/)


公式の情報を飛ばし読みながら、GitHub Pagesでさくっとホスティングする方法を試した。




## Hugoを導入する
OS Xの場合はbrewで導入できる。

- https://gohugo.io/tutorials/installing-on-mac/

## ローカルでホスティングする
インストールできたらまずサイトを作る。

```
$ hugo new site hugo20160910

$ cd hugo20160910/
```

hugoを起動

```
$ hugo server
```
デフォルトで`http://localhost:1313`でアクセスできるようになるが、ブランクページが表示される。とりあえずテーマを入れることにする。

## テーマを追加する
適当にテーマを選んで追加してみる。

- https://themes.gohugo.io/

```
$ git clone https://github.com/lasseborly/anybodyhome.git themes/anybodyhome
```

```config.toml
theme = "anybodyhome"
```

configやコンテンツの変更はhugoが起動していれば自動で反映されることが多いが、今回は変更後画面更新する必要があるようだ。

![Screen Shot 2016-09-10 at 5.14.20 PM.png](https://qiita-image-store.s3.amazonaws.com/0/281/e1d50abb-b2ea-09d1-795d-dbd6af58740f.png "Screen Shot 2016-09-10 at 5.14.20 PM.png")

まだ見出しだけ。


## GitHub Pagesでホスティングする
ローカルで動作確認できたらGitHubへpushしてホスティングしてみる。

GitHubで適当なリポジトリ（プライベートでも可）を作り、settingsのGitHub Pagesのセクションでpublish先URLを確認して`baseurl`に設定。`canonifyurls`を`true`にする。

```config.toml
theme = "anybodyhome"
languageCode = "en-us"
title = "My New Hugo Site"
baseurl = "https://satzz.github.io/hugotest"
canonifyurls = true
```

### ホスティング内容を生成する


```
$ hugo 
```
でホスティング内容が`public`ディレクトリとして生成される。
`public`以下をリポジトリの`gh-pages`ブランチへpushする。

```
$ cd public/
$ git init
$ git remote add origin git@github.com:satzz/hugotest.git
$ git checkout -b gh-pages
$ git add --all
$ git commit -m'initial commit for gh-pages'
$ git push origin gh-pages
```

pushして1分前後待つと,　`baseurl`に設定したURLでホスティングされて、ローカルと同様に見えるようになる。

### publicディレクトリ以外をpushする
ホスティングには直接必要ないが、サイトの元データももちろんGit管理したいのでmasterブランチへpushしておく。
自動生成される内容は除いておく。

```
$ vi .gitignore
themes
public
*.swp
```


```
$ cd ..
$ git remote add origin git@github.com:satzz/hugotest.git
$ git add .gitignore config.toml 
$ git commit -m'initial commit'
$ git push origin master
```

この時点でコミットツリーには元データと、public以下に生成されたデータを管理する2つのブランチが独立して存在する。

![Screen Shot 2016-09-10 at 5.02.18 PM.png](https://qiita-image-store.s3.amazonaws.com/0/281/d482d452-35e1-2745-a122-6c3f67ed21bc.png "Screen Shot 2016-09-10 at 5.02.18 PM.png")

先日GitHub Pagesがmasterブランチで更新できるようになってフロー改善できるかもしれないが、とりあえずこのままいく。

- https://github.com/blog/2228-simpler-github-pages-publishing


## さらにコンテンツを追加する

ブログのような記事を追加していきたい場合は`hugo new`を使う。

```
$ hugo new post/my-new-post.md
```


```content/post/my-new-post.md
+++
date = "2016-09-10T17:59:28-07:00"
title = "my new post"

+++
```

`+++`はFront Matterといってメタデータを記述する記法。

- https://gohugo.io/content/front-matter/


さらにpublic以下に、公開するファイルを生成する。

```config.toml
publishdir = "public"
```

```
$ hugo

$ tree public/post
public/post
├── index.html
├── index.xml
└── my-new-post
    └── index.html

```


## typeとarchetype
別のcontent typeとしてmusicianというコンテンツを追加してみる。このとき、archetypeをつかって、含めるメタデータを設定することができる。

- https://gohugo.io/content/archetypes/

```archetypes/musician.md 
+++
name = ""
bio = ""
genre = ""
+++
```



```
$ hugo new musician/mozart.md
```

```content/musician/mozart.md
+++
bio = ""
date = "2016-09-10T18:11:23-07:00"
genre = ""
name = ""
title = "mozart"

+++
```
archetypeに追加した変数が、それを使ったコンテンツに既定値として含まれるようになる。

こういった変数やデータ構造を扱う仕組みがいろいろあってうまく活用できると楽しそうだが、今回はあまり深入りせずここまで。

## 追加コンテンツの確認



この時点でローカルを確認するとコンテンツが追加されているのが確認できる。


![Screen Shot 2016-09-10 at 6.24.19 PM.png](https://qiita-image-store.s3.amazonaws.com/0/281/b33a463d-64ca-07ae-bb4c-44aa7d892a44.png "Screen Shot 2016-09-10 at 6.24.19 PM.png")

`public`以下を同様に`gh-pages`ブランチへpushすればGitHub Pagesでも確認できる。