Github Pages & Hugo でブログ公開するまで
ブログサービスを使わずブログを公開するというのが初めての作業だったので、備忘も兼ねてメモしておく。
Github Pages用のリポジトリを作成
Github Pages にブログを公開するに辺り、まずは こちらの公式の記事を参考に
pages
というリポジトリ - 記事のソースファイル置き場ACCOUNT名.github.io
というリポジトリ - Github Pages 公開用リポジトリ- 私の場合
ACCOUNT名
はgoldeneggg
になる。
- 私の場合
という2つのリポジトリを作成した。pagesリポジトリで作成したコンテンツのビルド成果物を goldeneggg.github.io リポジトリに出力→pushして公開する、という流れを想定している。
Hugoの導入
サイトジェネレータの選定だが、Go製の hugo が生成処理が速いという評判だったのと、個人的にGoが好き という理由であまり深くは考えずHugoを使う事にした。
|
|
Hugoの初期設定
- 最初に作成した 記事のソースファイル置き場 用のリポジトリを
git clone
する - cloneしたディレクトリに
cd
し、hugo new site .
する。これで雛形となるディレクトリ群が生成される
|
|
config.toml
の設定
自分の場合はこんな感じ
- googleAnalytics は導入したくなったら修正
- baseurl Github Pages公開の際のドメインを指定。 末尾の
/
を忘れずに
|
|
記事用のmarkdown作成
- 記事のmarkdownファイルを
hugo new <markdownファイル名>
で生成する hugo new
で生成したmarkdownを適宜編集
|
|
記事用のmarkdownの書き方
+++
で囲まれた上部はメタ情報title
を修正slug
を追加(これで公開時のURLがファイル名ではなくこのslugになる)tags
を追加(記事のカテゴリタグ)
|
|
ローカルで内容確認
|
|
↑して、 http://localhost:1313 にアクセス
テーマの導入
|
|
このページではjbub/ghostwriter: A port of ghostwriter theme to Hugo.を使っている
コードハイライト
特に固有の設定などは不要で、問題無くハイライトできていそう
|
|
ビルド
ここでは記事公開用に作成している goldeneggg.github.io リポジトリのローカルrootディレクトリに成果物をビルド・出力する
|
|
githubにpush・公開
公開用リポジトリのmasterブランチへのpushを行うだけで公開される
|
|
所感
Hugo + Github Pages で自分が行った作業手順を纏めてみたが、Github Pagesがwatchしていない内に随分と進化していてほとんどつまづく事無く公開まで辿り着けた。公開手順はもっと簡略化の余地がありそうだが、今日は一旦ここまで。