Vuetifyで作成したアプリケーションをGithub Pagesで公開する

はじめまして！
むげこです。

今回は、Vuetifyで作成したアプリケーションを
Github Pagesを通して、公開する方法を伝授します。

できる限り難しい言葉は使いません。
本来の意味とは異なる表現もあるかもしれませんが、
「わかりやすい」をモットーに記載しています。

キーワード：
Vue.js, Vuetify, Github, Github Pages, 公開

主な流れ

1. Githubに新しいリポジトリ（保存場所）を作成する

2. ローカル（自分のPC）とリモート（Github）とを連携させる

3. Vue.jsの新しいプロジェクトを作成する

4. 必要な設定ファイルを作成する

5. SSH接続に必要な鍵を作成する

6. デプロイを実行（アプリを公開）する

7. Vuetifyを導入して、ファイルの変更をさらに実装する

1. Githubに新しいリポジトリ（保存場所）を作成する

• https://github.co.jp/にアクセスする

• サインイン（ログイン）する
  ＊サインアップから無料で新規登録できます

• プロフィールからリポジトリを開く

右端のアイコンをクリック

Your repositoriesを選択

• リポジトリを作成する

右端のNewボタンを押す

Repository nameに名前を入力して、Create repositoryボタンを押す

2. ローカル（自分のPC）とリモート（Github）とを連携させる

• SSHに切り替えて、このレポジトリのURLをコピーしておく

HTTPSになっている人は、SSHを押して変更する

• Visual Studio Codeを開いて、フォルダーを指定する

• 新しいターミナルを開く

ターミナルから、新しいターミナルを開くを選択

この画面が表示されればOK！

• 先程コピーしておいた、レポジトリのURLを使ってコマンドを実行する

$ git clone git@github.com:sasao037/test.git

これで完了！

3. Vue.jsの新しいプロジェクトを作成する

• ディレクトリを移動する

$ cd test

• npmがインストールされているかを確認する

$ npm ls -g

表示されない場合は、npm installでインストールしましょう

• 新しいプロジェクトを作成する 

$ vue create test

必要に応じて設定してください。
今回は、マニュアルで設定します。

こちらを参考にしてみてください。

これが表示されていれば成功です！

4. 必要な設定ファイルを作成する