【備忘録】WSLに最新のnpmをインストールして、HexoでSPAサイトを作成する環境を構築する

今回は、静的サイトジェネレータのHexoとGithubPagesを使って、無料で公開できるSPAブログを作成ために、Hexoを使用する環境をWSLで構築する方法についてまとめます。

僕は本ブログとは別に、HexoのIndigoというテーマを使って以下のリンク先のブログを運営しています。

かえるのひみつきち | セキュリティのトピックや、ブログには書けない攻撃手法や脅威をまとめるナレッジベース

このブログは静的サイトジェネレータと、GithubPagesを利用しているので、Wordpressサイトとは異なりサーバ管理費が必要ありません。
また、記事の管理もGithubで行うことができるので、エンジニアとしては非常にうれしいですね。

このHexoのブログですが、Windows10のWSLとNode.jsを使うことで簡単に環境構築からデプロイまで実行することができます。
本記事では、Hexoを使用する環境をWSLで構築する方法についてまとめます。

最新のnpmとNode.jsのインストール

まずはWSLに最新のnpmとNode.jsをインストールしていきます。

aptでインストールできるバージョンは少し古いものとなり、Hexoが動作しない場合があるので注意です。
しかし、最新版のNode.jsをインストールするために、まずはaptで古いバージョンのNode.jsとnpmをインストールします。

sudo apt install -y nodejs npm

次に、インストールしたnpmを利用してn packageをインストールします。
このn packageを使って、最新版のnpmとNode.jsをインストールすることができます。

sudo npm install n -g
sudo n stable

そんなわけで、さきほどaptでインストールしたNode.jsとnpmはもういらないので、以下のコマンドで削除してあげましょう。

sudo apt purge nodejs npm -y
sudo apt autoremove -y

無事に削除が完了したら、バージョンを確認します。
僕の環境では現時点での最新安定板であるv12.18.1がインストールされていることが確認できました。

node -v
> v12.18.1

npmを使ってHexoをインストールする

さて、無事にWSL環境に最新のnpm環境が構築できましたので、次はHexoをインストールしていきましょう。

以下のコマンドでhexo-cliをインストールします。

npm install -g hexo-cli

・・・これだけです！
と言いたいところですが、上記のコマンドを実行すると以下のようなエラーが発生します。

npm ERR! code EACCESinstalled, 20 to remove and 0 not upgraded.
npm ERR! syscall access3.4 MB disk space will be freed.
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2020-06-20T13_58_28_114Z-debug.log

上記の原因は、実行しようとしているnode_modulesの所有者がrootになっていることです。
そのため、sudoを付けて実行すれば問題なくインストールはできますが、せっかくなので一般ユーザでも実行できるように所有者を変更します。

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

上記のコマンドを実行すると、以下のように必要なモジュールに関連する所有者が一般ユーザ(ubuntu)に変更されていることが確認できます。

ls -l /usr/local
> 
drwxr-xr-x 2 ubuntu root 4096 Jun 20 22:52 bin
drwxr-xr-x 2 root root 4096 Apr 17 00:52 etc
drwxr-xr-x 2 root root 4096 Apr 17 00:52 games
drwxr-xr-x 3 root root 4096 Jun 20 22:52 include
drwxr-xr-x 4 root root 4096 Jun 20 22:54 lib
lrwxrwxrwx 1 root root 9 Apr 17 00:52 man -> share/man
drwxr-xr-x 3 root root 4096 Jun 20 22:51 n
drwxr-xr-x 2 root root 4096 Apr 17 00:52 sbin
drwxr-xr-x 7 ubuntu root 4096 Jun 20 22:52 share
drwxr-xr-x 2 root root 4096 Apr 17 00:52 src

さて、所有者が変更されたことが確認できたので、再度以下のコマンドを実行してみましょう。
今度は無事にインストールが成功するはずです。