ブログシステムHugoを構築してGithub Pagesで運用する

ちょっとしたページを作成する必要があったので、Hugoで構築してみる。
HugoはGithub Pagesに構築できるらしいので、それも合わせて対応する。

作業環境

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.11.3
BuildVersion:   15D21

インストール

hugoをbrewで入れる。
golangなど必要なパッケージも合わせてインストールされる。

$ cd ~
$ brew install hugo

確認

$ hugo version
Hugo Static Site Generator v0.15 BuildDate: 2015-11-26T01:29:07-05:00

プロジェクト作成

$ hugo new site (PJNAME)
$ ls (PJNAME)
archetypes  config.toml content     data        layouts     static

記事作成

記事をcreateすると、

$ hugo new test.md

contentディレクトリの下にファイルが作成される。

$ cat content/test.md
+++
date = "2016-02-24T12:32:35-05:00"
draft = true
title = "test"

+++

あとはMarkdownで書き加えていけばOK

テーマ設定

見た目をいじる。
Hugo Themes Siteを見て、良さそうなテーマを探す。
今回はagencyを使う。

ダウンロード

$ mkdir themes
$ git clone --depth 1 --recursive https://github.com/digitalcraftsman/hugo-agency-theme.git themes

試しにローカルで起動させてみる。

$ hugo server --watch -t agency
0 draft content
0 future content
0 pages created
0 paginator pages created
0 tags created
0 categories created
in 26 ms
Watching for changes in /Users/yukofeb/Work/github/MovingSaleAtlanta/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/MovingSaleAtAtlanta/ (bind address 127.0.0.1)
Press Ctrl+C to stop

GitHub Pagesに構築する

基本的にはHugo - Hosting on GitHub Pagesを順にやっていけばできる。

以下、簡単な説明。
* Github Pagesを作るにはgh-pagesブランチにpushすれば良い。
* hugoではブログ用に生成したファイルがroot配下のpublicフォルダに配置される
* subtreedコマンドを使って、サブディレクトリpublicとしてgh-pagesブランチを取り込む
* git subtree pushでgh-pagesブランチにpushすることでページを更新する

以下、上記ページを転記して少々加筆。

# Create a new orphand branch (no commit history) named gh-pages
git checkout --orphan gh-pages

# Unstage all files
git rm --cached $(git ls-files)

# Grab one file from the master branch so we can make a commit
git checkout master README.md

# Add and commit that file
git add .
git commit -m "INIT: initial commit on gh-pages branch"

# Push to remote gh-pages branch
git push origin gh-pages

# Return to master branch
git checkout master

# Remove the public folder to make room for the gh-pages subtree
rm -rf public

# Add the gh-pages branch of the repository. It will look like a folder named public
git subtree add --prefix=public git@github.com:yukofeb/MovingSaleAtAtlanta.git(自分のレポジトリに書き換える) gh-pages --squash

# Pull down the file we just committed. This helps avoid merge conflicts
git subtree pull --prefix=public git@github.com:yukofeb/MovingSaleAtAtlanta.git(自分のレポジトリに書き換える) gh-pages

# Run hugo. Generated site will be placed in public directory (or omit -t ThemeName if you're not using a theme)
hugo -t ThemeName


# Add everything
git add -A

# Commit and push to master
git commit -m "Updating site" && git push origin master

# Push the public subtree to the gh-pages branch
git subtree push --prefix=public git@github.com:yukofeb/MovingSaleAtAtlanta.git(自分のレポジトリに書き換える) gh-pages

これで今後は以下のフローだけでGithub Pagesが更新できるようになる。

# masterブランチを更新してpush
$ git commit -m "Updating site" && git push origin master

## gh-pagesにpushする
$ git subtree push --prefix=public git@github.com:yukofeb/MovingSaleAtAtlanta.git(自分のレポジトリに書き換える) gh-pages

完成ページはこちら。いい感じ！
Moving Sale at Atlanta

yukofebの日記

個人的な技術メモ。