1. okada3333

    Posted

    okada3333
Changes in title
+Vue CLIプロジェクトをGitHub Pagesで公開する方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,37 @@
+GitHub Pagesは、[gh-pages](https://github.com/tschaub/gh-pages)を使うと自動で楽ですが、使わなくてもできます。
+
+# GitHub Pagesを設定する
+
+Githubで設定します。
+
+``https://github.com/[アカウント名]/[リポジトリ名]/settings`` のGitHub Pagesにある設定を変えます。
+``Danger Zone``の上辺りにあります。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/15e9aa62-a6c3-47dd-1191-bd064ec9721c.png)
+``main``ブランチの``docs``を選択して、「Save」ボタンを押します。
+
+# Vueプロジェクトのbuild先をdocsディレクトリにする
+
+Vue CLIで作成したプロジェクトのルートに``vue.config.js``を作成して、以下のようにします。
+
+```
+module.exports = {
+ outputDir: 'docs',
+ publicPath: './'
+}
+```
+
+# Vueプロジェクトをbuildしてリモートへpush
+
+``vue.config.js``を保存したら、ローカルでbuildします。
+
+```
+$ npm run build
+```
+
+``build``ディレクトリにファイルが書き出されるので、ファイルをコミット&mainブランチへpushします。
+
+リモートリポジトリに反映されると、``https://[アカウント名].github.io/[リポジトリ名]/``で開けるようになります。
+
+私の場合は、↓です。
+https://okadamari.github.io/chat/