Hexoでブログを構築する方法

GitHub Pagesへの再デプロイを機に、Hexoをブログフレームワークとして採用しました。
HexoはNode.jsベースの高速でシンプルな静的ブログ生成ツールです。詳細な使い方を解説します。

目次

• 目次
• インストール方法
  • 前提条件
• プロジェクト初期化
  • 新規ブログ作成
  • フォルダ構造
• 基本設定
• Hexo基本コマンド一覧
  • プロジェクト管理
  • 記事管理
  • ローカルプレビュー
  • デプロイ
  • ヘルプ
  • 基本ワークフロー
• 重要な設定ファイル
• 便利な小技
• 高度なカスタマイズ🔧
  • プラグイン活用例
  • テーマ改造テクニック
• SEO最適化🔍
  • 基本設定
  • メタタグ強化
• 自動デプロイ設定🤖
  • Cloudflare Pagesを使った自動デプロイ
  • 既存設定との統合例
  • 主なメリット
  • 公式ガイド
  • GitHub Actions例
• トラブルシューティング🚨
• 公式ドキュメント

インストール方法

前提条件

• Node.js（v12.0.0以上）とGitをインストール
• Hexo CLIのグローバルインストール:

  npm install -g hexo-cli
  

プロジェクト初期化

新規ブログ作成

hexo init <フォルダ名>
cd <フォルダ名>
npm install

フォルダ構造

.
├── _config.yml       # メイン設定ファイル
├── package.json      # 依存関係
├── scaffolds         # 投稿テンプレート
├── source            # Markdownコンテンツ
├── themes            # テーマフォルダ
└── public            # 生成ファイル（自動生成）

基本設定

_config.ymlの主要設定（日本語訳例）:

# サイト設定
title: マイブログ
subtitle: Hexoで作るブログ
description: 個人技術ブログです
keywords: Hexo, ブログ, チュートリアル
author: あなたの名前

# パーマリンク設定
permalink: :year/:month/:day/:title/

# テーマ設定
theme: landscape

# デプロイ設定
deploy:
  type: git
  repo: <リポジトリURL>
  branch: main

Hexo基本コマンド一覧

プロジェクト管理

記事管理

ローカルプレビュー

デプロイ

ヘルプ

基本ワークフロー

1. 記事作成

hexo new "はじめての投稿"

2. ローカル確認

hexo clean && hexo g && hexo s

3. デプロイ

hexo clean && hexo deploy --generate

重要な設定ファイル

• _config.yml：メイン設定ファイル
• themes/[テーマ名]/_config.yml：テーマ設定ファイル

便利な小技

• 下書き機能：hexo new draft "下書きタイトル"
• デバッグモード：hexo generate --debug
• 特定ファイルのみ生成：hexo g --watch

以下是为您的Hexo日语博客添加的完善建议，使用Markdown格式呈现：

高度なカスタマイズ🔧

プラグイン活用例

# _config.yml に追加
plugins:
  - hexo-generator-search  # 検索機能
  - hexo-related-posts  # 関連記事表示
  - hexo-autonofollow  # 外部リンク対策

テーマ改造テクニック

1. ナビゲーションメニュー追加：

<!-- themes/landscape/_partial/header.ejs -->
<nav>
  <a href="<%- url_for('/about') %>">自己紹介</a>
  <a href="<%- url_for('/projects') %>">プロジェクト</a>
</nav>

2. カスタムCSS追加：

mkdir -p source/css
echo '.custom-class { color: #ff0000; }' > source/css/custom.css

SEO最適化🔍

基本設定

# _config.yml
sitemap:
  path: sitemap.xml
google_analytics: UA-XXXXX-X

メタタグ強化

<!-- themes/landscape/layout/_partial/head.ejs -->
<meta name="keywords" content="<%= config.keywords %>">
<meta property="og:image" content="<%- url_for('/images/ogp.png') %>">

自動デプロイ設定🤖

Cloudflare Pagesを使った自動デプロイ

1. プロジェクト作成手順

   • Cloudflareダッシュボード → [Pages]を選択
   • [プロジェクトを作成] ボタンをクリック
   • GitHubアカウントを接続（全リポジトリor特定リポジトリを選択）

2. ビルド設定

   ビルドコマンド: npx hexo generate
   公開ディレクトリ: public
   フレームワークプリセット: None
   

3. デプロイ完了

   • ビルド成功後、自動で*.pages.devドメインが割り当てられます
   • カスタムドメインの設定も可能

既存設定との統合例

# _config.yml
url: https://your-domain.pages.dev
deploy:
  type: git
  repo: git@github.com:yourname/yourrepo.git

主なメリット

✅ GitHub連動での自動ビルド
✅ 無料SSL証明書自動発行
✅ グローバルCDN配信
✅ プレビュー機能付きPRデプロイ

公式ガイド

GitHub Actions例

# .github/workflows/deploy.yml
name: Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Setup Node
      uses: actions/setup-node@v2
      with:
        node-version: '22'

    - name: Install Dependencies
      run: |
        npm install -g hexo-cli
        npm install

    - name: Deploy
      run: |
        hexo clean
        hexo deploy --generate

トラブルシューティング🚨

公式ドキュメント