Vuetify.jsを使って作ったwebページをGitHubPagesで公開する機会があったので、環境構築の経緯を備忘録がてら残しておきます。

この記事ではデプロイすることに重きを置いているため、webページの中身には触れません。
私の見た限りでは、vue-cli3系についてビルドの仕方を詳しく書いてある記事が存在しなかった(2系は多くの記事に巡り会えました)ため、vuetifyを使わないという方でも参考になるかと思います。

nodebrewのインストールから書いているので、要らないところは目次を利用してスキップして下さい。

$ brew install nodebrew

$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew
========================================
Export a path to nodebrew:

# ↓これをコピぺ
export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
# 自分のターミナルに表示された上のやつコピペしてパス通す
$ export PATH=$HOME/.nodebrew/current/bin:$PATH

# 保存
$ source ~/.bash_profile

ターミナル

# とりあえず安定版を入れておく
$ nodebrew install-binary stable

# 使用設定
$ nodebrew use stable

# npmをアップデート
$ npm update -g npm

これでnpmが使えるようになりました。

2. vue-cli のインストール

さっき入れたnodebrewのおかげでvue-cliがインストールできます！

ターミナル

$ npm install -g @vue/cli

プロジェクトの作成をします。プロジェクト名はなんでも良いですが、ケバブケース(大文字アンダーバー無しでハイフンあり)で作成しましょう。

ターミナル

$ vue create project-x

設定を色々聞かれますので、適宜設定してください。サンプルページや小規模なページであればEnter連打で問題ないかと思われます。

設定が完了したら、プロジェクトが作成されます。中に入って、サーバーを起動してみましょう。

ターミナル

$ cd project-x
$ npm run serve
App running at:
  - Local:   http://localhost:8080
  - Network: http://hogehoge:8080

ブラウザでhttp://localhost:8080にアクセスするとサンプルが表示されます。

なんか出ましたね。

3. vuetifyのインストール

このままvuetifyもインストールしちゃいましょう。

ターミナル

$ vue add vuetify

サーバを起動します.

ターミナル

$ npm run serve
App running at:
  - Local:   http://localhost:8080
  - Network: http://hogehoge:8080

ブラウザでhttp://localhost:8080にアクセスして、先ほどとページが変化しているのを確認しましょう。

なんか青くなりましたね。

4. ビルドする

いよいよビルドです。ビルドのコマンドは$ npm run build です。
コマンドを実行するとdistという名前のフォルダが作成され、その中に入っているindex.htmlが本体です。
しかし、ブラウザで開いてみると真っ白なページが表示されるだけでサンプルの姿はどこにもありません。
これはvue.jsがビルドする際にデフォルトでjsとcssを絶対パスで取得するようにdistを作成してしまうことが原因です。ビルドする際の設定は、vue.config.jsという名前のファイルをプロジェクト直下に作成し、そこを編集することで変更できます。
ということで、相対パスに変更しちゃいましょう。

ターミナル

$ touch vue.config.js
$ vim vue.config.js

vue.config.jsに下の4行を追加します。

vue.config.js

module.exports = {
  publicPath: "./",
  assetsDir: ""
}

※vue.config.jsをプロジェクト直下に作成し、上記の4行を追加すれば良いので勿論方法は自由です。

変更できたらビルドしましょう。

ターミナル

$ npm run build

サンプルページが表示されていれば成功です！

5. GitHub Pagesで公開

この記事ではCreate a new repositoryからPublicなリポジトリを作成する所まで割愛します。
GitHubのアカウント作成などのチュートリアルは優良な記事が大量に転がっているのでそちらを参考にしていただければ幸いです。

現状、.gitignore(隠しファイル)にdistが登録されているので、それを削除します。(Finderの場合、cmd+shift+. で隠しファイルの表示/非表示が設定できます。)

ターミナル

$ vim .gitignore

.gitignore

.DS_Store
node_modules
/dist <------- これを削除

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

あとはクローンしてきて、クローンしたフォルダにプロジェクトの中身を全部入れます。(入れるのはdistだけでも表示できます。)

ターミナル

$ git clone https://github.com/アカウント名/リポジトリ名.git

あとはpushして準備完了。

ターミナル

$ git add -A
$ git commit -m "コメント"
$ git push origin master

githubリポジトリのSettingsから

SourceをNoneからmaster branchに変更して完成です。

https://ユーザ名.github.io/リポジトリ名/dist/index.html にアクセスして、無事ページが表示されればOKです！

最後に

vue-cli2系のconfig/index.jsと異なり、vue.config.jsは自分で作らなくてはならないことに気がつかず、気が狂うほどの時間を浪費してしまいました。公式リファレンスを熟読すれば一瞬でしたね...
余談にはなりますが、Vuetifyの公式リファレンスは英語で見ることを強く推奨します。公式に日本語訳もありますが、なぜか情報の多くが欠落しています。日本語訳を見ている人は無駄なところで沼にハマるので大人しく英語を読むか、英語ページをGoogle翻訳にかけましょう。

この記事に関してですが、自分自身理解の至らぬ点が多いと感じていますので、ミスの指摘や怪しいところがあれば、コメントに書いていただければ幸いです。
ここまで読んでいただき、ありがとうございました。

Vue+Vuetifyで作成したwebページをGitHub Pagesで無料公開

目次

1. nodebrewのインストール

2. vue-cli のインストール

3. vuetifyのインストール

4. ビルドする

5. GitHub Pagesで公開

最後に