Hugo Extendedをnpmを利用してインストールする

Hugo Extendedをどの環境でも同じバージョンを同じ手順でインストールするのにnpmパッケージのhugo-extendedが便利でしたので、それを利用する手順をまとめました。

hugo-extendedとは

hugo-extendedはHugo Extendedのバイナリをnpmを利用してダウンロードしてnode.js経由で実行することができるnpmパッケージです。

同じようなnpmパッケージではhugo-binがあり、hugo-extendedはhugo-binをフォークしたリポジトリです。

hugo-binではnpmパッケージのバージョンとダウンロードされるHugoのバージョンが一致していませんが、hugo-extendedではバージョンが一致しているので、より利用しやすいと思います。

hugo-extendedのインストール

nodejsやnpmがインストールされていない場合はnodejs、npmをインストールします。npm以外にもyarnやpnpmなどのパッケージマネージャがありますが、今回はnpmを利用しました。

Hugoのプロジェクトディレクトリに移動してnpmプロジェクトの初期化を行います。すでにpackage.jsonがある場合は必要ありません。

npm init

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

npm install hugo-extended --save-dev

インストール後に生成されるpackage-lock.jsonはGitの管理に含め、node_modulesディレクトリはGitの管理から除外するようにします。

それではインストールされたHugoのバージョンを確認します。

npx hugo version

Readmeにあるようにnpmパッケージのhugo-extendedのバージョンはダウンロードされるHugoのバージョンと一致します。

This package’s version numbers align with Hugo’s — [email protected] installs Hugo v0.64.1, for example.

Vercelへのデプロイ

Hugoの実行をnpmで行うようにpackage.jsonにscriptを追加します。

{
  ...
  "scripts": {
    "build": "hugo",
    "dev": "hugo server"
  }
  ...
}

デプロイの設定をvercel.jsonのinstallCommand、buildCommandに追加するか、またはvercelの管理画面から設定します。

{
  "framework": "hugo",
  "installCommand": "npm install",
  "buildCommand": "npm run build",
  "outputDirectory": "public"
}

設定を追加したらvercelにデプロイして完了です。

おわりに

Hugo Extendedをnpm経由でインストールすることで、どの環境でも同じ手順で同じバージョンのHugoを簡単にインストールすることができました。

他にも同じようにバイナリをnpm経由でダウウンロード、実行するパッケージはありそうなので別の場面でも探して利用すると便利だと思います。