當我們有一個靜態網頁(指不包含網頁程式如PHP…及資料庫的網頁),想要發佈到網路上供大家瀏覽,勢必要租用一台網頁伺服器,但區區一個網頁流量又不大,實在不會想要花錢租用虛擬主機,如果我們想上傳一些不常更新的靜態網頁(個人履歷、公司產品介紹…),有一個可以免費放置網頁的空間豈不就兩全其美了,幸好有 Surge 這個服務能解決我們的問題。
Surge 是一個讓使用者免費架站的服務平台,不但能自訂網域還支援 SSL 憑證,至於要如何使用,就趕快進入以下的教學吧。
網站名稱 : Surge
網站連結 : https://surge.sh/
先進到Surge官網,點擊上方的 Pricing ,接著在免費方案的區塊點「Get started for free」按鈕。

接著會進入Surge的官方安裝教學,有興趣的可以看一下。

不過在安裝 Surge 之前,我們要先到 Node.js 的官網下載 Node.js。
點擊 LTS 版本的按鈕來下載。

下載完後點開來開始安裝 Node.js ,就依照我們安裝軟體的壞習慣一直按下一步即可,這裡就不多加贅述了。
安裝 Node.js 之後,在windows的搜尋框輸入「CMD」來開啟電腦的命令提示字元。

打開之後我們就可以開始安裝 Surge 囉。
輸入
npm install --global surge
後按enter來安裝。

等待一會兒安裝好之後,我們就可以直接輸入「Surge」後按enter鍵來啟用它。

第一次使用 Surge 它會提示你輸入信箱來註冊帳號,填完信箱後按enter,接著設定登入的密碼,在填密碼的過程中並不會顯示在畫面上,這時不必太擔心,這是因為要保護安全性,所以就放心地填入密碼即可,填完後按enter來完成註冊的動作。

註冊完後會顯示你目前登入的帳號,以及待會要上傳網頁的檔案路徑。

可以直接拖拉本機端的網站的資料夾到CMD的路徑輸入位置,或是直接輸入檔案位置都可。

確認上傳路徑無誤後,按enter來確定。

這時Surge 會自動隨機匹配一個後輟為 .surge.sh 的子網域,如果不喜歡它匹配的域名也可自行更改,不過一定要以 .surge.sh 為結尾。

例如我把網址改成 static-web-test.surge.sh,需要注意一點的是,網址是獨一無二的,也就是說只要有人用過這個名稱就不能再次使用。確定好後就可以按下 enter 來上傳了

不一會兒就會看到檔案上傳完成,並且成功發佈了。

我們就可以在瀏覽器輸入剛剛設定好的網址,就可以發現網站已經成功發佈了。

補充教學
做到這裡,就已經完成架設靜態網頁了,以下會再介紹一些 Surge 的其他功能。
強制為網站加入 SSL 憑證
我們可以看到原先建立的網站是以 http 的形式,瀏覽器會告知使用者為不安全連線。

好在免費版的 Surge 就提供 SSL 連線的服務,啟用方式也相當簡單。
輸入
surge --domain https://你的網址.surge.sh
並重傳剛剛的檔案即可。

再回到剛剛的頁面重新整理,就會發現網站使用 https 來開啟了。

更多使用操作
想當然爾,一定還有一些操作像是登出帳號.清除專案.查看所有專案等功能……
我們可以輸入
surge -h
來查看一些操作的指令提示。

登出帳戶
surge logout
移除專案
surge teardown
列出所有發佈的專案
surge list