[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設，與綁定網域名稱

　　自從使用了Hugo架站就回不去了，一來是網鄾都變成靜態頁面，讓網頁開啟的速度變超快，二來是主機也變得單純，只需要一般的檔案型主機就可運作，因此梅干先前也分享了，許多免費的靜態網頁空間，像是roast.io、Neocities、GitHub Pages、GCS….等，且只需透過指令，就能快速的將網頁，直接同步到主機中，甚至還可綁定自己的網域名稱與憑證，更重要的是，即便有些主機在國外，但因為是HTML靜態頁面，所以在開啟的速度還是飛快，這也是Hugo最迷人的地方。

  而除了先前所分享的幾個免費的靜態網頁空間外，最後梅干則在Hugo的官網中，看到它們也推薦Firebase，而Firebase與GCS都一樣是Google所推出的服務，唯一的差別就在於Firebase多了資料庫的功能，同時Firebase還有提供1G空間/10G流量免費使用，這對於要拿架站還是一頁式的行銷網頁都相當的合適喔！至於要怎麼來使用Firebase，以及綁定自己的網域名稱，現在就一塊來看看囉！

---

Firebase Hosting 重點整理

---

Step1
當安裝完畢Node後，可透過「npm -version」指令來查詢，是否已安裝完成。

---

Step2
接著輸入「npm install -g firebase-tools」安裝Firebase套件，當套件安裝完畢後，再本機的電腦中，建立一個專案目錄，並輸入「cd 專案目錄」進到專案目錄下。

---

Step3
當安裝完畢後，由於梅干的電腦Node版本比較舊，因此可依照上方的指令「npm install -g npm to update」，將電腦升級到6.9.0的新版。

---

Step4
再輸入「firebase login」登入Google的帳號。

---

Step5
接著就會開啟Google的登入畫面。

---

Step6
再按「允許」授權。

---

Step7
這樣就將Google帳號與firebase串接在一起。

---

Step8
當串接完成後，這時終端機下方就會出現綠色勾勾，表示已串接成功。

---

Step9
接著開啟 Firebase console 建立一個新專案。

---

Step10
先輸入專案名稱，再把下方的選項勾起來，再按「建立專案」鈕。

---

Step11
這樣就已建立好一個新專案。

---

Step12
接著再點一下網頁的應用程式圖示。

---

Step13
一樣建立一個應用程式名稱。

---

Step14
再按「前往主控制台」。

---

Step15
接著再輸入「firebase init」，再用空白鍵選擇「Hosting:Configure and deploy Firebase Hosting sites」。

---

Step16
按Enter。

---

Step17
再按Enter。

---

Step18
輸入y。

---

Step19
這樣就完成網站的專案建立。

---

Step20
這時到當初所設定的專案目錄下，就會看到firebase.json與public資料夾，而public資料夾，就是網站的根目錄。

---

Step21
再把網站的檔案，全部拷貝到public的資料夾下。

---

Step22
再輸入「firebase deploy」後，就會將本機中的public資料夾內的檔案，上傳到firebase的專案中，當上傳完畢後，就會出現專案的網址。

---

Step23
開啟瀏覽器，並輸入剛的網址，哈！感動的時刻到了，終於看到先前網站中的資料了。

---

Step24
當要綁定自己的網域時，回到firebase控制面板，選擇「開發 / Hosting」，再按右邊的「連結網域」鈕。

---

Step25
輸入要綁定的網域名稱。

---

Step26
接著需要透過DNS進行驗證。

---

Step27
在dns的地方，建立一個TXT並輸入上方的值。

---

Step28
當完成網址驗證後，就會看到firebase則會提供一組IP，這時再到DNS中，建立一個A記錄，並將IP進行指向。

---

Step29
當建立完成後，在Hosting的網域清單中，就會看到剛所建立的網址。

---

Step30
哈～這樣就完成網名的綁定了，是不是超EZ的呀！而日後當要更新時，只要將檔案放到public的資料夾中，再輸入「firebase deploy」這樣就可以了，當習慣用指令上傳時，反而會覺得比用FTP來的方便且快許多。

---