ゆうき（ @BASEBALLY15 )です^^
HTMLやCSSの勉強をしていて，ポートフォリオを公開したいと思ったことはないですか？
そのことについて悩んでいました・・・
『Firebase』を使うと，サーバーやドメインを自分で用意せずに，無料でポートフォリオを公開することが出来ます！
今回は，『Firebase』の使い方をご紹介します！
お願いします！！
（※目次の項目が多いので，『非表示』をクリックしてから記事を見ることをオススメします．）
目次
Firebaseとは？
Googleが提供している，アプリ開発における「バックエンド環境」を提供するサービス．
（※バックエンド・・・ユーザーには見えない，アプリの裏側の動作）
引用元：Udemy
Firebaseを使うことで，サーバーやドメインを自分で借りる必要がないので，無料で自作のホームページなどを公開することが出来ます．
WordPressを使うと，サーバーとドメイン代で月々に1000円ほどかかるので，金銭的にネックです．
また，その他の無料のサイト（はてなブログなど）は広告が貼られているので，デザイン的にネックです．
『Firebase』は，それらのことを気にする必要がないので，ポートフォリオを作成したいときなどに便利です^^
以下，『Firebase』の設定方法や使い方についてご紹介します！
Firebaseの設定方法を説明するよ！
この記事では，Windowsを使って『Firebase』についてご紹介します．
Node.jsをダウンロードしよう（準備）
まず，『Firebase』を使うために，Node.jsをダウンロードする必要があります．
FirebaseはNode.jsを使って様々な操作を行います．
推奨版をダウンロードするといいです！
それでは，Firebaseの設定方法をご紹介していきます．
1. 『Firebase』と検索
『使ってみる』をクリックし，『プロジェクトを作成』をクリックします．
2. プロジェクト名を決めます．
今回は，『MyPortfolioProject』という名前で登録します．
（※プロジェクト名は何でもOKです．）
そして，『続行』をクリックします．
3. Googleアナリティクスを有効にするかどうかを選択します．
3.1. 有効にしておくことで，ホームページにどれくらいの人が見に来てくれているのかを確認することが出来ます．
今回は，有効にする方法を紹介します．
赤枠で囲った『このプロジェクトでGoogleアナリティクスを有効にする』を有効にして，『続行』をクリックします．
3.2. アカウントを作成します．
『新しいアカウントを作成』を選択します．
そして，アカウント名を決めて，『保存』をクリックします．
今回は，プロジェクト名と同じ（MyPortfolioProject）にしておきます．
アカウント名が決まったら，Googleアナリティクスの構成を決めます．
下の画像にある通り，地域を『日本』として，3か所にチェックをします．
そして，『アカウントを作成』をクリックします．
以上で，Googleアナリティクスとの連携は出来たので，『続行』をクリックします．
4. 『Hosting』を選択します．
4.1. 左のサイドバーにある『Hosting』を選択し，次に『始める』をクリックします．
4.2. パソコンのキーボードのWindowsボタンをクリックし『PowerShell』を検索します．
このようにPowerShell（左）が開くので，Firebase Hostingの設定（右）の赤枠で囲ったコマンドをコピーして実行し，『次へ』をクリックします．
4.3. ディレクトリを作成します．
Cドライブ内に作成しておくことをオススメします．
デスクトップ名も，プロジェクト名と同じにしておきます．
（※デスクトップやドキュメントに保存すると，上手くいかないことがあります．）
そして，公開したいHTMLファイルとCSSファイルをさきほど作成したディレクトリ内に移動させます．
4.4. PowerShell内でチェンジディレクトリを行う
PowerShell内に『cd c://先ほど作成したディレクトリ名』と書きます．
（※cdとc:/の間は空白が必要です．）
4.5. プロジェクトの初期化
赤枠で囲ったコマンドをPowerShellに貼り付けます．
すると，下の画像のように表示されます．
（※画像を自分で用意していなかったので，他のサイトの画像を引用させて頂きました．）
カーソルを移動して『Hosting: Configure and deploy Firebase Hosting sites』を選択し，スペースキーを押してからEnterキーを押します．
4.6. デプロイを行います．
MyPortfolioProjectディレクトリに『public』というディレクトリが新たに作成されているので，その中に，公開したいHTMLファイルとCSSファイルを移動します．
そして，Firebaseのサイトへ行き『Firebase Hosting へのデプロイ』内の最後のコマンドをPowerShellに張り付けると完成です！！
下の画像の様に，ドメインが表示されていたらOKです^^
Firebaseでホームページを公開しよう！
本当にホームページが公開されているのかを確認したいと思います．
先ほどのドメインをクリックすると，このようにホームページが表示されました^^
やった～！！成功！！
（※今回公開したホームページは簡易的なものになっています．）
ホームページを作る際に参考にした書籍⤵
再デプロイを行いたい場合
HTMLやCSSのコードを書き直した際に，もう一度デプロイを行いたい時は，PowerShellを開いて，
cd c://MyPortfolioProjectと書いて，チェンジディレクトリを行い，
firebase deployと書くことで，再デプロイを行うことが出来ます．
ちなみに，
firebase serveと書くことで，公開せずにローカルで確認することが出来ます．
終わりに
今回は『Firebase』の設定方法と使い方についてご紹介しました．
このツールを使うことで，自身のポートフォリオを公開することが出来るので，ホームページの勉強をされている方は是非使ってみて下さい^^
それでは・・・