Hexoとは#

Hexoは静的サイトジェネレーターと言われるサイト構築用のツール。 静的サイトはHTMLファイルをアクセスしたユーザーに対してそのまま提供して表示を行うウェブサイトとなっている。 Hexoは静的サイトジェネレーターなので、予めMarkdownという特定の形式でサイトの本文を作成後、HTMLファイルを生成してユーザーに提供するという方式をとる。

対照に動的サイトは、ユーザーのリクエストに応じてリアルタイムで生成されるサイトとなっている。 こちらはHTML以外にもPHP等のバックエンドで動作するプログラム言語も用いて構成されている（といってもWordPressの場合ほぼ意識せずに構成可能ではある）。

正直個人のブログ程度であれば、アクセスするユーザーと対話が必要なケースは皆無の為、Hexoで構築を行おうと思いこれを気にブログ運営を始めようと思った次第。

また静的サイトであればGithubPagesやNetlifyがあり、前者では公開リポジトリの場合、後者では一定リソースまでは無料でホスティングが可能な為非常に安価にブログが公開出来る。 WordPressの場合、自力で構築する場合はかなり前提知識を学ぶ必要性があったり、レンタルサーバーの機能を用いて運用する場合別途費用がかかったりしてしまい高額になりがちの為スモールスタートには向いていない印象がかなり強い。

構築手順#

今回は以下の環境で構築を行っています。

• macOS Sonoma 14.2.1
• nvs 1.7.1
• Node.js 21.6.2

[公式サイト]([text](https://hexo.io/index.html))の情報が最も分かり易いが日本語は提供されていない為、ホームページ表示までの手順を記載します。

nvsの導入#

macOSではHomebrewやnodebrew等複数のNode.js導入手段が存在しますが、今回は公式が推奨しているnvs(Node Version Switcher)を使用します。

macOSでターミナルアプリを開き以下のコマンドを順番に実行します。

export NVS_HOME="$HOME/.nvs"
git clone https://github.com/jasongin/nvs "$NVS_HOME"
. "$NVS_HOME/nvs.sh" install

gitに関しては導入されていない場合、XCodeCommandLinetoolを導入すると自動で追加される為以下のコマンドで利用出来るようになります。（Python3系も入ります）

xcode-select --install

nvsインストール後以下のコマンドでNode.jsの選択画面が出ます。

nvs

複数項目が表示されますが、14.0.0以上であれば一応問題ありません（パフォーマンス的には最新番を入れるのばおすすめ、定期的な更新が面倒な場合はサポートが長いLTSをおすすめします。これ以降定期的にNode.jsのサポートや不具合情報を見る癖を付けると良いです）。 選択すると自動的に対象のNode.jsがインストールされ使用可能になります。

コマンドのみで導入したい場合は以下の様な方法も可能です（下記は21.6.2の場合）

nvs add 21.6.2

今後Node.jsを常に使用する場合以下のコマンドを実行して固定可能です（行わない場合、ターミナル実行時にnvsコマンドから指定する必要があります）

nvs link "インストールしたバージョン"

21.6.2は以下になります。

nvs link 21.6.2

Hexoの導入#

以下のコマンドでHexo本体の導入を行います。

npm install -g hexo-cli

Hexoの際とフォルダ生成#

以下のコマンドを実行してHexoで構築するサイトのフォルダを生成します。

hexo init <フォルダ名>

例えば”blog”という名前のフォルダを作成したい場合以下の様になります。

hexo init "blog"

個人的には書類（Documents）フォルダ内に作る事をおすすめしています。 以下で書類フォルダに移動出来ます。

cd ~/Documents

無事に生成出来た場合、blogというフォルダが生成されて内部にHexoの実行用ファイルがいくつか生成されている筈です。 “blog”という名前で実行した場合、以下のコマンドでフォルダに移動出来る筈。

cd blog

サーバーの実行#

生成されたフォルダ内で以下のコマンドを実行する事でローカルサーバーが実行出来ます。

hexo server

当然生成したフォルダ内で実行しないと機能しない為気をつけてください。

問題無く実行出来た場合localhost:4000にアクセスする事で以下の様にHexoのデフォルトページを表示出来る筈です。