Hugo + GitHub Pagesでサイト作成（ブランチでソースファイルと公開用ファイルを分ける）

はじめに

サイトやブログを作りたいと思っていたところ，HugoとGitHub Pagesの組み合わせが楽そうだったので，とりあえず触ってみることにしました．
ざっくり説明すると，Hugoは静的サイトジェネレータの1つでマークダウン形式で記事が書けて，さらに早いらしい．
GitHub Pagesは，GitHubによる静的サイトのホスティングサービスで，無料でサイトの公開ができます．

（タイトル詐欺っぽい感じがしますが，以下がこの記事で伝えたいことです．）
Hugoでは，ソースと公開用ファイルができるのですが，この2つをどうにかして分けたいと考えました．（というか，まとめて管理すると面倒？）
分ける方法としては，
1.　リポジトリを2つ作り，1つをソース管理用，もう1つ（(UserName).github.io）を公開用ファイルの置き場とする．
2.　同じリポジトリ内で，ソース管理のブランチと公開用ブランチで分ける．
の2つが主かと思います．
個人的には，同じプロジェクト(?)に関するものは，まとめたいという気持ちがあったので，2番目を採用しました．
そして，このブランチを分けるというところで悩み詰まったので，備忘録として残すこととしました．（当方，GitおよびGitHubの知識が薄すぎるので，知ってる方には，何てことないかもしれません．．．）

2018/12/25 22:30追記
コメントにて，同様のことを公式ドキュメントにも書いていることを教えていただきました．
なので，もしかしたらこの記事を大きく変えることになるか，こういうやり方もあるということで残したままにするかと思います．

Hugoでサイト作成

公式サイトに詳しく載っています．

Hugoのインストール

HomeBrewでインストールできます．

brew install hugo

# インストールできたか確認
hugo version

新規サイト作成

任意のディレクトリに移動して，以下のコマンドを実行します．(SiteName)はお好きな名前に．

~

hugo new site (SiteName)

# ディレクトリ移動
cd (SiteName)

テーマ追加

公式に合わせて，テーマ「ananke」にします．
ただし，今回は，公式とは手順を少し変えて，gitの新規リポジトリはまだ作成しません．

~/(SiteName)

git clone [e-mail]:budparr/gohugo-theme-ananke.git themes/ananke

記事の追加

以下のコマンドで，記事を追加します．
(ArticleName)は，お好きな記事名にしてください．
以下のコマンドの場合，postsディレクトリ下に(ArticleName).mdファイルが作成されます．

~/(SiteName)

hugo new posts/(ArticleName).md

マークダウン形式で記述が可能です．記事の書き方に関しては，今回は述べません．

ローカルで確認

~/(SiteName)

hugo server -D -t ananke

ローカルでサイトを立ち上げるコマンドです．ブラウザでhttp://localhost:1313/にアクセスすることで，見栄えを確認できます．-Dは，下書き状態の記事も表示，-tはテーマの選択です．

設定ファイル

(SiteName)ディレクトリのconfig.tomlで様々な設定を行うことができます．
初期状態は以下のようになっています．

config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"                            

まだ，あまり触ったことがないので，詳しくはわかりませんが，とりあえず以下のように変更します．

config.toml

baseURL = "http://(GitHubUserName).github.io/" #変更
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke" #追加

おそらくbaseURLは，GitHub Pagesで公開予定のサイトのトップページを記載するのだと思います．

公開用のファイル出力

最後に以下のコマンドで，公開用のファイルを生成します．

~/(SiteName)

hugo

2018/12/23 23:23編集
config.tomlにて，テーマの指定をしていて，生成時に-t anankeは不要なので，修正しました．
コメントありがとうございます．

publicフォルダが生成され，この中に公開用のフォルダやファイルが入っています．-tは要らないと思いますが，一応つけています．
ちなみに，記事のdraft設定が，trueだと下書き状態ということで，サイトには反映されないのでご注意ください．

GitHub Pagesで公開

リポジトリの作成

GitHubでリポジトリを作成します．名前は，(GitHubUserName).github.ioとします．(GitHub Pagesで公開するためには，このリポジトリ名でないといけません．)

2018/12/23 23:25編集
Project Pagesというものがあり，任意のリポジトリのmasterブランチもしくは，masterブランチの/docs下をサイトとして公開できるようです．
URLはhttps://(GitHubUserName).github.io/(RepositoryName)です．
コメントありがとうございます．

公開用ファイルをpush

まず，公開用のフォルダとファイルをGitHubにあげます．
GitHub Pagesでは，masterブランチに置くことで公開ができるので，公開用ファイル群をmasterブランチに置きます．つまり，(SiteName)/public内で新規リポジトリ作成を行い，それをリモートのmasterブランチに置きます．

~/(SiteName)

cd public

git init

git remote add origin [e-mail]:(GitHubUserName)/(GitHubUserName).github.io.git

git add .

git commit -m "first commit"

git push origin master

これで，リモートのmasterブランチにサイトの公開用ファイル群を置くことができました．

ソースをpush

次にサイトのソースファイル等を先ほどとは別のブランチにpushします．ここでは，ソース管理用のブランチは，sourceとします．

~/(SiteName)

git init

vim .gitignore

git remote add origin [e-mail]:(GitHubUserName)/(GitHubUserName).github.io.git

git checkout -b source 

git add .

git commit -m "first commit for source"

git push origin source

.gitignoreには，とりあえず，publicを入れておくとよいかもしれません．
他に入れるべきファイルやフォルダがあるかもしれませんが，とりあえず．．．

.gitignore

public/

これで，リモートのsourceブランチにソースを置くことができました．

以上が，同じリポジトリ内で，ソースと公開用をそれぞれ異なるブランチに置く流れとなります．
https://(GitHubUserName).github.io/にアクセスすることで，どのように公開されているか見ることができます．（pushしてからしばらくは，反映に時間がかかる場合があります．）

おわりに

今回は，同じリポジトリで，ソースファイル群と公開用ファイル群をブランチを用いて，別々に分ける方法についてまとめました．
リポジトリの中でまたリポジトリを新規作成している形になると思うのですが，個人的には，これは改良の余地があると感じています．が，個人の力では，この方法しか思い浮かびませんでした．．．
GitおよびGitHubには疎いので，間違っている部分やもっとセンスの良い方法があれば，ご指摘お願いします．
本格的にサイトかブログとして運用していくには，まだまだ足りない部分はありますが，この記事ではここまでとします．

参考サイト

Quick Start | Hugo
Complete List | Hugo Themes
HUGOでブログ作成 → GitHub Pagesで公開する手順 · chanmitsu55 blog
【2018年版】Hugoとgithub pagesでブログ作る方法【Circle CIも回します】 - Qiita