Hexo + GitHub Pagesでさくっとブログをつくる

静的WebサイトジェネレーターHexoで技術のアウトプットをするためのブログをさくっとつくります。
デプロイはGitHub Pagesで行います。完成したものがこちらのブログです。
簡単な流れと、はまったところだけメモします。

バージョン情報

システム	バージョン
OS	Windows 10 Home
Node.js	v12.11.0
yarn	1.19.0
hexo	4.0.0

Hexoを導入する

Node.jsとnpmが導入されているなら、基本的には公式ドキュメントのとおりに導入するだけです。

Themeを選ぶ

自分は公式テーマライブラリで探しました。
Chicというテーマがシンプルで気に入ったのでこれに決定。README.mdを参考にして導入しました。

フォントが中国語になっていたので、cssファイルを編集して日本語のWebフォントに変更しました。

テーマの設定

ルートディレクトリの
テーマフォルダにある _config.yml を上書きして、タイトルなどを設定します。
ルートディレクトリの _config.yml に追加すると、キーが重複して

1	FATAL duplicated mapping key at line , column :

というエラーがでるのでご注意ください。

言語とタイムゾーンは日本のものに設定します。

1 2	language: ja timezone: 'Asia/Tokyo'

その他、タイトル・メニューなども設定できます。
テーマ独自の設定項目もあります。テーマのREADME.mdを参考にしましょう。

複数タグの設定方法

記事に複数のタグを設定したい場合は、

tags:
- Hexo
- Node.js
- GitHub Pages

こういう記法で列挙しましょう。

FEEDの導入

npmパッケージの hexo-generator-feed をインストールするだけで導入できました。

更新日の設定

記事ファイルのヘッダーに

1	updated: 2020-01-01 10:00:00

という記述を追加すると、更新日が設定できます。

Google Analyticsの設定

モチベーションに繋がるので、Google Analyticsは導入したいところ。
テーマファイルのejsファイルに直接タグを追加しました。

GitHub Pagesでデプロイする

GitHub Pagesでのデプロイについても、公式ドキュメントが充実していたのでそちらの、 Private repository の項目を参考にしました。
ですが、GitHub Pagesのユーザーページにデプロイしたかったので、多少手順が変わっています。
( https://<username>.github.io/<project>/ ではなく、 https://<username>.github.io/ にデプロイしたかった)

<username>.github.io という空のリポジトリを作成します。(publicで作らないと無料でGitHub Pagesが使えないので注意)
ルートディレクトリの _config.yml に公式ドキュメントを参考に記述を追加し、branchをmasterに変更
ルートで $ hexo clean と $ hexo deploy を実行 (自分はnpm-run-allを導入して、1コマンドにまとめました)

おわりに

テーマは、モチベーションのあるときに少しずつ改修するつもりなので、今後改修した内容はこちらに追記します。