Hexo.jsで自分好みの高機能なブログを手軽に作ろう
Hexo.js をジェネレータとして、テーマやプラグインを使って自分好みにカスタマイズできる高機能なブログを、簡単に作成する手順をご紹介します。
はじめに
筆者の紹介
KDDI の子会社である mediba でテックリードをしている雑食系雑用エンジニア。インフラ、フロントエンド、バックエンド、SRE、CI/CD などプロダクトに必要な役割は、何でもやる人（注：バックエンドが本職）。この記事が投稿される頃は、忙しすぎて死にそうになっているでしょう。誰か私を救ってくれ。
目的・ゴール
この記事をひと通り読んだ後に、Hexo.js でブログを作成できるようになっていること。もしくは、この記事を読みながらブログを作成できること。
読者ターゲット
この記事は、以下のような方が読むことをオススメします。
- 一般的なブログサービスを使わずに、自分の力だけでブログを開設したい人
- メンテナンスやセキュリティ等の宗教上の理由で、WordPress を採用したくない人
- カスタムドメインを使ったり、ブログを自由自在にカスタマイズしたり等、やりこみたい人
記事が生まれたきっかけ
書いた「RIDDLE JOKER」のレビューを投稿する場所と方法を探していたことがきっかけです。作中のスクショを張りたかったことと、R18 指定のゲームだったこともあり、Ameba や FC2 等のブログサービスを使用せず、ホスティングしようと考えました。
場所は、GitHub Pages で静的サイトホスティングができることは知っていたので、すぐに決まりました。あとは、ブログに必要なウェブページ一式を生成するジェネレーターを探すだけでした。紆余曲折あって、Hexo.js に辿り着き、これを使うことにしました。こうして、このブログが Hexo.js + GitHub Pages で爆誕し、さらにこの記事が生み出されたのです。
なお、Hexo と書かれていると、ヘクソと読みがちですが、ヘキソの読みが正しいようです。ぶっちゃけ、どっちでも伝わるとは思うので、どっちの呼び方でも良いと思います。
手元でブログを作成する
まずは、手元でブログを作って、ローカル環境のパソコン内で動かします。
ローカル環境の整備
(1) Node.js 最新版インストール
- Node.js のバージョン管理ツールから最新版をインストールします。
- 大抵のツールは、インストール後にバージョン切り替えをしないので、自分でインストールしたバージョンに変更するコマンドを実行してください。
- その後、
node -vコマンドで、最新バージョンに切り替わっていることを確認してください。
- npm を最新バージョンに更新します。
(2) hexo-cli コマンドのインストール
npm 経由で、hexo-cli コマンドをインストールします。
npm install -g hexo-cli
ブログセットアップ
(1) 初期化
以下のコマンドで、blog ディレクトリ配下にブログ一式を作成します。ディレクトリの名前は、任意のものに変えても大丈夫です。
hexo init blog
(2) インストール
作成したディレクトリに移動し、npm install コマンドを実行します。
cd ./blog
npm install
これだけでブログのセットアップは完了です。ね？簡単でしょ？
(3) 表示確認
では、下記のコマンドを実行してセットアップしたブログを表示してみましょう！
npm run clean && npm run server
コマンド実行時にログにも出ますが、Ctrl+C で Hexo サーバーを止められます。
カスタムテーマの導入
初回セットアップ時のデフォルトテーマは、「landscape」です。最低限のことはできます。しかし、見た通りデザインがイケてませんし、オシャレ感が足りません（※個人の感想です）。そんな人のために、Hexo 公式ホームページから、有志が作成したテーマを検索できるようになっています。
おすすめのテーマは？
検索してみるとたくさんあって悩みますが、私の一番のおすすめは「Icarus」テーマです。「Icarus」テーマの公式ドキュメントにインストール手順があるので、導入してみてください。
ブログ設定の調整
手元で確認した時に「ブログのタイトルを変えたい」等思った方はいらっしゃると思います。blog ディレクトリの直下に、ブログの設定ファイルがあるので、その中身を次のように書き換えていきます。
# Site
title: ブログタイトル
subtitle: '' # 使われないテーマでは設定不要
description: 'サイトの説明文 は、こんな 感じで書けます。'
keywords: 'Key,word'
author: author
language: ja
timezone: Japan # Asia/Tokyo 表記でも可
# URL
url: https://username.github.io/ # usernameは、GitHubのユーザー名に書き換える
permalink: articles/:title/ # デフォルトでも良い方は変更不要
# Writing
new_post_name: :year_:month_:day_:title.md # 日付が接頭辞にあると見やすいです（オススメ）
post_asset_folder: true # 記事ごとに画像ファイルを配置したいならtrue
上記に抜粋した設定項目は、必要最低限の変更した方が望ましい箇所です。
他の設定については、Hexo 公式ホームページに設定に関する詳細説明がまとめられているので、そちらをご確認ください。
記事の生成と書き方
(1) 記事ファイル生成
次のコマンドを実行して、記事を作成します。
hexo new post "article-name"
(2) 記事のメタ情報を書く
source/_posts ディレクトリ直下に、Markdown 形式のファイルとして、記事が生成されます。このファイルは、次のような内容になっています。
---
title: article-name
date: 2024-12-22 09:00:00
tags:
---
--- で囲まれた部分を「Front Matter」と呼び、Hexo では記事のメタ情報を記載する場所です。
記事のタイトルは、title フィールドの値を参照するので、ここを表示したいタイトル文言に変えてください。他にも、導入したカスタムテーマによっては、カスタムフィールドが用意されている場合があります（例：Icarus テーマなら、thumbnail や cover 等）。お好みで追加の設定をしてください。
(3) 記事の本文を書く
ブログの本文は、「Front Matter」の後に記述します。
以下は、当ブログで実際に執筆した記事を引用したもので、「Front Matter」に色々と設定したり、本文を書いたりしています。本文中の <!-- more --> は何かというと、「続きを読む」ボタンを差し込み、後続の文章を隠すための機能です。これより前の文章がインデックスページに抜粋として表示されます。
---
title: Hexo.js+GitHub Pagesで高機能ブログを手軽に作ろう
date: 2023-12-22 09:00:00
updated: 2023-12-22 09:00:00
tags:
- ブログ作成
- Hexo
- Icarus
- npm
- Advent Calendar
category: Technology
---
ちゃろー☆今年もアドベントカレンダーの時期がやってきました！
今年は、例年通りのGitHub Actionsネタではなく、GitHub Pagesネタで提供させていただきます。
<!-- more -->
## はじめに
その他のカスタマイズ
ここまでの手順で、ブログとしてはほぼ完成しています。あとは、テーマのデザインを弄ったり、プラグインを入れたりなど、皆様のお好みでどうぞ。
Icarus テーマのカスタマイズ
Icarus テーマを導入した方は、日本語の表示時フォントが Microsoft YaHei になっています。
見慣れているフォントに変えたいなら、フォント設定に関する処理を書き換えると変更できます（※前項「カスタムテーマ導入」の注意事項を読んでください）。やり方については、「Hexoのicarusテーマのフォントの変え方」や「HEXO の表示フォントを変更」をまねてみると良いでしょう。
リンクプレビュー機能のプラグイン
リンクプレビュー機能を導入したい方は、私が自作プラグインを作ってみたので、以下の記事も併せて読んでみてください。
おわりに
とても楽にブログを作れるし、カスタマイズも簡単だし、さらに無料でホスティングできるとは、便利な世の中になったものだなぁ（小並感）。私は、十数年前の学生時代に、さくらインターネット + WordPress でブログを作っていましたが、このようになるとは露程も思っていませんでした。
イマどきホスティングでブログを作ろうなんて酔狂な人は少ないかもしれませんが、機会があれば是非参考にしてみてください。
関連記事
ブログ作成
自作Hexoプラグイン
参考文献
ローカル環境整備
Hexo 公式
icarus テーマ
Hexo.jsで自分好みの高機能なブログを手軽に作ろう
https://blog.chaotic-notes.com/articles/start-hexo-blog-in-github-pages/
