はじめに
「技術ブログを始めたいけれど、WordPressはサーバー管理が面倒。かといって外部のブログサービスだとカスタマイズの自由度が物足りない」——そんな悩みを抱えたことはありませんか？
Markdownで記事を書いて、コマンド1つでビルド、そのままGitHub Pagesに無料公開。そんな軽快なブログ運用を実現してくれるのが、Node.js製の静的ブログフレームワークHexoです。数百ページ規模のサイトでも数秒でビルドが完了する生成速度と、シンプルなCLI操作が魅力で、GitHubスターは41,000を超える定番ツールとなっています。
この記事では、Hexoのインストールから記事作成、テーマのカスタマイズ、GitHub Pagesへのデプロイまでを順を追って解説します。
Hexoとは
Hexoは「A fast, simple & powerful blog framework」を掲げる、Node.js製の静的サイトジェネレーターです。台湾の開発者Tommy Chen氏によって2012年に公開されて以来、活発にメンテナンスが続けられており、2026年5月にはv8.1.2がリリースされています。
静的サイトジェネレーターとは、Markdownなどのソースファイルからあらかじめ全ページのHTMLを生成しておく仕組みのことです。サーバー側でのデータベース処理が不要なため、表示が高速でセキュリティリスクも小さく、GitHub Pagesのような無料の静的ホスティングにそのまま載せられます。
主な特徴
- 圧倒的なビルド速度 - Node.jsの非同期処理を活かし、数百のファイルを数秒でビルドします。記事数が増えても快適さが持続します
- GitHub Flavored Markdown対応 - テーブルやコードブロックなど、GitHubでおなじみのMarkdown記法がそのまま使えます
- ワンコマンドデプロイ -
hexo deployの1コマンドで、GitHub PagesやGitLab Pagesなどへ公開できます - 豊富なテーマとプラグイン - 数百のテーマ・プラグインが公開されており、EJS・Pug・NunjucksといったテンプレートエンジンやSass・PostCSSなどのnpmエコシステムとも統合できます
インストール
Hexo 8.x系の動作にはNode.js 20.19.0以上とGitが必要です。事前にインストールしておきましょう。
準備ができたら、Hexoの公式CLIであるhexo-cliをグローバルにインストールします。
npm install -g hexo-cli
macOSやLinuxであればHomebrewでもインストールできます。
brew install hexo
インストールを確認しましょう。
hexo version
基本的な使い方
ブログの初期化
まずはhexo initでブログの雛形を作成します。
hexo init my-blog
cd my-blog
npm install
生成されるディレクトリ構成は次のとおりです。
my-blog/
├── _config.yml # サイト全体の設定ファイル
├── package.json
├── scaffolds/ # 記事テンプレート
├── source/ # 記事などのソースファイル
│ └── _posts/ # ブログ記事（Markdown）
└── themes/ # テーマ
ローカルサーバーで確認
開発用サーバーを起動すると、http://localhost:4000でブログをプレビューできます。
hexo server
ファイルを保存すると自動で反映されるので、記事を書きながらリアルタイムに確認できます。
記事の作成
新しい記事はhexo newコマンドで作成します。
hexo new "はじめてのHexo"
source/_posts/はじめてのHexo.mdが生成されるので、Markdownで本文を書いていきます。ファイル冒頭のfront-matterで記事のメタ情報を管理します。
---
title: はじめてのHexo
date: 2026-07-13 10:00:00
tags:
- Hexo
- ブログ
categories:
- 技術メモ
---
ここから本文です。**GitHub Flavored Markdown**がそのまま使えます。
テーブルやコードブロック、タスクリストも記述できます。
静的ファイルの生成
記事が書けたら、HTMLをビルドします。
hexo generate # 短縮形: hexo g
public/ディレクトリに完成したサイト一式が出力されます。このフォルダをそのまま任意の静的ホスティングにアップロードすれば公開完了です。
実践的なユースケース
サイト設定のカスタマイズ
ルートの_config.ymlを編集して、サイトの基本情報を設定します。
# _config.yml
title: My Tech Blog
subtitle: '日々の学びを記録する'
description: 'Web開発の技術メモブログです'
author: easegis
language: ja
timezone: 'Asia/Tokyo'
url: https://username.github.io
テーマの変更
Hexoには公式サイトに数百のテーマが公開されています。人気テーマの一つ「NexT」を導入する例です。
npm install hexo-theme-next
_config.ymlでテーマを切り替えます。
# _config.yml
theme: next
これだけでサイト全体のデザインが一新されます。テーマごとの詳細設定は_config.next.ymlのようなテーマ設定ファイルで上書きできるため、テーマ本体を編集せずにカスタマイズを管理できます。
GitHub Pagesへワンコマンドデプロイ
Git経由のデプロイを担う公式プラグインを追加します。
npm install hexo-deployer-git --save
_config.ymlにデプロイ先を設定します。
# _config.yml
deploy:
type: git
repo: https://github.com/username/username.github.io.git
branch: main
あとは次のコマンドを実行するだけで、ビルドから公開までが一気に完了します。
hexo clean && hexo deploy
GitHub Actionsと組み合わせれば、mainブランチへのpushをトリガーに自動デプロイするワークフローも簡単に構築できます。
# .github/workflows/deploy.yml
name: Deploy Hexo
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: write
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '22'
- run: npm ci
- run: npx hexo generate
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v4
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
タグ・カテゴリページの追加
記事が増えてきたら、タグ一覧やカテゴリ一覧のページを用意すると回遊性が高まります。
hexo new page tags
hexo new page categories
生成されたsource/tags/index.mdのfront-matterにページタイプを指定します。
---
title: タグ一覧
type: tags
---
多くのテーマはこのtypeを認識して、自動的にタグクラウドやカテゴリツリーを描画してくれます。
まとめ
この記事では、Node.js製静的ブログフレームワークHexoについて解説しました。
- Hexoは数秒でビルドが完了する高速さとシンプルなCLIが魅力の静的サイトジェネレーターです
hexo init→hexo new→hexo generateの3ステップで、Markdownベースのブログがすぐに形になりますhexo-deployer-gitを使えば、GitHub Pagesへのデプロイもコマンド1つで完結します- 数百のテーマ・プラグインにより、デザインも機能も柔軟に拡張できます
サーバー管理から解放されて、書くことに集中できるのがHexoの最大の魅力です。まずはhexo initで雛形を作り、最初の1記事を公開するところから始めてみてください。