はじめに
ポートフォリオサイト作るの面倒だなぁ…って思って、
どうにか簡単い終わらせないか検討し、簡単にできそうなことを試してみました！
＜やりたいこと＞
簡単にポートフォリオサイトを作る
＜そのためにやったこと＞
・無料で提供されているポートフォリオのテンプレートを利用する
・firebaseのhostingサービスを使ってデプロイする
本当に適当感が漂っているため、間違いなどあれば、ご指摘いただけると嬉しいです！！
全体の流れ
今回はこんな感じの流れです。
テンプレートの修正はしていませんが、これだけだったら瞬殺で出来ちゃうことが判明。
[ ポートフォリオのテンプレートを取得 ]
↓
[ firebaseのプロジェクトを作成する ]
↓
[ Hostingサービスを使ってデフォルトページをデプロイする ]
↓
[ ポートフォリオ（テンプレート）をデプロイする ]
前提事項
※2019/9/23時点での手順です。移り変わり早そうなので賞味期限も早そう…※
Googleアカウント
Googleアカウント取得済みの体で話を進めます。未取得の場合は、事前にご準備をお願いします。
費用について
今回利用するfirebaseは従量課金制の料金体系をとっています。
ですが、以下の条件を満たしていれば、Hostingサービスを無料枠内で利用することが出来ます。
【Sparkプラン(無料)】
| 項目 | 制限 |
|---|---|
| GB保存済み | 総保存容量が1GB以内 |
| GB転送済み | ダウンロード容量が1GB/月以内 |
| 出典：料金プラン |
手順の説明
さぁ、ちゃきちゃきちゃきです。
ポートフォリオのテンプレートを取得
色々と無料のテンプレートサイトがありますが、今回は未経験からWebデザイナーさまのテンプレートを利用させていただきました。
下記のサイトにある[ダウンロード]リンクからzipファイルをダウンロードし、解凍しておいてください。
【未経験からWebデザイナー:無料テンプレート】
・ベーシック
・ガーリー
firebaseにプロジェクトを作成する
①Firebaseをはじめる
firebaseサイトを開き[使ってみる]を選択してください。この時、googleアカウントへのログインを求められるので、ログインしてください。
②プロジェクトを作成を開始する
初回ログイン時は、既存のプロジェクトなどが何もないので下図のような画面が表示されます。
[プロジェクトを作成]を選択して、早速プロジェクトを作成してみましょう。
③プロジェクト名を決める(1/3)
任意のプロジェクト名を指定して[続行]を選択してください。
ここで指定したプロジェクト名がデプロイしたサイトのURLの一部になります。
④googleアナリティクス利用の確認(2/3)
無料で使えるみたいなので、とりあえず[有効]のまま[続行]を選択します。
⑤googleアナリティクスの構成(3/3)
googleアナリティクスのアカウント選択を求められます。
[Default Account for Firebase]を選択して[プロジェクトを作成]を選択します。
違う場合は、画面に沿って適当に進めてくださいmm
⑥プロジェクト作成完了
これでプロジェクトの作成は完了です！
[続行]をクリックして、ダッシュボードに移動しましょう！
Hostingサービスを使ってお試しデプロイ
①Hostingサービスを始める
firebaseのメニューから[Hosting]を選択してください。
Hosting画面が表示されたら[始める]を選択しましょう。
この後は、ナビゲーションに沿って３つの手順を実施します
②firebase CLIのインストール
ターミナルを開き、画面に表示されているnpm install -g firebase-toolsを実行しましょう。
これは、どこでも良いみたいです。また、今回は複雑なことをしないので「Firebase JavaScript SDK をウェブアプリに追加する手順も表示する」にはチェックを付けずに進めます。
③firebase CLIのアクセス設定
cdでデプロイ対象のフォルダを作成するディレクトリに移動してください。（適宜フォルダを作成）
移動後firebase loginを実行すると、Webブラウザが自動起動します。そこで、プロジェクトを作成したgoogleアカウントでのログイン、CLIからのアクセスの許可を行います。問題なく完了すれば、以下のような画面が表示されます。
④firebase プロジェクトの初期化
続けてターミナルにfirebase initを入力し、実行します。
下図のような選択肢が表示されますので[↓]キーで[◯ Hosting: Configure and deploy Firebase Hosting sites]を選択し、[スペース]→[Enter]の順にキーを押して確定させます。
④-1 初期化対象を選択
先ほど作成したプロジェクトを初期化したいので[Use an existing project]を選択し、[Enter]します。
④-2 初期化オプションを選択
[Use an exisiting project]を選択するとログインしているユーザに紐づいたプロジェクトの一覧が表示されます。先ほど作成したプロジェクト名を選択して[Enter]してください！
④-3 公開フォルダ指定
公開フォルダを確認されますので任意で選択してください。デフォルトはpublicのようです。
よく分からず、当方はozackiee-portfolioにしちゃいました^^;
④-4 SPA有無の確認
続いて、SPAかどうかを確認されます。
今回拝借したテンプレートはSPAになっていますのでyを入力して[Enter]しましょう。
おそらく、Nを選択した場合はindex.htmlが作成されないのではないかと思われますー。
④-5初期化完了
これで初期化は完了です！！！
デフォルトのindex.htmlが公開用フォルダに作成されているはずです。
⑤デフォルトページのデプロイ
お試しとして、デフォルトで作成されたindex.htmlファイルをデプロイしてみましょう。
ターミナルからfirebase deployを実行し、下図のように表示されたら、デプロイ成功です！
⑥デプロイしたページにアクセス
Hosting URLにアクセスしてみましょう。デフォルトのindex.htmlが表示されることが確認できます！
ポートフォリオ（テンプレート）をデプロイする
①テンプレートサイトに置き換え
公開フォルダの中身をダウンロードしたテンプレートサイトの中身にコピペで置き換えちゃいましょう。完了後、公開フォルダ配下は以下のような感じになってると思います。
②再デプロイ
置き換えが終わったら、ターミナルから再度firebase deployを実行しましょう。
③アクセス確認
Hosting URLにアクセスしたら、テンプレートサイトが表示されることを確認してください！
あとは、好きに[対象を編集]→[デプロイ]の繰り返しですね。
今回私がデプロイしたサイトは、今後自分用に改修予定です^^;
補足
Hosting完了後、デプロイしたサイトに対して使用状況を確認できます。
無料枠を超えていないかなどは、ここで確認ができそうですね。
テンプレートあげただけだと２KB程度でした^^
まとめ
該当ページをGit initすればGitHub管理もできそうだけど、GitHubにあげたら、デプロイするとかやろうと思ったら、もう一手間必要そうな感じですね。
とりあえず、形だけ欲しい・・・という場合は、非常に有効そうかなと感じました。。
[ 2019/9/25追記]
まとめで上げていたGitに、CircleCI連携もやってみました！
詳しくはコチラ