Hugo Part 2 - Hugo で github にブログを立ち上げる

Part 1 では、ブログをローカルに構築したので、今回は github に repository をつくってブログを立ち上げる。 Hosting on GitHub Pages を参考にして、セットアップ手順を記していく。

Step 1 github に blog repository をつくる

github にアクセスして、repository をつくる。repository name がそのまま URL になる（以下のようなURL）。

http://[username].githug.io/[repo]

  • [] の意味
    • [username] : github の username
    • [repo] : github に作成する repository name

Step 2 blog の設定をかいておく

※以降、github に yourblog として repostitory を作成したとして記す。また、part 1 で作成した yourblog があるものとする

part 1 で作成した yourblog ディレクトリ内の config.toml を開いて設定を書く（以下参考）。

title = "My New Hugo Site"
baseurl = "http://[username].github.io/yourblog"
languageCode = "ja-jp"
theme = "hyde"　# part 1 で選んだ theme を設定する
canonifyurls = true # 相対パスではなく baseurl を基点とした絶対パスにする

[params]
  description = "This is yourblog"
  author = "your name"

[taxonomies]
  category = "categories"
  tag = "tags"

Step 3 repository に push する

yourblog ディレクトリで以下のコマンドを実行する。

$ git init # part 1 で作成した yourblog をリポジトリにする
$ git remote add origin git@github.com:[username]/yourblog.git # remote を設定する
$ git pull origin master
$
$ rm -rf public # このディレクトリは git subtree を利用して管理するので削除する
$ git add -A
$ git commit -m "Add hugo template"
$ git push origin master

Step 4 gh-pages ブランチを作成する

gh-pages ブランチには hugo で作成されたコンテンツ（ public ）のみ置いて、 関係のないもの（ archetypes, themes, etc ）は紛らわしいので管理したくない。

そこで、master から独立したブランチを作成するために、orphan オプションを つけて履歴のないブランチを作成する。

$ git checkout --orphan gh-pages   # orphan ブランチ 作成
$ git rm --cached $(git ls-files)  # 要らないので、全て管理対象からすべて外す
$ git add README.md                # README.md だけいれておく
$ git commit -m "initial commit on gh-pages branch"
$ git push origin gh-pages

master に戻って git subtree を利用して、gh-pages ブランチを master の public に取り込む。 subtree って何？って思う方は、下部の参考を見てください。

$ git checkout master
$ git subtree add --prefix=public git@github.com:[username]/yourblog.git gh-pages --squash
$ git subtree pull --prefix=public git@github.com:[username]/yourblog.git gh-pages

hugo コマンドで public を生成して以下のように push していくことで、 master に変更を加え、gh-pages にも変更を加える事が出来る。

$ hugo
$ git add -A
$ git commit -m "Updating site"
$ git push origin master
$ git subtree push --prefix=public git@github.com:Syati/yourblog.git gh-pages

基本的に新しい記事を書いて github.io に公開（ Deploy ）する際、上記の手順を踏むことになる。 毎回これするのはめんどくさいので、Step 5 に進む。

Step 5 めんどさい Deploy はスクリプトを利用する

Hosting on GitHub Pages の deploy.sh に書かれている以下を利用する。


# !/bin/bash

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

# Build the project. 
hugo

# Add changes to git.
git add -A

# 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
git subtree push --prefix=public git@github.com:[username]/yourblog.git gh-pages　

spencerlyon2/hugo_gh_blog のレポジトリに deploy.sh があるので　DL してきて修正するのがはやいかも。

deploy.sh を yourblog ディレクトリに保存したのち、実行できるように以下を実行する。

$ chmod +x deploy.sh

これで新しい記事を書いて github.io に公開（ Deploy ）する際は、以下のコマンドを実行するのみで良い。

$ ./deploy.sh

Comments