Nuxt.jsで作成した静的サイトをGitHub Pagesにデプロイする方法

この記事について

Nuxt.jsで作った静的サイトを、GitHub Pagesで公開する方法を調べたので自分なりに後で、見返せるようにまとめてみました。

参考記事はページ下部にリンクを添付させて頂きます。より詳しい内容は、そちらをご確認お願い致します。

前置き①（今回やる内容）

Nuxt.jsで作った静的サイトをGitHub Pagesで公開する。

前置き②（前提条件）

今回の、記事を通してサイトを公開するにあたって前提の条件があります。

1. Nuxt.jsを用いて静的サイトを作成したことがある。
2. 上記で作成したサイトをGitHub上で開発管理している。

サイト公開までの流れ

前提条件を満たした上で、下記より公開までの手順を解説します。

手順①push-dirのインストール

作成したNuxtプロジェクトにターミナルでpush-dirをインストールします。

npm install push-dir --D

手順②デプロイコマンドの設定

インストールが完了した後、package.json内でdeployコマンドを追記します。

package.json

"scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"//記述追加部分
},

--branch=gh-pagesの部分で、デプロイ先のブランチを指定しています。

今回は、Nuxtで生成したdistファイルのみをデプロイしたいので、masterブランチではなくgh-pages¹という名前のブランチを指定しております。指定したブランチが現在無くても、コマンド実行時に自動的に作成されますので事前に用意しなくても大丈夫です。

手順③ファイルパスの修正

デプロイ先でもパスを正しく反映させるため、nuxt.config.jsのfaviconとbaseのパスを修正します。

nuxt.config.js

head: {
        title: 'Nuxt-sample',
        
        〜〜〜〜〜中略〜〜〜〜〜

        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/<リポジトリ名>/favicon.ico' },//fabiconはここ
        ]
},

〜〜〜〜〜中略〜〜〜〜〜

router: {
        base: '/<リポジトリ名>/'//baseはここ
}

上記２箇所の、<リポジトリ名>の所に自分が開発管理しているGitHubのリポジトリの名前を入れます。
ここまで作業を終えたら、変更をmasterブランチにコミットプッシュします。

手順④静的ファイルを作成し、GitHubにデプロイする。

Nuxtで静的ファイルを生成するため、ターミナルにて下記コマンドを入力します。

npm run generate

generateが完了したら、プロジェクトファイルにdistファイルが生成されます。
続けて、生成されたdistファイルをデプロイするため下記コマンドを実行します。

npm run deploy

上記コマンドを実行後、package.json内のdeployコマンドで指定したブランチが自動で作成されて、そこにdistファイルのみがコミットプッシュされます。

これにより、いちいちブランチを切り替えて作業する必要がないので、非常に作業が楽になります。

最後に、https://<ユーザー名>.github.io/<リポジトリ名>/でURLを叩いて、無事表示されれば公開完了です。

ここまで、お付き合い頂き有難うございました。
Nuxtで静的サイトの公開を検討されている方は、是非、GitHub Pagesを利用してみてください。
無料で比較的簡単に出来ますので、オススメです！

参考サイト

1. ブランチ名は任意。 ↩