VueプロジェクトをGitHub Pagesに公開

GitHub Pagesは静的WEBサイトを無料公開できるサービスです。
今回、Vue CLIで作成したプロジェクトをビルドし、GitHub Pages公開するまでの手順をご紹介します。

環境

ソフト	バージョン
Vue/CLI	4.5.12
Node.js	15.3.0

GitHubのアカウントは取得していることを前提に話を進めます。

Vueプロジェクトの作成とビルド

任意のプロジェクトを作成して下さい。今回はtestとしました。プリセットの選択はお好みで。

vue create test

プロジェクトが立ち上がることを確認します。localhostにVueプロジェクトの初期画面が表示されます。

npm run serve

プロジェクト直下にvue.config.jsファイルを作成し、以下の通り記述します。

vue.config.js

module.exports = {
  outputDir: 'docs',
  publicPath: './'
}

プロジェクトをビルドすると、ファイル群がまとめられたdocsフォルダが生成されます。
なお、デフォルトのビルド先はdistフォルダですが、今回設定でdocsに変更してます。

npm run build

GitHubにレポジトリを作成

　Github上でレポジトリを作成します。レポジトリ名は任意（今回はtest）の名前を付けます。無料で公開したい場合はPublicにする必要があります。

プロジェクトをgit管理して、GitHub上に作成したレポジトリにpushします。

git init
git add -A
git commit -m "first commit"
git branch -M main
git remote add origin <リモートレポジトリＵＲＬ>
git push -u origin main

GitHub管理画面のSettingsからPagesを選びbranchはmain、folderはdocsを選んで保存します。

https://<アカウント名>.github.io/<レポジトリ名>/に公開されます。
（反映には若干の時間を要します）