【firebase】hostingサービスで超簡単にポートフォリオデプロイ。

# はじめに
ポートフォリオサイト作るの面倒だなぁ…って思って、
どうにか簡単い終わらせないか検討し、簡単にできそうなことを試してみました！

**＜やりたいこと＞**
　簡単にポートフォリオサイトを作る

**＜そのためにやったこと＞**
　・無料で提供されているポートフォリオの**テンプレート**を利用する
　・**firebaseのhostingサービス**を使ってデプロイする

本当に適当感が漂っているため、間違いなどあれば、ご指摘いただけると嬉しいです！！
# 全体の流れ
今回はこんな感じの流れです。
テンプレートの修正はしていませんが、これだけだったら瞬殺で出来ちゃうことが判明。

[ ポートフォリオのテンプレートを取得 ]
　↓
[ firebaseのプロジェクトを作成する ]
　↓
[ Hostingサービスを使ってデフォルトページをデプロイする ]
　↓
[ ポートフォリオ（テンプレート）をデプロイする ]

# 前提事項
※2019/9/23時点での手順です。移り変わり早そうなので賞味期限も早そう…※

**Googleアカウント**
Googleアカウント取得済みの体で話を進めます。未取得の場合は、事前にご準備をお願いします。

**費用について**
今回利用するfirebaseは従量課金制の料金体系をとっています。
ですが、以下の条件を満たしていれば、Hostingサービスを無料枠内で利用することが出来ます。

【Sparkプラン(無料)】

|項目|制限|
|:----|:---|
|GB保存済み|総保存容量が1GB以内|
|GB転送済み|ダウンロード容量が1GB/月以内|
出典：[料金プラン](https://firebase.google.com/pricing/?hl=ja)

# 手順の説明
さぁ、ちゃきちゃきちゃきです。

##ポートフォリオのテンプレートを取得
色々と無料のテンプレートサイトがありますが、今回は**未経験からWebデザイナー**さまのテンプレートを利用させていただきました。
下記のサイトにある[ダウンロード]リンクからzipファイルをダウンロードし、解凍しておいてください。

**【未経験からWebデザイナー:無料テンプレート】**
　・[ベーシック](https://webdesigner-go.com/template/portfolio-02/)
　・[ガーリー](https://webdesigner-go.com/template/portfolio/)

出典:[未経験からWebデザイナー](https://webdesigner-go.com/)

##firebaseにプロジェクトを作成する
###①Firebaseをはじめる
[firebase](https://console.firebase.google.com/)サイトを開き[使ってみる]を選択してください。この時、googleアカウントへのログインを求められるので、ログインしてください。
[![Image from Gyazo](https://i.gyazo.com/9a8d51854fbc83f71ba6cd52d2eefba6.png)](https://gyazo.com/9a8d51854fbc83f71ba6cd52d2eefba6)

###②プロジェクトを作成を開始する
初回ログイン時は、既存のプロジェクトなどが何もないので下図のような画面が表示されます。
[プロジェクトを作成]を選択して、早速プロジェクトを作成してみましょう。
[![Image from Gyazo](https://i.gyazo.com/e4f0ad0d6b7a73cd61430a533651d7ef.png)](https://gyazo.com/e4f0ad0d6b7a73cd61430a533651d7ef)

###③プロジェクト名を決める(1/3)
任意のプロジェクト名を指定して[続行]を選択してください。
ここで指定したプロジェクト名がデプロイしたサイトのURLの一部になります。
[![Image from Gyazo](https://i.gyazo.com/4d11abe32d671e820532654253c624b1.png)](https://gyazo.com/4d11abe32d671e820532654253c624b1)

###④googleアナリティクス利用の確認(2/3)
無料で使えるみたいなので、とりあえず[有効]のまま[続行]を選択します。

###⑤googleアナリティクスの構成(3/3)
googleアナリティクスのアカウント選択を求められます。
[Default Account for Firebase]を選択して[プロジェクトを作成]を選択します。
[![Image from Gyazo](https://i.gyazo.com/290a915e6cf7e52b434a8de67bf81adc.png)](https://gyazo.com/290a915e6cf7e52b434a8de67bf81adc)
違う場合は、画面に沿って適当に進めてくださいmm

###⑥プロジェクト作成完了
これでプロジェクトの作成は完了です！
[続行]をクリックして、ダッシュボードに移動しましょう！
[![Image from Gyazo](https://i.gyazo.com/c6107faaa5c8bea834abfd33f8d80203.png)](https://gyazo.com/c6107faaa5c8bea834abfd33f8d80203)
##Hostingサービスを使ってお試しデプロイ
###①Hostingサービスを始める
firebaseのメニューから[Hosting]を選択してください。
[![Image from Gyazo](https://i.gyazo.com/03d81a892f082f7c3cfdd84de107583f.png)](https://gyazo.com/03d81a892f082f7c3cfdd84de107583f)
Hosting画面が表示されたら[始める]を選択しましょう。
[![Image from Gyazo](https://i.gyazo.com/c51d07176fd55ec517291dc3058628a8.png)](https://gyazo.com/c51d07176fd55ec517291dc3058628a8)

**この後は、ナビゲーションに沿って３つの手順を実施します**
[![Image from Gyazo](https://i.gyazo.com/fd398baefb134024a7a8534ab9085637.png)](https://gyazo.com/fd398baefb134024a7a8534ab9085637)
###②firebase CLIのインストール
　ターミナルを開き、画面に表示されている``npm install -g firebase-tools``を実行しましょう。
　これは、どこでも良いみたいです。また、今回は複雑なことをしないので「Firebase JavaScript SDK をウェブアプリに追加する手順も表示する」にはチェックを付けずに進めます。

[![Image from Gyazo](https://i.gyazo.com/92f1a6eb990942f0b8585584cfcdf430.png)](https://gyazo.com/92f1a6eb990942f0b8585584cfcdf430)
###③firebase CLIのアクセス設定
　``cd``でデプロイ対象のフォルダを作成するディレクトリに移動してください。（適宜フォルダを作成）
　移動後``firebase login``を実行すると、Webブラウザが自動起動します。そこで、プロジェクトを作成したgoogleアカウントでのログイン、CLIからのアクセスの許可を行います。問題なく完了すれば、以下のような画面が表示されます。
　[![Image from Gyazo](https://i.gyazo.com/85320cff35b3224f8ad54fa361caafb5.png)](https://gyazo.com/85320cff35b3224f8ad54fa361caafb5)

###④firebase プロジェクトの初期化
続けてターミナルに``firebase init``を入力し、実行します。
下図のような選択肢が表示されますので[↓]キーで[◯ Hosting: Configure and deploy Firebase Hosting sites]を選択し、[スペース]→[Enter]の順にキーを押して確定させます。
[![Image from Gyazo](https://i.gyazo.com/6b0bc5d5eb1d3e4e810282c581a9c2c5.png)](https://gyazo.com/6b0bc5d5eb1d3e4e810282c581a9c2c5)
####④-1 初期化対象を選択
先ほど作成したプロジェクトを初期化したいので[Use an existing project]を選択し、[Enter]します。
[![Image from Gyazo](https://i.gyazo.com/09c95092271dfc18e510e11b1fd9e9a2.png)](https://gyazo.com/09c95092271dfc18e510e11b1fd9e9a2)
####④-2 初期化オプションを選択
[Use an exisiting project]を選択するとログインしているユーザに紐づいたプロジェクトの一覧が表示されます。先ほど作成したプロジェクト名を選択して[Enter]してください！
[![Image from Gyazo](https://i.gyazo.com/8daa8ab64b884d7c465a0e31d6c4b1e1.png)](https://gyazo.com/8daa8ab64b884d7c465a0e31d6c4b1e1)
###④-3 公開フォルダ指定
公開フォルダを確認されますので任意で選択してください。デフォルトはpublicのようです。
よく分からず、当方は``ozackiee-portfolio``にしちゃいました^^;
[![Image from Gyazo](https://i.gyazo.com/05db1bc78082588fe7b3987ae7ae074f.png)](https://gyazo.com/05db1bc78082588fe7b3987ae7ae074f)
###④-4 SPA有無の確認
続いて、SPAかどうかを確認されます。
今回拝借したテンプレートはSPAになっていますので``y``を入力して[Enter]しましょう。
おそらく、Nを選択した場合はindex.htmlが作成されないのではないかと思われますー。
[![Image from Gyazo](https://i.gyazo.com/dc71a807e893a58f9d26d0d179527a49.png)](https://gyazo.com/dc71a807e893a58f9d26d0d179527a49)

###④-5初期化完了
これで初期化は完了です！！！
デフォルトのindex.htmlが公開用フォルダに作成されているはずです。
[![Image from Gyazo](https://i.gyazo.com/37b7a038e9f94963e30f8e6a673d8d76.png)](https://gyazo.com/37b7a038e9f94963e30f8e6a673d8d76)
[![Image from Gyazo](https://i.gyazo.com/ce9010ebbaf84a539c518eb1e4a16c39.png)](https://gyazo.com/ce9010ebbaf84a539c518eb1e4a16c39)
###⑤デフォルトページのデプロイ
お試しとして、デフォルトで作成されたindex.htmlファイルをデプロイしてみましょう。
ターミナルから``firebase deploy``を実行し、下図のように表示されたら、デプロイ成功です！
[![Image from Gyazo](https://i.gyazo.com/72388054ba6c1c73f295ece049af0571.png)](https://gyazo.com/72388054ba6c1c73f295ece049af0571)
###⑥デプロイしたページにアクセス
Hosting URLにアクセスしてみましょう。デフォルトのindex.htmlが表示されることが確認できます！
[![Image from Gyazo](https://i.gyazo.com/38f8976a386c65c6ec2bdbe2fac1e1af.png)](https://gyazo.com/38f8976a386c65c6ec2bdbe2fac1e1af)

## ポートフォリオ（テンプレート）をデプロイする
### ①テンプレートサイトに置き換え
公開フォルダの中身をダウンロードしたテンプレートサイトの中身にコピペで置き換えちゃいましょう。完了後、公開フォルダ配下は以下のような感じになってると思います。
　[![Image from Gyazo](https://i.gyazo.com/b9c07df9ed77c0922ed96c447f6cc2c4.png)](https://gyazo.com/b9c07df9ed77c0922ed96c447f6cc2c4)

###②再デプロイ
置き換えが終わったら、ターミナルから再度``firebase deploy``を実行しましょう。

###③アクセス確認
Hosting URLにアクセスしたら、テンプレートサイトが表示されることを確認してください！
あとは、好きに[対象を編集]→[デプロイ]の繰り返しですね。
今回私がデプロイしたサイトは、今後自分用に改修予定です^^;

https://ozackiee-portfolio.firebaseapp.com/

##補足
Hosting完了後、デプロイしたサイトに対して使用状況を確認できます。
無料枠を超えていないかなどは、ここで確認ができそうですね。
テンプレートあげただけだと２KB程度でした^^
[![Image from Gyazo](https://i.gyazo.com/aed3a81286b0c70457a1ccc37332df54.png)](https://gyazo.com/aed3a81286b0c70457a1ccc37332df54)

##まとめ
該当ページを``Git init``すればGitHub管理もできそうだけど、GitHubにあげたら、デプロイするとかやろうと思ったら、もう一手間必要そうな感じですね。
とりあえず、形だけ欲しい・・・という場合は、非常に有効そうかなと感じました。。

[ 2019/9/25追記]
　まとめで上げていたGitに、CircleCI連携もやってみました！
　詳しくは[コチラ](https://qiita.com/ozackiee/items/e0d9f3817020a5474368)