VueをGithub Pagesで公開する方法

プログラミング

Vueでポートフォリオサイトを作ったのですが、公開するまでにとても苦労したのでメモとして残しておきます。他にもっといいやり方があるのかもしれませんが、とりあえず公開できたのでオッケーとしちゃいます。

公開したもの⬇︎

portfolio

まず、確認しなくてはいけないのは公式サイトです。僕がこの方法でうまく行ったのは2019年11月10日です。Vueは更新が早くやり方が結構変わっています。Qiitaに載っている情報が古いということもあるので、ぜひ公式サイトでチェックしましょう。https://cli.vuejs.org/guide/deployment.html#pwa

やり方

1.「gh-pages」というブランチを作り、以下の作業は「gh-pages」内で行います。

2.ブランチのプロジェクトの直下(package.jsonとかがあるところです)に「vue.config.js」を作成します。

リポジトリ名というのは公開するリポジトリの名前です。例えば僕の場合は

「portfolio」なので、以下のようになります。

3.後は以下のコードを実行しましょう。

まずはビルドします。

次に変更をadd&commitします。

最後にpushします。

これでできるはずです。

以下のことは、自動で設定されてましたがページが表示されなかったら確認してみてください。

settingのページに行き、下にスクロールします。

GitHub PagesのSourceを「gh-pages branch」に設定します。

みていただいた方の参考になったのなら幸いです。

コメント

タイトルとURLをコピーしました