6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-05

設定系

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 で使う

6
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?