目的
- GitHub Pagesのプロジェクトページに静的ページを配置する．
- 端的にコマンドを実行し続けるだけで生成できるようにする．
準備
Hugoのインストール
brew install hugo
Hugoを用いてサイトを生成する
下記のコマンドでsiteを一発で生成する事が出来る．
今回はtestpageという名前のsiteを生成する．
hugo new site testpage
cd testpage
Hugoのテーマをインストール
まずはテーマ適用のためにディレクトリを作成する．
作製位置は，testpageのすぐ下になる．
mkdir themes
cd themes
次に，Installしたいテーマを決めてcloneする．
今回はhugo-base-themeというテーマを利用したため，以下のようなコマンドになる．
git clone https://github.com/crakjie/hugo-base-theme.git hugo-base-theme
# もし任意のテーマをインストールする場合は，
# git clone https://github.com/[username]/[userproject].git [userproject]
# と実行する事で，themesの下に [userproject]という名前のテーマのディレクトリが生成できる．
Hugoのテーマを適用させる
テーマを適用させるには，
# testpageディレクトリに戻り
cd ..
# テーマを適用
hugo -t hugo-base-theme
上記のコマンドで実行可能
サーバを建ててテーマが適用されているか確認
hugo server -t hugo-base-theme
Github にProjectリポジトリを作成する
Githubリポジトリを作製
これは各自でお願いします．
私は 同名のtestpageというディレクトリを生成しました．
config.tomlを編集する
terminal内のtestpage配下に存在するconfig.tomlを編集します．
以下のサイトを参考にしました．
Hugo Part 2 - Hugo で github にブログを立ち上げる
config.toml
title = "My New Hugo Site"
baseurl = "http://shopetan.github.io/testpage"
languageCode = "ja-jp"
theme = "hugo-base-theme" # part 1 で選んだ theme を設定する
canonifyurls = true # 相対パスではなく baseurl を基点とした絶対パスにする
[params]
description = "This is yourblog"
author = "your name"
[taxonomies]
category = "categories"
tag = "tags"
Git管理を開始する
Github側で何かREADME.mdファイルなどを追加していた場合は以下のようにしてgit pullしておきます．
git init
git remote add origin git@github.com:shopetan/testpage.git
git pull origin master
次に，現在存在している publicディレクトリは削除します．
rm -rf public
後はいつも通り
git add .
git commit -m "First commit"
git push origin master
でOKです．
公開準備
Github pagesで公開する為には，gh-pagesというブランチを新たに作成し，index.htmlを含めている必要があります．
まずはgh-pagesにブランチを切り，
# --prphanオプションを付ける事で，他のブランチと独立して管理
git checkout --orphan gh-pages
既存の管理していたファイルを除外する．
git rm -f --cached $(git ls-files)
とりあえず，適当にREADME.mdファイルを追加して反映させる．
echo "# testpage" >> README.md
git add README.md
git commit -m "Initial commit on gh-pages branch"
git push origin gh-pages
masterブランチに戻り，公開準備．
gh-pagesをsubtree化することで，masterブランチにgh-pagesで変更したpublicの内容を反映させる事ができる．
git checkout master
git subtree add --prefix=public git@github.com:shopetan/testpage.git gh-pages --squash
git subtree pull --prefix=public git@github.com:shopetan/testpage.git gh-pages
実際にデプロイを行う．
ここまで出来たら簡単で，後は何か変更を加えるたびに以下のコマンドを入力するだけでOKになる．
# testpageディレクトリから，以下のコマンドを打つだけ
hugo -t hugo-base-theme
git add .
git commit -m "Updating site"
git push origin master
git subtree push --prefix=public git@github.com:shopetan/testpage.git gh-pages