kz’s blog

興味のあることについて書いていきます。

Vue UI で作成した静的ファイルを GitHub Pages に公開する

簡単にできると思ったけど意外と手こずったのでやったことをまとめておきます。

前準備

GitHub Pages で公開できるように GitHub 側の設定を済ませておいて下さい。

公開するページの情報

Git リポジトリプッシュ先

リポジトリルート/sample/user-manager/

URL (GitHub Pages)

上記プッシュ先より、公開するページの URL は以下になります。

https://kz62123.github.io/sample/user-manager/docs/

Vue UI の設定

Vue CLI の設定

Vue UI 管理画面 > 設定 > Vue CLI > 一般的な設定

ベース URL

静的ファイルを公開する URL のドメイン以降を記載します。 よって今回設定する値は以下になります。

/sample/user-manager/docs/

出力ディレクトリ

公開する URL の最後の部分になります。

docs

ビルドの設定

Vue UI 管理画面 > タスク > build > 設定(歯車のマーク)

出力ディレクトリ

ここも一応docs と設定しておきます。

公開する

ここまでの設定ができたらあとは Vue UI からビルドして Git にプッシュすれば公開できます。

・・・・はずでしたが、公開 URL にアクセスしても画面には何も表示されませんでした。

一応タイトル(Chrome とかのタブに出てくる文字列)はしっかりと変わっていたので GitHub Pages は正しく設定できている。

小一時間色々試してみて、ふと画面をリロードしたら、なんとちゃんとできていました!

いやー、はまったハマった。

GitHub Pages 内部がどのようになっているかはわかりませんが、検証してみた結果、プッシュしてから1分程経過すると画面が表示されるようでした。

自分は少々ハマりましたが、Vue UI と GitHub Pages を使うことで簡単に静的ファイルを公開できるので皆さんも是非お試し下さい。