Hugo利用方法メモ

Jan 20, 2016 · web
hugo github

このブログはHugo+GitHub Pagesで公開しているがそれにあたってのメモ

初めはOctopressを使ってたものの、シンタックスハイライトがどうもうまく好みにならなかったので、結局、１週間ほどでHugoに乗り換え。 Octopressに比べると構成もわかりやすいし、最新の資料が多くてよかった。
テーマはなるべくシンプル、かつ、スマホでも見やすいHyde-Xを選定。以下はHyde-Xの場合の設定なので、他のテーマでは変わることがあるので注意

初期設定

ローカルにディレクトリ作成

hugo new site <site-name>で作業用のローカルディレクトリを作成

公開用ディレクトリを作成してGitを設定

cd <site-name>
mkdir public
git remote add origin https://github.com/<github name>/<github name>.github.io.git

.gitignoreをhttps://github.com/github/gitignore から落としてきて、2のpublicの中に置く

記事のテンプレを作成

<site-name>/archetypesにdefault.mdを作成する

date = "now()"
draft = true
slug = ""
title = ""
categories = []

configを編集

<site-name>/config.tomlを環境に合わせて編集する
（設定方法はテーマのREADME.mdを参照）

highlight.jsをカスタマイズ

デフォルトで入っていた分ではSwiftが未対応。。。まぁ基本的にはGistを使う予定だけど、一応使えるように

highlightjs公式で使いそうなものだけを選択してカスタムパッケージをDL
DLしたものの中からhighlight.pack.jsを<site-name>/themes/hyde-x/static/js/highlight.pack.jsと丸ごと置き換え
カラースタイルもついでにXcodeにしたいので、DLしたものの中からxcode.cssを<site-name>/themes/hyde-x/static/css/highlightに追加
config.tomlの中のhighlightをxcodeに変更

これで、無事Swiftもハイライトされるようになった。

Gist埋め込みコードを設定

普通にリンクをコピペしても良いのだけれども（~~GistBoxを使い出したら逆にハッシュだけコピペするのが面倒だったり~~）、せっかくMarkdownで書いているのだから、あまりタグを入れて表記が揺らぐのも微妙なので

<site-name>/layouts/shortcodes/gist.htmlを作成
1のファイルに <script type="text/javascript" src="https://gist.github.com/{{ .Get 0 }}.js"></script> を貼り付けて保存
使いたい場所で
{{< gist gist_sha1_hash >}}
とすると、といった感じで埋め込まれる

記事の作成

<site-name>直下でhugo new post/<file-name>.mdを実行する

プレビューはhugo server -t Hyde-X -D -wを実行した後に、http://localhost:1313/ へアクセス

公開手順

流れ

hugo -t Hyde-Xでサイトを生成
(データ一式がpublicに格納される)
1のデータをGitでcommitしてpush

ただ、毎回これをやるのは面倒なので、シェルスクリプトにしておく

デプロイ用スクリプト

GitHubでの書き方

参考リンク GitHub専用(公式)

M.Ike