Github pages+Hugoでブログ作ってみた

前からGODofMEGANE.github.ioでブログっぽいことをしようと思ってましたが、最近godofmegane.comドメインを買ったのでブログ作ってみました

Github pagesとGoogle Domainsの設定

まずはGithubで空リポジトリを作成し、pagesの設定を行います

この画面でNoneと書かれている場面を設定したいブランチにしてディレクトリを選べば簡単にホームページが作れます
確認のために適当にhtmlファイルを作ってpushしてみるといいと思います
リポジトリ名がユーザー名.github.io なら

ユーザー名.github.io

それ以外なら

ユーザー名.github.io/リポジトリ名

でアクセスできます

次にGoogle DomainsのリンクとGithub pagesを紐づけます

DNSの設定からカスタムレコードを作成します
タイプはCNAMEにしましょう
CNAMEの場合ホスト名を決める必要があるので、wwwとかにすると良いと思います
データにはgithub pagesのURLを入力しておきます

ここまで設定したらまたgithub pagesの設定画面へ戻りましょう

Custom domainの欄にGoogle Domainsで取得したドメインを入力し、Saveをクリックします
少し待てばGoogle Domainsで取得したドメインにアクセスするとgithub pagesが見られるようになるはずです！
次にHugoを用いてブログを作っていきます

Hugoのインストール

今回はWindowsでインストールを行います
まず本体をこちらからダウンロードします
Windowsを使用していて64bit版なら
hugo_0.96.0_Windows-64bit.zip
をダウンロードして解凍しましょう
出てきた実行ファイルにはPATHを通しておきましょう
envと検索し、環境変数を編集を開きます

そうしたら上の通り

ユーザー環境変数のPathを選択
編集(E)…をクリック
新規(N)…をクリック
hugoの実行ファイルがあるフォルダを入力

を行いましょう
実行ファイル自体ではなくて、実行ファイルのあるフォルダなので注意してください
最後にOKを押して閉じましょう
ここまで終わったらPowerShellを開き

hugo

と入力してみましょう

上記のような結果になればOKです

用語 ‘hugo’ は、コマンドレット、関数、スクリプトファイル、または操作可能なプログラムの名前として認識されません。

と表示された場合、PATHを通せていないのでもう一度やり直してみてください
正常にPATHが通せたら先ほどgithub pagesの設定を行ったリポジトリをcloneしましょう
cloneしたらそのディレクトリ内部でPowerShellで以下のコマンドを入力しましょう

hugo new site サイト名

サイト名の部分は各自で好きな名前にしてください
これでhugoの準備は完了です

Hugoのテーマを決める

Hugoではテーマというものがあり、他の人が作成したテーマを適用することで簡単にカッコいいブログを作ることができます
こちらから好みのテーマを探してみましょうこのブログではrobustというテーマを使わせてもらっています
スマホでの見た目がカッコいくてお気に入りです!
テーマを決めたら以下のコマンドを入力しましょう

cd themes
git submodule add テーマのGithubのURL

これだけでテーマを適用させることができます

hugo server

と入力した後に http://localhost:1313/ にアクセスすれば確認ができます
ちなみにgithub pagesをただcloneしただけだとテーマがcloneされず以下のようなエラーを吐かれます

found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

その場合は以下のコマンドを追加で入力しましょう

git submodule update --init --recursive

これによりテーマもcloneすることができます
次に設定ファイル config.toml を書き換えます

Hugoの設定を行う

Hugoでは config.toml を書き換えることで色々な設定が行えます
自分の設定を以下に置いておきます

baseURL = 'http://godofmegane.github.io/'
canonifyurls = true
publishDir = "docs"
languageCode = 'ja'
DefaultContentLanguage = 'ja'
title = "GODofMEGANE's Blog"
theme = 'hugo_theme_robust'
googleAnalytics = 'UA-225430593-1'
disqusShortname = 'www-godofmegane-com'
enableGitInfo = true

[Params]
enableHighlight = false
description = "音ゲー大好きメガネの神様のブログ"
dateformat = "2006/01/02"

[params.author]
name = "GODofMEGANE"
twitter = "https://twitter.com/god_of_megane"
github = "https://github.com/GODofMEGANE"

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

重要そうなやつを解説していきます

baseURLにはgithub pagesのURLを設定しましょう(もしかしたらGoogle Domainsの方でも動くかも)

publishDirはhugoコマンドを使用した場合の出力先を設定できます
ここで選んだディレクトリをgithub pagesのほうで設定しておきましょう

themeにはthemesディレクトリ直下のフォルダ名を書いておくことでそのテーマを適用できます

dateformatはよく見ない指定の仕方ですが、このようにGoで使われているフォーマットのようです、YYYY/MM/DDの場合2006/01/02と指定すればOKです

taxonomiesではtag、category、archiveなどを指定でき、それぞれtag=“tags”、category=“categories”、archive=“archives"とすることで各種機能を利用可能になります

tagでは記事にタグをつけることができるようになり、tagで記事の絞り込みができます
categoryは記事をカテゴリ毎に分別できるようになります
archiveでは記事の更新日時によって絞り込みを行えるようにできます

記事の作成

いよいよ記事を作成していきましょう

hugo new posts/記事の名前.md

で記事を作成できます

Tip:この際に生成される記事のテンプレートはarchetypes/default.mdで変更できます

記事はMarkdownで書くことができます
途中で画像を載せたい場合は static/ のどこかに画像を配置すれば使えます
記事を書き終えたら冒頭部分の

draft = true

を false に変更しましょう
これを行わないと下書き扱いになり記事が反映されません
また、githubにpushする前に

hugo

を実行し、ファイルを出力しておく必要があります
ここまでできたらpushしてみましょう、少し待つとgithub pagesに反映されるはずです

hugo newの効率化

今のままでも記事は作成できますが、記事のファイル名が被らないようにする必要があったり、ファイル名に日本語を使用するとURLに日本語が表示されてしまったりと少し不便です
そこでpowershellで利用可能なスクリプトを作成しました、以下にスクリプト全文を載せます

Param([parameter(mandatory=$true)][String]$slug)
$time = Get-Date -UFormat "%Y%m%d-%H%M%S"
hugo new posts/$($slug)_$($time).md
$file_contents = Get-Content ./content/posts/$($slug)_$($time).md -Encoding utf8 | % { $_ -creplace "title: ""$($slug)_$($time)""", "title: ""$($slug)"""}
Write-Output $file_contents | Out-File ./content/posts/$($slug)_$($time).md -Encoding UTF8
New-Item ./static/images/$($slug)_$($time) -ItemType Directory
Start-Process -FilePath ./content/posts/$($slug)_$($time).md
start 'C:\Program Files\Google\Chrome\Application\chrome.exe' 'http://localhost:1313/'
hugo server

またこれに合わせarchetypes/default.mdを以下のように変更しました

---
title: "{{ .Name }}"
slug: {{ .Name }}
date: {{ .Date }}

tags: []
categories: ["未分類"]

draft: false
---

このスクリプトは

./new.ps1 記事名

のように使用することができ、その場合はファイル名とURLは記事名_YYYYMMDD-HHMMSS.md となりますまた、static/images 内に記事名_YYYYMMDD-HHMMSS のフォルダが作られます
これが多分一番速いと思います