不曉得你有沒有在找「免費」的靜態網站空間?

市面上「免費」且「持久」的網站空間真的非常稀少,而且想要掛上自己的Domain名稱,更是難上加難,都是要錢的,這不是廢話嗎?不要錢的話,誰要讓你放?

不過倒是有個Google的服務,有提供免費額度供大家使用,佛心來著,雖然免費的額度可能之後會調整甚至取消,畢竟Google目前許多服務,原本也說不用錢,但最後也都要開始收錢了。

但先用再說,目前只要你的網站是「靜態HTML網頁」,以及「流量不高」的話,就可以免費一直用下去,但其實就算你網站真的流量很高,價格也是不貴,畢竟我們也是希望自己的網站是「人氣網站」,而不是「乏人問津」的網站吧,這也正是良性的循環。

這個服務是「Firebase」的「Hosting」,目前免費的額度的「容量」是「10GB」,而「流量」是「360MB/天」、「10GB/月」,可以參考這個表格「Firebase Pricing」。

10GB的容量是大的誇張,頂多用沒多少MB吧,然後一個月流量最高可用「10GB」,真的也有夠多了,像一些公司形象網站,就非常適合放在這邊,速度快,又幾乎是免費使用。

缺點,也算是有,就是想要上傳網站資料,並不如上傳到FTP簡單,稍微麻煩了點,電腦白痴的話肯定是不行的,因為所有動作,都要在「命令列」指令的方式來完成。

到底有多麻煩,我們開始來看一下,我這邊以Windows環境來做示範。(但其實沒那麼可怕,我本來以為很麻煩,但操作過整個流程下來,發現其實很容易)

安裝Node.js和Firebase CLI

首先,要開始使用Firebase的命令列指令,要先安裝「Node.js」,下載可以到Node.js官方網站,如下:

 

直接下載Windows x64版本的即可,安裝時,就下一步、下一步安裝完即可,沒有任何困難,完成後,並且「重新開機」,接著打開「命令提示字元」,輸入指令「npm –version」,如下圖:

輸入指令之後,有跑出版本號碼,才算是有安裝完成,如果沒有安裝或者失敗的話,會出現「npm不是內部或外部命令可執行的程式或批次檔」。接著就要安裝Firebase的工具程式。

輸入「npm install -g firebase-tools」並按下〔Enter〕,如下圖:

接著等待幾分鐘的時間,安裝完成後如下圖:

以上,整個準備動作算是完成了,接著就要開始來設定。

firebase login

接下來這個動作,如果你還有其它電腦也要使用Firebase工具程式的話,每一部電腦都要執行firebase login來登入一次。

首先,輸入指令「firebase login」後,會出現「Allow firebase to collect CLI usage and error reporting information?」,詢問是否允許firebase收集你的使用資訊、錯誤報告,這邊按Y或n都沒關係,按自己的想法即可。

接著會用網頁的方式,跳出登入畫面,請輸入你的Google帳戶來登入Firebase服務,如下圖:

登入成功後,即可關閉網頁,如下圖:

回到命令列模式,會有成功的訊息,如下圖:

創建Firebase專案

打開Firebase的後台,並點擊「新增專案」,如下圖:

接著在輸入「專案名稱」時很重要,如果之後你想要使用firebase預設的子網址,就要想一個「世界唯一」的名稱。

你在輸入時,專案名稱下方會自動產生唯一的id名稱,如果你輸入的名稱有人使用過的話,這個id名後方,就會被加入一串英數文字,例如我輸入「example」這個常見的單字,所以我的id名就會變成「example-992bf」,所以我的網站完成網址,就會變成「example-992bf.web.app」。但如果你有準備自己的網域名稱,那這個id無論變多複雜,都沒有關係,反正最後還是以你準備的網域為主。

好,回到輸入專案名稱的地方,輸入一個名稱後,再按下〔繼續〕,如下圖:

接著會結合Google Analytics分析,如果不需要的話,就取消「啟用這項專案的Google Analytics(分析)功能」,最後再點擊〔建立專案〕,如下圖:

經過一小段的處理時間,新專案就會產生完成。

firebase init

接著這個步驟,我們就要把網站檔案,上傳至剛才產生出來的專案,首先,先準備好網站檔案,我這邊從「bootstrap」下載了一個範例網頁,如下圖:

接著回到命令提示字元,先切換到要上傳的資料夾路徑裡,如我目前的路徑c:\web,進入資料夾後,輸入「firebase init」,接著開始會一出現一連串的問題,如下圖:

看的懂簡單的英文的話,就沒什麼問題。You are currently outside your home directory,這句話說你現在是在專案目錄外,這個後面你就會懂的。

Are you ready to proceed?(Y/n)

請按下「Y」。

Which Firebase features do you want to set up for this directory?

由於Firebase tools的功能,並不是只用來上傳網站資料,所以接下來請使用〔方向鍵(上、下)〕移動,再按〔空白鍵〕勾選,最後按〔Enter〕決定。

請選擇「Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」,如下圖:

Please select an option

選擇 「Use an existing project」,如下圖:

接著選擇剛才我們所建立的專案名稱,這邊是叫「example-992bf」,如下圖:

What do you want to use as your public directory? (public)

請直接按下〔Enter〕,選擇預設的「public」公開即可。

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

要不要把專案設定成單一頁面的網站?我這邊的例子是按下「y」,如果你的網站是有多頁面的,就按下「N」。

Set up automatic builds and deploys with GitHub?(y/N)

由於我沒有使用GitHub,所以這邊我按下「N」,如下圖:

最後回到命令提示字元,就代表專案已經設定完成。

你回到原本的資料夾看一下,Firebase會產生幾個檔案,和一個「public」資料夾,然後其餘的檔案資料夾,是我們原本的網頁檔案,請把這些檔案、資料夾給「剪下」,如下圖:

然後來到「public」資料夾裡,這裡就是讓我們放網站檔案的地方,裡面預設有一個index.html檔案,你可以直接把它刪除,然後貼上剛才剪下來的檔案。

所以根目錄就只剩下Firebase產生出來檔案,如下圖:

 

以上這個firebase init的設定,每個專案都要操作設定一次,操作這些步驟的目的,其實就是要產生這些設定檔而已。

因此,如果你有把檔案複製到其它電腦上,這個動作就可以不用再做一次,像我都是用Google雲端硬碟同步資料到多部電腦上,所以這個動作,我只要在其中一部電腦上做一次即可。

firebase deploy

接著就是最重要的「發佈」的上傳動作,在該專案的目錄底下,輸入「firebase deploy」,就會開始上傳,如下圖:

上傳之後,會告訴你的網站網址,直接開啟網站,就可以順利打開網站,如下圖:

同時,我們也可以到Firebase後台的「Hosting」服務頁面,如下圖:

在這個Hosting後台的「用量」頁面,就可以看到目前網站的使用量,從這邊可以看到有沒有使用超過免費的額度。

其實firebase所提供的網址已經夠用,但如果你想要使用自己所購買的網域,我另外開一篇文章,示範一次給大家看一下。