GitHub Pages のユーザーサイトに Nuxt.js で作成したプロジェクトをデプロイする #GitHub

GitHub Pages のユーザーサイトに Nuxt.js で作成したプロジェクトをデプロイしてみたので、手順を残しておきます。

デプロイする方法として、push-dir を使ってコマンドラインから手動でデプロイする方法とTravis CI などのビルドサーバーを利用して自動的にデプロイする方法がありますが、今回は前者の push-dir を使う方法でデプロイします。

環境

macOS Mojave 10.14.6
node v12.8.0
npm 6.10.2
yarn 1.17.3
Nuxt.js v2.9.1
push-dir 0.4.1

リポジトリの作成

Github でユーザーサイト用のリポジトリを作成します。

リポジトリ名は「<ユーザー名>.github.io」
Public のリポジトリ

として作成します。

作成したらリポジトリをローカルの任意の場所にクローンします。

git clone git@github.com:<アカウント名>/<ユーザー名>.github.io.git

ブランチの作成

Github Pages のユーザーサイトは、 URLにアクセスした時に master ブランチに置かれているファイルが公開されます。

Nuxt.js で静的アプリケーションを作成すると、アプリケーションは dist フォルダ配下に作成されます。作成したアプリケーションを master ブランチにデプロイするために、master ブランチとは別に開発用のブランチを用意して作業を行うようにします。

git checkout -b develop

ここでは開発用のブランチ名は develop としていますが、任意の名前で問題ないと思います。任意の名前とした場合は以降の develop を自身で付けた任意の名前に読み替えてください。

プロジェクトの作成

develop ブランチを作成したら、Yarn または npx を使って Nuxt.js のプロジェクトの作成を行います。
ローカルにクローンしたリポジトリの一つ上の階層でコマンドを実行します。

# Yarn の場合
yarn create nuxt-app <クローンしたリポジトリのフォルダ名>

# npx の場合
npx create-nuxt-app <クローンしたリポジトリのフォルダ名>

Yarn と npx どちらを使うか

Yarn と npx のどちらを使うかは環境に合わせて決めてください。
npx は npm のバージョンが v5.2.0 以降であればバンドルされています。

Yarn をインストールする場合

macOS の場合は homebrew 経由で、 Windows の場合は Chocolatey 経由でインストールすることができます。

インストール方法については以下を確認してください。

実行確認

プロジェクトが作成されたら実行できるか確認しておくといいと思います。

# Yarn の場合
yarn dev

# npm の場合
npm run dev

push-dir のインストール

プロジェクトが作成されたら push-dir をインストールします。

npm install push-dir --save-dev

インストールしたら deploy コマンドを package.json に追加します。

package.json

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "deploy": "push-dir --dir=dist --branch=master --cleanup"
}

--branch オプションに master を指定して、デプロイ先のブランチをリモートの master ブランチにしています。

デプロイ前に確認

デプロイコマンドの実行前に以下の確認をしてください。

ローカルに master ブランチが存在しているか
存在している場合は2回目以降のデプロイ時に面倒なことになるのでローカルからは削除しておきます。
リモートに master ブランチが存在しているか
存在していない場合はコマンド実行時にエラーになる可能性があるのでブランチを作成しておきます。

デプロイ

静的アプリケーションを作成してデプロイします。

npm run generate
npm run deploy

https://<ユーザー名>.github.io にアクセスするとデプロイされていることが確認できます。

デプロイに失敗する場合

リモートに master ブランチがないと cleanup 先のブランチがないから実行できないと言われてエラーになるかもしれません。その場合は、 master ブランチを作成してから再度デプロイコマンドを実行してみてください。

2回目以降失敗する場合

ローカルに master ブランチがないか確認してみてください。デプロイしたときにローカルに master ブランチがあるとローカルとリモートのブランチの状態がずれて変になる可能性があります。その場合、デプロイコマンドを実行したときにまだローカルでコミットされた内容がプッシュされてないから cleanup できないなどと言われてエラーになると思います。その場合はローカルにある master ブランチを削除してから再度デプロイコマンドを実行してみてください。

作ったもの

リポジトリ
https://github.com/fumikoyama/fumikoyama.github.io

作成したユーザーサイト
https://fumikoyama.github.io/

参考

GitHub Pages へデプロイ - Nuxt.js
https://ja.nuxtjs.org/faq/github-pages/