前置き
フレームワーク未使用のファイルver.
GitHubとFirebase Hostingの
2種類の方法をお伝えします🌟
「公開の仕方が分からない」
「自分のポートフォリオを作りたい!」
「公開して就活に役立てたい!」
そんな方々に手順をお伝えします❣️👩🏫
⬇️Nuxt.jsのデプロイについてはこちら
Nuxt.jsプロジェクトをGitHubにデプロイする
【Nuxt.js】firebase基礎編:Firebase Hosting にデプロイしよう!
使い分け
・Firebase Hosting → FirebaseのDBやAuthを使用
・GitHub → それ以外
DB使ってないのに
Firebaseプロジェクトの作成は面倒ですが、
GitHubは基本的に使うことになるので…🌟
ただデプロイさえできれば
どこを使用しても良いので、
お好きな所でやってください🍀
GitHub
アカウント登録、
リポジトリ作成は割愛します🌱
リポジトリは
publicでもprivateでもOK⭕️
まぁ公開したらprivateの意味が
あまりなさそうな気もしますが。
わざわざpublicに変更…
とかがないのは良いですね。
URL設定
赤枠どおりにやればOK⭕️✨
pushは後述するdocsの配下にするので
URL設定までをやります。push
しても上手くいかない可能性がある
というだけなので、
やっても問題ないです⭕️

また、
実際には変更の保存が必要なのでcommit
の前に
状態確認とadd
しましょう。
$ git st
$ git add .
デフォルトブランチ名が
master→mainになりましたが、
コピペしないと
癖でmasterにしちゃいます笑
URLの設定をしたら
一致しているかも確認します👀
$ git remote add origin <URL>
$ git remote -v
いろんな所をすっ飛ばすと
違うURLになっている場合があります。
新しく作成したフォルダ、ファイルでも
なぜか違うところに。
fatal: remote origin already exists.
この場合はoriginを削除してから
やり直しましょう〜❗️
$ git remote rm origin
公開設定
公開の設定場所はココ🌍
Settings > GitHub Pages
push後に選択できます。
今はとりあえず公開の仕方だけ
把握しましょう。
青字のリンクを押して設定します。

Sourceの選択をします。
公開したいバージョンのブランチを選択。
今回mainを選択。

フォルダ選択では、
プロジェクトの状態によって
合うものを選択する必要があります。
/docsにしてみましょう。

問題なくできればこんな表示になります⭕️

docsが存在しないと上手く機能しません❌

docsの配下にindex.htmlを置いた状態にすればOK⭕️
この状態でpushしてください💡
docsに置かず直接index.htmlを指定する場合
/rootになりますが使い分けると分かりやすいかも🍀
個人的には
/root → Nuxtなどのフレームワーク
/docs → それ以外

Firebase Hosting
以前サラッと書いたのですが、
きちんと手順をまとめておきます✍️
Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと、気づいたこと②
プロジェクトの作成
まずはここから!
Firebase
1. 「使ってみる」を押す
ログインしていない場合はログイン
そもそもアカウントがない場合は
Googleアカウントを作成してください🌟

2. 「プロジェクトを追加」を押す

3. プロジェクト名を入力
下に表示されているsample-6a560が
プロジェクトIDになります。

4. Google アナリティクスの有無を選択
なしの場合は続行でプロジェクト完成
ありの場合は続行で次のアカウント選択

5. アカウントを選択
Default Account for Firebaseを選択

これでプロジェクトが完成🎉✨
プロジェクト概要画面へ移行します🌱

Hostingを始めると手順が出てくるので
これに沿って進めればOKです⭕️
詳細を後述するので
不明点があればご覧ください👀

Firebase CLIのインストール
Firebase CLIのインストールで
npmコマンドを使用する場合、
Node.jsが必要です。
なくてもこのコマンドでインストール可能🌟
グローバルでインストールするので
デプロイしたいフォルダに$ cd
する必要はありません。
Firebase CLI をインストールする
$ curl -sL https://firebase.tools | bash
プロジェクトの初期化

$ firebase login
エラー報告などの収集許可について聞かれます。
OKの場合はEnterキーを押します。

そうするとブラウザが開き、
アカウントを選択します。
これでログインが成功すると
この画面に切り替わります。

ターミナルでもSuccess!と出ているはずです💫
そしたら$ cd
で
デプロイしたいプロジェクトまで移動。
初期化コマンドを入力。
$ firebase init
こんな感じのが出て質問に答えていきます。

選択式のところは該当箇所があれば
矢印キーで移動し、スペースで選択するとチェックがつきます。

質問はこの順番で答えます。
プロジェクト名が分からなくなった場合は
Firebase Hosting 始めるを押して出てきた手順、
3を見ると下に書かれています。

- Hosting
- Use an existing project
- デプロイしたいFirebaseプロジェクト
- public
- y
これでfirebase.jsonなどを作成し、
準備が整います🙌✨

こんな感じになります。

publicにあるindex.htmlは
設定完了を伝える画面です。
こっちを公開しても仕方ないので、
削除して自分のindex.htmlをpublic内に入れましょう。

こうなればOK⭕️

Firebase Hosting へのデプロイ
あとはdeployするだけ❗️
$ firebase deploy
公開URLが表示され、
実際に見てみると
きちんと反映されています🙌✨

まとめ
作ったものが公開できると嬉しいですよね✨
慣れてきてフレームワークを使用する…
となったときにもディレクトリ構成が分かれば
応用が効くので見直してください🍀