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/<レポジトリ名>/に公開されます。
（反映には若干の時間を要します）
