Vuetifyで作成したアプリケーションをGithub Pagesで公開する
はじめまして!
むげこです。
今回は、Vuetifyで作成したアプリケーションを
Github Pagesを通して、公開する方法を伝授します。
できる限り難しい言葉は使いません。
本来の意味とは異なる表現もあるかもしれませんが、
「わかりやすい」をモットーに記載しています。
キーワード:
Vue.js, Vuetify, Github, Github Pages, 公開
主な流れ
Githubに新しいリポジトリ(保存場所)を作成する
ローカル(自分のPC)とリモート(Github)とを連携させる
Vue.jsの新しいプロジェクトを作成する
必要な設定ファイルを作成する
SSH接続に必要な鍵を作成する
デプロイを実行(アプリを公開)する
Vuetifyを導入して、ファイルの変更をさらに実装する
1. Githubに新しいリポジトリ(保存場所)を作成する
https://github.co.jp/にアクセスする
サインイン(ログイン)する
*サインアップから無料で新規登録できますプロフィールからリポジトリを開く
![](https://assets.st-note.com/img/1677735493017-5MW6r9NBoU.png?width=1200)
![](https://assets.st-note.com/img/1677735481247-HSaDoa8pgl.png)
リポジトリを作成する
![](https://assets.st-note.com/img/1677735698150-jvetSWhZtQ.png?width=1200)
![](https://assets.st-note.com/img/1677735791707-sKZiwQRJRc.png?width=1200)
2. ローカル(自分のPC)とリモート(Github)とを連携させる
SSHに切り替えて、このレポジトリのURLをコピーしておく
![](https://assets.st-note.com/img/1677735901992-vniBo0KCY8.png?width=1200)
Visual Studio Codeを開いて、フォルダーを指定する
![](https://assets.st-note.com/img/1677736329946-BhSp40rkx9.png)
新しいターミナルを開く
![](https://assets.st-note.com/img/1677736403378-sMxQf4xCt7.png?width=1200)
![](https://assets.st-note.com/img/1677736563288-MjnlQJofd9.png)
先程コピーしておいた、レポジトリのURLを使ってコマンドを実行する
$ git clone git@github.com:sasao037/test.git
![](https://assets.st-note.com/img/1677736822197-Mg9oKJhf9c.png)
3. Vue.jsの新しいプロジェクトを作成する
ディレクトリを移動する
$ cd test
npmがインストールされているかを確認する
$ npm ls -g
![](https://assets.st-note.com/img/1677737204482-J5S3YIVRLv.png)
新しいプロジェクトを作成する
$ vue create test
![](https://assets.st-note.com/img/1677737445250-9r0ftN2suF.png)
今回は、マニュアルで設定します。
![](https://assets.st-note.com/img/1677737581208-TMJLuJe5Z9.png?width=1200)
![](https://assets.st-note.com/img/1677737667908-yMzppWTY79.png)
4. 必要な設定ファイルを作成する
ここから先は
1,353字
/
15画像
¥ 300
この記事が気に入ったらチップで応援してみませんか?