Github Pages & Hugo でブログ公開するまで

PUBLISHED ON 2017-05-21 — HUGO, STATIC SITE

ブログサービスを使わずブログを公開するというのが初めての作業だったので、備忘も兼ねてメモしておく。

Github Pages用のリポジトリを作成

Github Pages にブログを公開するに辺り、まずは こちらの公式の記事を参考に

  • pages というリポジトリ - 記事のソースファイル置き場
  • ACCOUNT名.github.io というリポジトリ - Github Pages 公開用リポジトリ
    • 私の場合 ACCOUNT名goldeneggg になる。

という2つのリポジトリを作成した。pagesリポジトリで作成したコンテンツのビルド成果物を goldeneggg.github.io リポジトリに出力→pushして公開する、という流れを想定している。

Hugoの導入

サイトジェネレータの選定だが、Go製の hugo生成処理が速いという評判だったのと、個人的にGoが好き という理由であまり深くは考えずHugoを使う事にした。

# brew か go get でインストール

$ brew install hugo

## Or

$ go get -u -v github.com/spf13/hugo

Hugoの初期設定

  1. 最初に作成した 記事のソースファイル置き場 用のリポジトリを git clone する
  2. cloneしたディレクトリにcdし、hugo new site . する。これで雛形となるディレクトリ群が生成される

    $ git clone git@github.com:goldeneggg/pages.git
    
    $ cd pages
    $ hugo new site .
    
    # 確認
    $ tree
    .
    ├── archetypes
    ├── config.toml
    ├── content
    ├── data
    ├── layouts
    ├── static
    └── themes

config.toml の設定

自分の場合はこんな感じ

  • googleAnalytics は導入したくなったら修正
  • baseurl Github Pages公開の際のドメインを指定。 末尾の / を忘れずに

    languageCode = "ja-jp"
    title = "@goldeneggg"
    baseurl = "https://goldeneggg.github.io/"
    theme = "ghostwriter"
    copyright = "Fuminori Sakamoto"
    #googleAnalytics = "XXX"
    
    [Author]
    name = "@golden_eggg"
    
    [Taxonomies]
    tag = "tags"
    
    [Params]
    intro = true
    headline = "@goldeneggg"
    github = "https://github.com/goldeneggg"
    twitter = "https://twitter.com/golden_eggg"
    email = "jpshadowapps@gmail.com"
    opengraph = true
    
    [Permalinks]
    post = "/:year/:month/:day/:slug/"
    
    [[menu.main]]
    name = "Post"
    url = "/"
    weight = 1

記事用のmarkdown作成

  1. 記事のmarkdownファイルを hugo new <markdownファイル名> で生成する
  2. hugo new で生成したmarkdownを適宜編集

    $ hugo new post/YYYY-MM-DD_PAGENAME.md

記事用のmarkdownの書き方

  • +++ で囲まれた上部はメタ情報

    • title を修正
    • slug を追加(これで公開時のURLがファイル名ではなくこのslugになる)
    • tags を追加(記事のカテゴリタグ)

      +++
      date = "2017-01-15T23:29:55+09:00"
      title = "テスト"
      draft = true
      slug = "hoge"
      tags = ["test"]
      
      +++
      
      SOME CONTENTS

ローカルで内容確認

$ hugo server -D -w

↑して、 http://localhost:1313 にアクセス

テーマの導入

$ git submodule add <THEME_REPOS> themes/<THEME_NAME>

このページではjbub/ghostwriter: A port of ghostwriter theme to Hugo.を使っている

コードハイライト

特に固有の設定などは不要で、問題無くハイライトできていそう

module Hoge
  def hoge
    "hogehoge"
  end
end

ビルド

ここでは記事公開用に作成している goldeneggg.github.io リポジトリのローカルrootディレクトリに成果物をビルド・出力する

# 同じディレクトリ階層に公開用リポジトリDIRが存在する という前提で
$ hugo -d ../goldeneggg.github.io -v

githubにpush・公開

公開用リポジトリのmasterブランチへのpushを行うだけで公開される

$ cd ../goldeneggg.github.io
$ git push origin master

所感

Hugo + Github Pages で自分が行った作業手順を纏めてみたが、Github Pagesがwatchしていない内に随分と進化していてほとんどつまづく事無く公開まで辿り着けた。公開手順はもっと簡略化の余地がありそうだが、今日は一旦ここまで。