はじめに

技術ブログの作成を考えているなら、Hexoは最適な選択肢となるだろう。その軽量さと拡張性、さらにはGitHub Pagesとの高い互換性が魅力だ。この記事では、Hexoをインストールし、Icarusテーマを用いてカスタマイズし、日本語対応とデプロイまでの流れを解説する。

手順

1. Hexoのインストールとセットアップ

Hexo CLIをインストール

以下のコマンドを実行してHexo CLIをインストールする。

npm install -g hexo-cli

プロジェクトの初期化

作業ディレクトリを作成し、Hexoプロジェクトを初期化する。

mkdir my-blog
cd my-blog
hexo init
npm install

2. Icarusテーマの導入

(1) テーマのダウンロード

以下のコマンドでIcarusテーマをダウンロードし、themesディレクトリに配置する。

git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

(2) テーマを有効化

_config.ymlのthemeを以下のように変更する。

theme: icarus

(3) テーマの依存パッケージをインストール

cd themes/icarus
npm install
cd ../../

3. 日本語化の設定

サイト全体の言語を日本語に設定

_config.ymlのlanguageを以下のように変更。

language: ja

Icarusテーマの日本語対応

themes/icarus/languages/ja.ymlを作成し、以下を記述。

Home: ホーム
Archives: アーカイブ
Categories: カテゴリー
Tags: タグ
About: 概要

4. 日本語フォントの適用

カスタムCSSの適用

themes/icarus/source/css/custom.cssを作成し、以下を記述する。

body {
    font-family: 'Noto Sans JP', 'Roboto', 'Arial', sans-serif;
}

Webフォントの読込

themes/icarus/layout/_partial/head.ejsに以下を追加する。

5. ブログ記事の作成

新しい記事を作成

以下のコマンドで新規記事を生成。

hexo new "My First Post"

記事の編集

生成されたMarkdownファイル（例: source/_posts/My-First-Post.md）を開き、内容を編集する。

6. GitHub Pagesへのデプロイ設定

Hexoデプロイプラグインをインストール

npm install hexo-deployer-git --save

デプロイ設定を追加

_config.ymlに以下を追加。

deploy:
  type: git
  repo: https://github.com/ユーザー名/リポジトリ名.git
  branch: main

7. 静的ファイル生成とデプロイ

静的ファイルを生成

hexo clean
hexo generate

GitHub Pagesにデプロイ

hexo deploy

8. 動作確認

GitHub Pagesで公開されたサイト（例: https://ユーザー名.github.io）にアクセスし、正しく表示されるか確認する。

9. トラブルシューティング

デプロイが失敗する場合
- _config.ymlのrepoやbranchの設定を確認する。
- GitHubリポジトリの権限が適切か確認。
日本語フォントが適用されない場合
- head.ejsへのフォントリンク追加が正しいか確認。
- ブラウザキャッシュをクリアし再読み込み。

まとめ

Hexoを使えば、手軽に高品質な技術ブログを構築可能だ。さらに、Icarusテーマを活用すれば、デザイン性の高いサイトに仕上がる。この記事の手順を参考に、自分だけのオリジナル技術ブログを作成し、情報発信を楽しもう。

HexoとGitHub Pagesを使った技術ブログの作成手順