Hexoで個人ブログを作る

Hexoは、Markdownなどの記事を静的HTMLへ変換するNode.js製のブログフレームワークです。生成されたHTMLをGitHub Pagesなどへ配置できるため、サーバーを自分で管理せずにブログを公開できます。

1. よく使うコマンド

#

hexo clean
hexo generate
hexo server
hexo deploy

• hexo clean：生成済みファイルを削除する。
• hexo generateまたはhexo g：静的ページを生成する。
• hexo serverまたはhexo s：ローカルサーバーを起動する。
• hexo deployまたはhexo d：設定したデプロイ先へ公開する。

コマンドは通常、Hexoプロジェクトのルートで実行します。

2. 必要なソフトウェアをインストールする

#

Git、Node.js、npmをインストールします。Node.jsはLTS版を選ぶと安定しやすくなります。

Ubuntu/Debianの簡単な例：

sudo apt update
sudo apt install git nodejs npm

インストール後、バージョンを確認します。

git --version
node --version
npm --version

3. Hexoをインストールする

#

npm install --global hexo-cli
hexo version

プロジェクトを初期化します。

hexo init my-blog
cd my-blog
npm install

4. ディレクトリ構造

#

初期化すると、おおむね次のディレクトリが作られます。

my-blog/
├── node_modules/  依存パッケージ
├── public/        生成された静的ページ
├── scaffolds/     記事テンプレート
├── source/        記事や静的ファイル
├── themes/        テーマ
└── _config.yml    Hexoの設定

ローカルで表示します。

hexo clean
hexo generate
hexo server

ブラウザーでhttp://localhost:4000を開きます。サーバーを停止するにはCtrl+Cを押します。

5. GitHub Pages用リポジトリを作る

#

GitHubにログインし、ユーザー名と同じ名前のリポジトリへ.github.ioを付けて作成します。

たとえばユーザー名がexampleなら、リポジトリ名は次のようになります。

example.github.io

Gitの基本情報を設定します。

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

6. SSH鍵を設定する

#

ssh-keygen -t ed25519 -C "you@example.com"

公開鍵~/.ssh/id_ed25519.pubをGitHubのSSH keysへ登録します。秘密鍵は公開しないでください。

7. HexoをGitHub Pagesへデプロイする

#

デプロイプラグインをインストールします。

npm install hexo-deployer-git --save

_config.ymlへリポジトリを設定します。

deploy:
  type: git
  repo: git@github.com:example/example.github.io.git
  branch: main

その後、生成とデプロイを実行します。

hexo clean
hexo generate
hexo deploy

GitHub Pagesの設定で、対象ブランチまたはGitHub Actionsを公開元として選びます。

8. 独自ドメインを設定する

#

GitHub Pagesの設定画面でCustom domainへドメイン名を入力し、DNS側で必要なレコードを設定します。Hexoのsource/へCNAMEファイルを作る方法もあります。

blog.example.com

DNSの反映とHTTPS証明書の発行が完了したことを確認します。

9. テーマを変更する

#

Fluidなどのテーマを使う場合は、テーマの公式手順に従ってthemes/へ配置し、_config.ymlのthemeを変更します。

theme: fluid
language: ja

テーマの設定ファイルを直接編集すると更新時に変更が失われる場合があるため、テーマの推奨するoverride方法を確認してください。

10. 記事を作成する

#

hexo new "my-first-post"

生成されたsource/_posts/内のMarkdownを編集し、ローカルで確認します。

hexo clean
hexo generate
hexo server

問題がなければデプロイします。

hexo deploy

まとめ

#

Hexoでは、Node.jsで記事を生成し、public/へ出力された静的ファイルをGitHub Pagesなどへ公開します。基本の流れは、インストール → 初期化 → 記事作成 → ローカル確認 → 生成 → デプロイです。