Hexo徹底解説：高速Markdown静的サイト生成の仕組みと実運用ガイド

2025年12月19日 最終更新日時 : 2025年12月19日 エバープレイ編集部

はじめに — Hexoとは何か

HexoはNode.jsで実装された静的サイトジェネレータ（SSG: Static Site Generator）で、Markdownで記事を書くことで高速にHTMLを生成できるツールです。2012年に開発が始まり、ブログやドキュメントサイトの構築で広く利用されています。特徴は軽量で高速、プラグインとテーマのエコシステムが豊富な点です。

基本的な仕組みと特徴

  • Node.jsベース：Hexo本体はNode.jsで書かれており、npmでインストールします。CLIコマンドで初期化、記事作成、ビルド、ローカルサーバ起動、デプロイができます。

  • Markdownを中心としたワークフロー：投稿はMarkdownファイル（YAMLのフロントマター付き）で行い、テンプレートエンジンでHTMLに変換します。

  • テーマとプラグイン：テーマによる見た目のカスタマイズや、レンダラー・ジェネレーター・デプロイなどのプラグインで機能拡張が可能です。

  • ビルド方式：静的ファイルを事前生成し（hexo generate）、生成結果をサーバやCDNに配置します。これにより公開サイトは高速で安全です。

インストールと初期セットアップ

基本的な手順は以下の通りです（事前にNode.jsとnpmをインストール）。

  • Hexo CLIをグローバルにインストール: npm install -g hexo-cli

  • 新規サイト作成: hexo init my-blog でディレクトリ構成を生成。

  • 依存インストール: npm install

  • ローカルサーバ起動: hexo server（既定でhttp://localhost:4000）

  • 新規投稿: hexo new post "タイトル" でsource/_postsにMarkdownファイルを追加。

主要なコマンド

  • hexo init：プロジェクト初期化

  • hexo new：新規記事作成

  • hexo generate（短縮 hexo g）：静的ファイル生成

  • hexo server（短縮 hexo s）：ローカルプレビュー

  • hexo deploy（短縮 hexo d）：デプロイ（プラグインが必要）

  • hexo clean：publicフォルダやキャッシュを削除

フォルダ構成と重要ファイル

主なディレクトリと役割は次の通りです。

  • _config.yml：サイト全体の設定ファイル（ルートとテーマ用）

  • source/：サイトのコンテンツ。_postsに投稿、imagesやその他の静的アセット配置。

  • themes/：テーマを格納。テンプレートはEJSやPugなどを使用。

  • public/：生成された静的ファイルの出力先（デプロイ対象）。

  • scaffolds/：新規投稿時のテンプレート。

  • db.json：Hexoのサイト情報のキャッシュ（自動生成）。

投稿の書き方（フロントマターとMarkdown）

投稿ファイルは通常、YAML形式のフロントマターでメタ情報を記述し、本文はMarkdownで書きます。例：

---
title: サンプル投稿
date: 2025-01-01 12:00:00
tags: [hexo, static]
categories: [技術]
---

本文はMarkdownで記述し、画像やコードブロックも問題なく扱えます。post_asset_folderがtrueの場合、投稿ごとにアセットフォルダを作り、相対パスで参照できます。

テーマとカスタマイズ

Hexoはテーマを差し替えるだけで見た目を大きく変えられます。代表的なテーマにはNexTやButterflyなどがあります。テーマはテーマフォルダ内のテンプレート、スタイル、JavaScript、設定ファイル（_config.yml）で構成され、テーマ固有の設定はルートの_config.ymlから上書き可能です。

テンプレートエンジンはEJSがデフォルトですが、テーマによりPugやSwigが使われることもあります。カスタマイズは、子テーマ的な運用かテーマを直接編集するかで方針を決めます。将来的なアップデートを考えると子テーマ的な手法（テーマを別ブランチで管理する等）が望ましいです。

プラグインとエコシステム

Hexoの強みはプラグインの豊富さです。代表的なプラグインには以下があります。

  • hexo-deployer-git：生成したpublicをGitHub Pagesなどにプッシュするためのデプロイプラグイン。

  • hexo-renderer-marked / hexo-renderer-kramed：Markdownレンダラー。

  • hexo-generator-tag/category/archive：タグ・カテゴリ・アーカイブの生成を補助するジェネレーター（コアあるいはプラグインとして提供）。

  • hexo-migrator-wordpress：WordPressからのエクスポート（XML）をHexoに変換するためのツール。

npm上で公開されているものが多く、必要に応じて導入できます。プラグインの互換性やメンテ状況は事前に確認してください（非メンテナンスのものも存在します）。

デプロイ方法

一般的なデプロイ先はGitHub Pages、Netlify、Vercel、S3+CloudFrontなどです。手順の一例はGitHub Pagesへのデプロイで、hexo-deployer-gitを使ってpublicフォルダの内容を指定ブランチ（gh-pagesやmain）へプッシュします。NetlifyやVercelではリポジトリ連携による自動ビルド＆配信が簡単で、CI代わりにもなります。

SEOとパフォーマンスの実践

静的サイトは元来高速ですが、さらに最適化するポイントは以下です。

  • 画像最適化（WebPやレスポンシブ画像）と遅延読み込み

  • HTMLのミニファイ、不要なJavaScriptやCSSの縮小・分割

  • メタタグ（title, description, Open Graph, Twitter Card）の適切な設定

  • 構造化データ（JSON-LD）やパンくずリストの追加

  • CDNを使った配信とキャッシュ戦略

多くはテーマ側やビルドプロセスで対応できます。Hexoではテンプレートに必要なメタタグを組み込み、生成された静的ファイルをCDNへ置く運用が有効です。

WordPressなどからの移行

WordPressから移行する場合、WordPressのエクスポートXMLをhexo-migrator-wordpressで変換するのが一般的です。ただし移行では以下に注意してください。

  • パーマリンクやURL構造の差異によるリンク切れ対策（リダイレクトの準備）

  • メディア（画像等）の一括ダウンロードと配置

  • コメントやプラグインの機能（検索、コメント機能）は別サービス（DisqusやUtterances等）に置き換える必要がある場合がある

  • カテゴリ・タグ・カスタム投稿タイプの扱い

トラブルシューティングとベストプラクティス

  • ローカルで変更が反映されない場合は hexo clean 後に hexo g を実行してキャッシュ削除を試す。

  • サーバーでのビルドはNode.jsのバージョン依存が出ることがある。推奨LTSに合わせる、またはプロジェクトにenginesを設定する。

  • プラグインは定期的にメンテ状況を確認し、セキュリティ問題や互換性をチェックする。

  • テーマはアップデート時に上書きされない運用（カスタムファイルは別フォルダで管理）を行う。

他の静的サイトジェネレータとの比較

代表的な比較点：

  • Jekyll（Ruby）: GitHub Pagesとの親和性が高いがRuby環境が必要。HexoはNode.jsエコシステムを好む場合に有利。

  • Hugo（Go）: 非常に高速なビルドが特徴。Goバイナリで配布され、ビルド速度を重視するならHugoが優れる場合がある。

  • Gatsby（React）: SPA/Reactベースのリッチな機能やデータ統合が可能だが、ビルドや初期学習コストが高い。

選定は目的（単純ブログ、ドキュメント、動的機能の必要性）や好みの言語エコシステムで決めると良いでしょう。

まとめ — いつHexoを選ぶべきか

Hexoは、Markdownで手早くブログやドキュメントを作りたい、Node.js周りのツールチェーンに慣れている、テーマやプラグインで柔軟に拡張したいユーザーに向いています。デプロイ先やCIと組み合わせれば、非常に運用コストの低い高速な公開サイトを実現できます。一方、複雑な動的機能を多用する場合はGatsbyやNext.jsのようなフレームワークを検討すると良いでしょう。

参考文献

カテゴリー
IT
前の記事
Hexa-coreとは？6コアCPUの仕組み・利点・課題と最適化ガイドNew!!
2025年12月19日
次の記事
Hiawatha入門：軽量でセキュアなWebサーバーを徹底解説New!!
2025年12月19日