準備段階

• GitHubアカウントの登録：https://www.github.com
• Cloudflareアカウントの登録：https://www.cloudflare.com
• Gitのダウンロード：https://git-scm.com/download
• Node.jsのダウンロード：https://nodejs.org/ja

Hexo設定

1. Hexo CLIのインストール

Hexo CLIツールをグローバルにインストールします

npm install -g hexo-cli

2. Hexoプロジェクトの作成

# Hexoをインストールしたいディレクトリに移動します。ここではDドライブにインストールします。
cd d:/
# ディレクトリでhexoを初期化し、blogフォルダを作成します。blogは任意の名前に変更可能です。
hexo init myblog

3. テーマのインストール

3.1 リモートテーマのインストール

.gitmodulesファイルを作成し、以下のコードをコピーして適宜修正します。リモートテーマは直接編集できないため、必要に応じてテーマリポジトリをForkして自身のGitHubにコピーしてください。

[submodule "themes/landscape"]
    path = themes/landscape
    url = https://github.com/hexojs/hexo-theme-landscape.git

3.2 ローカルテーマのインストール

ローカルでのデバッグ用

# blogフォルダに移動します。
cd myblog
# テーマをthemesディレクトリにインストールします。
git clone https://github.com/hexojs/hexo-theme-landscape.git themes/landscape
# 必要なプラグインをインストール
npm install hexo-renderer-marked --save
npm install hexo-renderer-stylus --save
# RSS機能を有効に
npm install hexo-generator-feed --save

3.3 npm依存関係のインストール

一部のテーマはnpmパッケージに依存します。

npm install

3.4 _config.ymlの修正

任意のエディタでhexoルートディレクトリにある_config.ymlファイルを編集します。以下のような形式になります：

# サイト情報
title: 私のブログ # タイトル
subtitle: 'ブログのサブタイトル' # サブタイトル
description: 'ブログの説明文' # 説明
keywords: # キーワード
author: 佐藤太郎 # 著者名
language: ja # 言語設定
timezone: ''

テーマを有効にするため、_config.yml内のtheme:をテーマフォルダ名に置き換えます。

# 拡張機能
## プラグイン: https://hexo.io/plugins/
## テーマ: https://hexo.io/themes/
theme: landscape

3.5 .gitignoreファイルの編集

hexoルートディレクトリの.gitignoreファイルを編集し、public/を除外します。以下は参考です。

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
.deploy*/
_multiconfig.yml
public/

4. 記事の作成

hexo new post "記事のタイトル"

5. カテゴリページの作成

# categoriesはカテゴリ名
hexo new page categories

6. 記事へのカテゴリとタグの追加

title: 私の最初の記事
date: 2024-07-12 10:00:00
# カテゴリ
categories:
  - カテゴリA
  - カテゴリB
# タグ
tags:
  - タグX
  - タグY

7. 生成とプレビュー

設定完了後、ローカルでプレビューを有効にします

# キャッシュのクリーンアップ
hexo clean
# 静的ファイルの生成
hexo generate
# サービスの起動
hexo server

ブラウザで表示されるアドレスにアクセスします。

# デバッグ用アドレス
localhost:4000
# デバッグサービスの停止
ctrl+c

GitHub設定

1. SSHキーペアの生成

SSHキーペアがない場合は、以下のコマンドで生成します：

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

生成された公開キーの内容をコピーします：

cat ~/.ssh/id_rsa.pub

GitHubにログインし、Settings → SSH and GPG keys → New SSH keyに公開キーを貼り付けて保存します。

2. Gitユーザー名とメールの設定

ローカルリポジトリディレクトリで、Gitユーザー名とメールを設定します：

git config --global user.name "あなたの名前"
git config --global user.email "your_email@example.com"

GitHubでメールが非公開設定になっている場合は、事前に解除するかGitHubが提供するプライバシー保護されたメールアドレスに変更してください。解除方法：Settings → Emails → Keep my email addresses privateのチェックを外します。

3. GitHubへのプッシュ

HexoプロジェクトをGitHubリポジトリにプッシュします

git status
git init
git add README.md
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin git@github.com:/yourusername/your-repo.git
git push -u origin main

4. 行末文字の自動処理

warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches itという警告が表示された場合は、以下のコマンドを実行します。この問題は通常git add .実行後に表示されます。

git config --global core.autocrlf true

Cloudflare Pages設定

1. CloudflareでのHexoデプロイ

Cloudflareにログインし、言語を日本語に切り替えます。次にWorkers & Pagesに移動し、PagesでGitHubリポジトリを接続します。以下が主な手順です：
プロジェクト名：任意ここでは分かりやすい名前を付けます。
フレームワークプリセット：なし
ビルドコマンド：npm run build
出力ディレクトリ：public
最後にデプロイを開始をクリックします
Cloudflareのビルドが完了すると、ランダムなCloudflare提供のドメインが割り当てられます。後で独自ドメインをバインドできます。デプロイが完了したら、Cloudflareが自動的に割り当てたドメインを開いて、正しくインストールされているか確認します。
ドメインはexample-xyz.pages.devのような形式になります。