HugoとGitHub Pagesで始めるブログ生活：後編

2017/08/28

※作った時の記憶を頼りに書いてるので、もし躓いたりしたら連絡ください。

前編は Hugo でブログを作るところまでやったので、今回はGitHub Pagesで公開するところまでやる。

User Pages or Project Pages

Organization ではない個人ユーザーアカウントで作れる GitHub Pages には下記の2種類がある。

  • User Pages
  • Project Pages

違いは公式に書いてあるので詳細は割愛してざっくりとした違いだけ説明する。

  • User Pages
    • 1アカウントで作成できるのは1つのみ。
    • URLは username.github.io
    • 公開ファイルは master ブランチの /。
  • Project Pages
    • 1アカウントで複数作成できる。
    • URLは username.github.io/projectname
    • 公開ファイルは master ブランチの /、 gh-pages ブランチの /、 master ブランチの docs/ のいずれかを選択する。

もし username.github.io で自分自身の about サイトやポートフォリオ的なサイトを公開するのであれば、 User Pages でそれを、 /blog でブログを公開するなどの使い方ができると思うが、僕は今のところは User Pages でブログをやっている。 どちらで作るのか、（Project Pagesの場合）公開ファイルはどのブランチのどのディレクトリにするのかによって若干構成が異なるので予め決めておく。

僕の場合

ここからは僕の構成の場合について書く。まず上記でいうと User Pages でブログを公開している。また、 Hugo で作成している site 自体（なんと言えば良いのか・・・）も GitHub で管理しているので、 blog 用の repository も存在している。ちょっと説明しづらいので図にすると下記のようなイメージ。

blog/   # <-- github.com/tanaka0325/blog で管理 (private repository)
  archetypes/
  content/
  docs/ # <-- github.com/tanaka0325.github.io で管理
  layouts/
  config.toml
  deploy.sh
  static/
  themes/

上の blog/ 自体を GitHub で管理しないのであれば、 docs/(デフォルトでは static/ )を username.github.io repository で管理するだけでよい。

※ちなみに github.com/tanaka0325/blog を private にしてる理由は非公開記事を間違って見れる状態にしちゃわないようにしてるだけ。特に深い意味はない。

やり方

公開するコンテンツは既にあるものとする。まだ作ってなかったら前編を見てね。

目次

  1. blog用のrepositoryを作る
  2. GitHub Pages用のrepositoryを作る(User Pages)
  3. deploy.shを準備する
  4. deploy!!

1. blog用のrepositoryを作る

コマンドラインからでも GitHub の web からポチポチでも良いので、 blog 用の repository を作る。 repository 名とかは何でもよい。僕は github.com/tanaka0325/blog という repository を private で作ってる。

ちなみに public で作った場合、（上にも書いたが）記事ファイルで draft: true とやっていても、この repository ページで中身が見れちゃう。そこを気にしないか、draft: false にするまでpushしないか、などの運用ルールなどでカバーする必要があるかと思う。

後述するが、static/ は別 repository で管理するので .gitignore に入れとく。あと好みだけれど、themes/ を入れておいてもよい。

# .gitignore
static
themes

repository ができたらとりあえず push でもしといてくれれば。

2. GitHub Pages用のrepositoryを作る(User Pages)

次に GitHub Pages 用の repository を作る。 これは static/ 以下のファイルを上げる必要があるので、static/ で $ git init して作る。

GitHub Pages の User Pages を使う場合、 repository 名は指定されていて、username.github.io とする必要がある。僕の場合は tanaka0325.github.io。

GitHub Pages を有効にするには repository の Settings ページでやる必要がある。 Settings のページに GitHub Pages という項目があるので有効にする。

できたらこれも適当に push しておく。

3. deploy.shを準備する

ここまでの作業でもう公開はできるのだけど、今後の運用を楽にするためdeployスクリプトを作る。 Hugoの公式サイトに参考があるので、それを自分の環境に合うように修正して作成する。

作成したら Hugo のルートに配置して実行権限を付与する。

$ chmod +x deploy.sh

参考までに僕の場合は下記。ほぼ公式と一緒だけど。

#!/usr/local/bin/zsh

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo

# Git push tanaka0325/blog
git add .
message="rebuilding site `date`"
if [ $# -eq 1 ]
  then message="$1"
fi
git commit -m "$message"
git push origin master

# Git push tanaka0325.github.io
cd docs
git add .
# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"
# Push source and build repos.
git push origin master
# Come Back up to the Project Root
cd ..

4. deploy!!

あとは記事を書いて、draft: falseにしたらdeploy.shを叩くだけ！

$ ./deploy.sh

# 引数でコミットメッセージを渡すこともできる。なければ "rebuilding site `date`" がコミットメッセージになる。
$ ./deploy.sh "post hugo_on_github_pages_2"

僕自身まだ開始して日が浅いので詳しくないけれど、それでも少しばかりはTipsもあったりするが、細かい話は追々書くかも。 とりあえずは最低限上記をやれば公開まではできるかと。