yuheijotaki.com

Vue CLI(Webpack) を使ったプロジェクトを GitHub Pages で公開する

f:id:jotaki:20190315114020p:plain

主に Vue で作成した Web アプリを GitHub Pages で公開 - 山崎屋の技術メモ を参考にさせてもらいました。

テストサイト:
https://yuheijotaki.github.io/github-pages-test_20190315/#/

リポジトリ作成

リポジトリを GitHub から作成します。特に変わったことはせずにOK。

どのファイルを見るかのソース設定で

  • master ブランチを表示上のルート階層にする
  • /docs/ フォルダを見るようにする

が設定できる。今回は /docs/ にするがフォルダ作ってから出ないと選択できないのでのちほど設定する。

Vue CLI のインストール

リポジトリをクローンして Vue CLI をインストールする。これもインストールは特に変わったことはせずにOK。

/config/index.js の調整

インストール後、/config/index.js の下記箇所を変更する。
(ビルドファイルのパスを 絶対パス => 相対パス指定 にするため)

...
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../docs/index.html'), // `dist` => `docs` へ変更

    // Paths
    assetsRoot: path.resolve(__dirname, '../docs'), // `dist` => `docs` へ変更
    assetsSubDirectory: 'static',
    assetsPublicPath: './', // `/` => `./` へ変更(ピリオドを追加)
...

vue.config.js を新規作成する必要があるという記事もあったのですが、自分の場合は作成せずにできちゃいました。
/dist/ をビルドの出力フォルダのままにする場合は、.gitignore の除外を解除しておく。

ビルド

$ npm run build

/docs/ フォルダに静的ファイルが格納されているか確認。

master へプッシュ

master ブランチにプッシュする。

オプション変更とページ確認

GitHub の GitHub Pages 設定を変更、確認する。

ソース設定変更

リポジトリ内の Settings => Options => GitHub Pages => Sourcemaster branch /docs folder にしておく。

ページ確認

Your site is published at <https://yuheijotaki.github.io/github-pages-test_20190315/> みたいなURLがおいてあるのでURLを確認する。

おわりに

比較的簡単に公開URLつくれてデプロイできるので次の勉強リポジトリからこれを使おうと思います。
Vue Router も path は相対パスにしないとダメそうなど、少し懸念点もあり。

pages.github.com