Edited at

Nuxt.jsで作ったWebサイトをささっとGithub Pagesに公開する


設定系


gitignoreからビルド先フォルダを外す

dist/などが登録されている事が多いので、先に外しておきましょう。

dist配下をpushすることができないとGithub Pagesでは公開できません。

ビルドフォルダはpushしないしgh-pagesに配下のみを全てpushするのでもしかしたらいらないかも


nuxt.config.jsを編集


faviconのパスにリポジトリ名を記述

  head: {

title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/リポジトリ名/favicon.ico' }
]
},


routerのbaseにリポジトリ名を記述

  router: {

base: '/リポジトリ名/'
}

ここを編集するとlocalhostで立ち上げて見るときのパスも変わってしまうので注意です。

localhost:3000/リポジトリ名 になるはず

また、static配下のパスにbaseのurlを付けていないとエラーが出て参照できなくなってしまうので地味に注意です。


ビルド、デプロイ手順


ビルドコマンド実行

何も変えていなければnpm scriptsにgenerateが登録されているので、それを使います。

npm run generate

or
yarn generate


ビルド先フォルダのみをgh-pagesブランチに切り離してリポジトリにpushする

何度も叩くのであればこのコマンドもnpm scriptsに登録してもいいかもしれません。

git subtree push --prefix dist/ origin gh-pages


参考リンク

GitHub Pages へデプロイ - Nuxt.js

Github pages に 特定のディレクトリだけデプロイする - Qiita

tmp: Nuxt.js を GitHub Pages で使う