GitHub

HTML/CSS/JavaScript デプロイして公開!GitHub & Firebase Hosting

前置き

フレームワーク未使用のファイル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が表示され、
実際に見てみると
きちんと反映されています🙌✨


まとめ

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

-GitHub
-,

© 2021 aLiz Nuxt