Nuxt.jsで静的サイトを作り、Github Pagesにデプロイする

Nuxt.jsで静的サイト実装

Nuxt.jsでプロジェクトを立ち上げる

npx create-nuxt-app my-project

設定を適宜行い、ページを実装する。

GitHubPagesに適したパスの設定

nuxt.config.js

  router: {
    base: "/{リポジトリ名}/",
  },

GitHub Pagesがホストする静的サイトの正しいルーティングを行うために必要。

静的ファイルの出力先の設定

nuxt.config.js

generate: {
  dir: 'docs'
}

nuxt generateを行って生成される静的ファイルの出力先を設定する。
GitHubPagesではブランチのrootかdocsを指定することができるのでdocsとする。

docsディレクトリ生成

npm run generateを実行するとroot配下にdocsディレクトリができ、その中にindex.htmlなど静的ファイルが生成される。

GitHubからサイトの確認

作成したリモートリポジトリに実装した内容をプッシュしたあと、
Settings→PagesからBranch項目のmasterのdocsを選択する。
gh-pagesというブランチを作ってそっちでrootかdocsを選択しても良い。
今回はmasterブランチのままdocsというディレクトリを作って静的ファイルをそこに入れたためその指定とする。

Your site is live at サイト名 と上に表示されるので、そこからアクセスして表示確認。