Vue.js×GitHub PagesでHPを公開する

Vueで作ったHPをGitHub Pagesを用いてインターネット上に公開する

• アップテスト
• 環境
  • vue --version: @vue/cli 4.5.13
  • パッケージマネージャー: Yarn
• [注意]静的サイトしかGitHub Pagesは対応してません

公開するまで

• vue/cli2以前と、3以降でビルド時のconfigファイルの記述方法が違うので注意

公開できるようにビルドする

1. buildで使用するフォルダを変更する
   1. プロジェクトディレクトリ(以下、root)直下にdistフォルダがあれば、docsに変更する（github pagesのデフォルトがdocsのため）
   2. root直下に、vue.config.jsファイルを作成し、以下を記述 module.exports = { outputDir: 'docs', assetsDir: './', publicPath: './' }
2. buildする
   1. yarn build

GitHub側の設定

1. githubにpushする
2. GitHub Pagesに登録
   1. リポジトリの、settings => Pagesを開く
   2. Sourceの部分を、master, docsにする
3. https://ユーザー名.github.io/プロジェクト名/index.htmlでアクセスする

やりたいこと

• GitHub Pageにデータを保存できる？
  • GitHub Pageは静的コンテンツしか無理だから、Firebaseなどを使えばできる
  • GitHubをDBのようにして（？）、データを保存
    • 参考にしたい記事