主機 網站架設

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

2019/05/24

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

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


Firebase Hosting 重點整理
1.安裝 Node.js:下載
2.安裝firebase套件:npm install -g firebase-tools
3.firebase串接Google帳號:firebase login
4.串接firebase專案:firebase init
5.上傳網站到firebase:firebase deploy
Firebase連結:https://firebase.google.com/
免費限制:1GB空間/月、10GB流量/月

Step1
當安裝完畢Node後,可透過「npm -version」指令來查詢,是否已安裝完成。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step2
接著輸入「npm install -g firebase-tools」安裝Firebase套件,當套件安裝完畢後,再本機的電腦中,建立一個專案目錄,並輸入「cd 專案目錄」進到專案目錄下。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step3
當安裝完畢後,由於梅干的電腦Node版本比較舊,因此可依照上方的指令「npm install -g npm to update」,將電腦升級到6.9.0的新版。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step4
再輸入「firebase login」登入Google的帳號。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step5
接著就會開啟Google的登入畫面。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step6
再按「允許」授權。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step7
這樣就將Google帳號與firebase串接在一起。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step8
當串接完成後,這時終端機下方就會出現綠色勾勾,表示已串接成功。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step9
接著開啟 Firebase console 建立一個新專案。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step10
先輸入專案名稱,再把下方的選項勾起來,再按「建立專案」鈕。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step11
這樣就已建立好一個新專案。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step12
接著再點一下網頁的應用程式圖示。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step13
一樣建立一個應用程式名稱。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step14
再按「前往主控制台」。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step15
接著再輸入「firebase init」,再用空白鍵選擇「Hosting:Configure and deploy Firebase Hosting sites」。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step16
Enter
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step17
再按Enter
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step18
輸入y
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step19
這樣就完成網站的專案建立。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step20
這時到當初所設定的專案目錄下,就會看到firebase.jsonpublic資料夾,而public資料夾,就是網站的根目錄。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step21
再把網站的檔案,全部拷貝到public的資料夾下。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step22
再輸入「firebase deploy」後,就會將本機中的public資料夾內的檔案,上傳到firebase的專案中,當上傳完畢後,就會出現專案的網址。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step23
開啟瀏覽器,並輸入剛的網址,哈!感動的時刻到了,終於看到先前網站中的資料了。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step24
當要綁定自己的網域時,回到firebase控制面板,選擇「開發 / Hosting」,再按右邊的「連結網域」鈕。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step25
輸入要綁定的網域名稱。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step26
接著需要透過DNS進行驗證。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step27
在dns的地方,建立一個TXT並輸入上方的值。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step28
當完成網址驗證後,就會看到firebase則會提供一組IP,這時再到DNS中,建立一個A記錄,並將IP進行向。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step29
當建立完成後,在Hosting的網域清單中,就會看到剛所建立的網址。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱
Step30
哈~這樣就完成網名的綁定了,是不是超EZ的呀!而日後當要更新時,只要將檔案放到public的資料夾中,再輸入「firebase deploy」這樣就可以了,當習慣用指令上傳時,反而會覺得比用FTP來的方便且快許多。
梅問題-[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設,與綁定自己的網域名稱