[How-To] 如何使用 DriveToWeb 在 OneDrive 上建置靜態頁面網站

《阿力獅的教室》這個網站是以 WordPress.org 的架站程式建置而成，說一句實話，任何架站程式均不如官方宣稱的那麼簡單，尤其在維護及新增功能方面更是如此，因為這需要站長本身不斷的花時間學習很多基礎知識。

時間，其實是最昂貴的成本。

有些朋友也想自行架站，但是目的僅在於呈現靜態 HTML 頁面並讓網站有個專屬網址；這類簡單的需求，實在也不必去租用主機然後使用架站程式自架站，有許多免費服務可以提供這樣的解決方案，而 DriveToWeb 便是其中一個解決方案。

DriveToWeb 服務簡介

DriveToWeb 這個服務能讓免費的雲端儲存空間變成可託管 HTML 靜態網頁檔案的主機空間，並且可以直接與你擁有的自訂網址結合，讓你不必花錢租用主機，立即擁有一個有自訂網址的 HTML 靜態頁面網站。

而且，DriveToWeb 這個服務是台灣人開發建立的唷…

實際網站範例：https://od.alexlion.me

當然，要支援所有雲端儲存空間其實不太可能，畢竟不是每一種雲端儲存服務都有 API 可以呼叫，檔案可以公開瀏覽的支援度也不同，而且有些雲端儲存空間根本存活不了多久，開發者以有限的時間精力支援大廠的雲端儲存服務，這樣的服務才有可能維持的比較久，所以 DriveToWeb 在種種條件下，目前僅支援以下兩種雲端儲存服務。

• Microsoft OneDrive
• Google 雲端硬碟

需要先行準備的項目

在使用 DriveToWeb 這個服務建置網站之前，有必須先行準備好的項目，請準備好才開始動工。

• HTML 靜態網頁檔案：自己寫 HTML 靜態頁面檔案不是不行，不過其實網路上有很多人提供相當精緻美觀的範本，透過這個 Google 搜尋結果可以找到相當多可以下載的範本檔案，而不必從零開始。
• 會編修 HTML 檔案的內容：從網路上下載的 HTML 靜態頁面檔案只是範本，裡面一定有文字內容需要進行修改才會適合自己，所以必須自己具備編修 HTML 檔案內容的能力，或是請別人協助你進行編修。
• 一個 Microsoft 帳號或 Google 帳戶：以接下來要示範的範例來說，需要的是 Microsoft 帳號。
• 一個你有擁有的網域名稱：如果想讓透過 DriveToWeb 建置的網站有自己的網站網址，那你就必須準備一個自己的網域名稱。如果不知道網域名稱是什麼，可以參考以下文章。
• 如何選擇適合你的網域名稱 (Domain Name)：網域名稱取的好不好、適不適合自己很重要，這篇可以提供一些參考。
• 註冊網域名稱的注意事項：註冊網域名稱不是把年費準備好就好，有些小地方會影響你不能註冊，或是註冊後遭到管理單位停用，不可不慎。
• 有了自有網域名稱，可以拿來做什麼：網域名稱是要花錢購買使用權的，但是如果只拿來架設網站，那你就太小看網域名稱的應用囉。
• 使用 domcomp 進行網域名稱快搜比價，迅速找到絕佳網路地段：頂級域名上百上千種，服務商更是不會低於這個數目，如果一時之間沒有選定的廠商及頂級域名，使用 domcomp 這個服務可以節省你很多時間。
• 瞭解如何新增/修改/刪除對應的 DNS 記錄：新增/修改/刪除 DNS 沒有那麼難，即使你不懂 DNS 運作的基本原理，服務提示你要新增哪一個種類的記錄，你就照提示新增並加入服務提供給你的值就可以。

以上項目準備完畢之後，依照以下步驟一步一步確實完成就可以完成一個 HTML 靜態頁面網站。

透過 DriveToWeb 在 OneDrive 上建置靜態頁面網站

只要透過以下步驟一步一步確實完成，便能馬上擁有一個 HTML 靜態頁面網站。請注意，以下流程的步驟已經過最佳化，可以避免在多個網站間往返切換的時間浪費。

1. 使用 Microsoft 帳號登入 OneDrive。
2. 在 OneDrive 中建立一個空資料夾，資料夾名稱必須就是將來這個 HTML 靜態網頁網站的網址。

• 舉例來說，阿力獅要透過 DriveToWeb 建置一個網址為 od.alexlion.me 的網站，這個資料夾的名稱就必須是 od.alexlion.me，不能是別的名稱。請注意，儲存 HTML 檔案的資料夾名稱一定要與將來的網址一致，但不必為資料夾名稱加上 http:// 或 https://，這點很重要、非常重要、超級重要，千萬不能弄錯喔。

1. 將修改好內容的 HTML 檔案及相關檔案都上傳到這個資料夾。

1. 將儲存 HTML 檔案及相關的資料夾設定為 [共用]。

• 對著要設定為 [共用] 的資料夾按右鍵，然後點擊 [共用]。

• 取消選取 [允許編輯]，然後點擊 [取得連結]。

• 取消選取 [允許編輯]，能讓這個資料夾的共用權限從 [擁有此連結的任何人都可以編輯此項目]，變更為安全性高的 [擁有此連結的任何人都可以檢視此項目]。
• 請務必點擊 [取得連結]，出現共用連結才算完成共用資料夾設定。

1. 前往 DriveToWeb 服務網站，由於這次我們是要以 OneDrive 為網頁檔案存放空間建置網站，所以請點擊 [OneDrive] 按鈕。

1. 接下來就是登入 Microsoft 帳號及授與 DriveToWeb 權限存取你的 OneDrive 資料的程序。

• 請注意，不授與 DriveToWeb 存取你的 OneDrive 資料的話，就沒有接下來的操作設定囉。
• 此時登入的 Microsoft 帳號，當然必須與步驟 1 中登入的 Microsoft 帳號是同一個，這點請持有多個 Micrtosoft 帳號的朋友務必多加注意。

1. 進入 DriveToWeb 的 Admin Panel 後，在頁面最上方會顯示一個網址，這個網址指向的就是你剛剛在 OneDrive 存放 HTML 靜態頁面檔案及相關檔案的公開資料夾連結。DriveToWeb 核發給你的網址，非常重要，解說如下。

• 如果你暫時還沒有購買網域名稱，那分享這個網址給其他人，知道這個網址的人便能看到這個 HTML 靜態頁面網站。以阿力獅的案例來說，就是 https://zmpjnnbhfzdgeoto4g0bja-on.drv.tw/od.alexlion.me/(為了安全性原因，螢幕擷圖中顯示的網址及這個文字網址，都是經過變造的結果，請不用費心試連或做其他嘗試)。
• 如果要將這個 HTML 靜態頁面網站加上自訂網域的網址，會需要 DriveToWeb 配發網址中的網域名稱，以阿力獅的案例來說，就是 zmpjnnbhfzdgeoto4g0bja-on.drv.tw，也就是扣除與 OneDrive 上公開資料夾同名的部分。

如果這個網站的 HTML 網頁要修改，或想加入新的頁面，直接把修改過的檔案或需要新增的檔案上傳至同一個 OneDrive 資料夾就可以。

為 DriveToWeb 建置的 HTML 靜態頁面網站設定網址

如果你有購買自己專屬的網域名稱，那便能為 DriveToWeb 建置的 HTML 靜態頁面網站加上專屬網址，「網站有專屬網址」能大大增加個人及網站的識別度。

根據 DriveToWeb 服務的官方文件所言，要將透過它建置出來的 HTML 靜態頁面網站加上專屬網址，僅需建立一筆 CNAME 記錄便能完成這項設定。

阿力獅用來示範的網域名稱雖然是在 GANDI 買的，但因為想為網站加上 SSL 憑證升級為 HTTPS 加密通訊協定，所以將網域名稱的 DNS 管理遷移至 Cloudflare 進行託管。以下便以 Cloudflare (新增 DNS 記錄這項操作無論是在網域名稱註冊服務商設定，還是在 Cloudflare 這類可以免費託管網域名稱 DNS 的服務中，操作介面或許略有差異，但是操作方式及詞彙的使用都該差不多才是) 完成必要的 DNS CNAME 記錄設定，如果你的 DNS 託管服務不是 Cloudflare，請以你使用的服務的介面為準，重點是新增一筆正確的 CNAME 記錄。

1. 登入 Coudflare。

• 如果你已在 Cloudflare 託管多個網域名稱，請點擊要新增 DNS 記錄的網域名稱。

1. 點擊 DNS 圖示。

1. 新增一筆新的 CNAME 記錄，然後點擊 [Add Record]。因為我要新增的網址為 od.alexlion.me，而 DriveToWeb 指派給阿力獅在 OneDrive 儲存的 HTML 靜態頁面檔案的網域名稱為 zmpjnnbhfzdgeoto4g0bja-on.drv.tw，所以我該設定的方式如下所列；當你要設定的時候，請以你的設定值為準自行變化。

• 根據 DriveToWeb 服務的官方文件的說明，是要新增一筆 CNAME 記錄，所以必須在 [Type] (類型) 欄位將 A 記錄變更為 CNAME 記錄。
• 在 [Name] (名稱) 欄位中填入 od。
• 在 [Domain Name] (網域名稱) 欄位中填入 zmpjnnbhfzdgeoto4g0bja-on.drv.tw。
• 確認以上欄位的設定都正確無誤後，點擊 [Add Record] (新增記錄)。

依照以上設定，填入屬於你的設定值，DNS 的 CNAME 記錄就設定成功了。請注意，DNS 記錄生效的時間會受到許多因素影響，有可能會長達 24 到 72 小時才會生效，這代表你的這個使用 DriveToWeb 建置的 HTML 靜態頁面網站，是有可能在 72 小時之後才能以你設定的網址進行連線。如果確認 DNS 的 CNAME 設定正確無誤，請靜待 DNS 記錄生效。

阿力獅為這個 HTML 靜態頁面網站增加的其他修改

即使是做一個 HTML 靜態頁面示範網站，阿力獅也是很認真的，所以阿力獅有為這個 HTML 靜態頁面網站增加一點小修改。

• 首先，Google 早在多年前便強調網站都要安裝 SSL 憑證，讓使用者與網站間能使用 HTTPS 加密通訊協定進行連線，確保連線時的資料安全，所以阿力獅為了這個 HTML 靜態頁面網站透過 Cloudflare 加入 SSL 憑證。這點除了 DNS 得由 Cloudflare 託管並啟用相關設定外，還必須新增一筆 DriveToWeb 指定的 DNS 記錄。
• Android 版的 Chrome 瀏覽器在瀏覽這個網站時，網址列會有專屬色彩。

• 為了不因不同裝置瀏覽同一個網站產生裝置字型的差異，文字內容的字型改採網頁字型，便不會受到不同裝置本機字型的影響。這個網站使用了兩種網頁字型，分別是 Google 的 Noto Sans TC 黑體以及 cwTeX 的仿宋體。一般行動裝置上的本機字型應該都沒有仿宋體，所以效果相當明顯。

服務使用注意事項

DriveToWeb 是一個由台灣開發建立的免費網路服務，因此如果 DriveToWeb 因故停止服務，透過它建立的 HTML 靜態頁面網站當然就會消失，變回單純儲存在雲端儲存空間、可公開檢視的檔案而已。

如果你使用了 DriveToWeb 服務建置屬於你自己的 HTML 靜態頁面網站，請定期檢查網站是否存活[ref]要確認網站是否存活，有很多網路服務可以做到，不必自己每天檢查喔。[/ref]。

當然，如果你很喜歡這個簡單卻有效的網路服務，可以透過 PayPal 贊助 DriveToWeb 開發者。

結語

如果你有建置 HTML 靜態頁面網站的需求，而且還需要這個網站有自己的專屬網址，那 DriveToWeb 是一個不錯的選擇。首先，DriveToWeb 支援兩個雲端儲存空間都提供足夠的空間可以儲存 HTML 靜態頁面及相關檔案，而它也提供了為網站自訂網域名稱的方式，這對多數沒有特殊需求的使用者來說，是一個絕佳的免費選擇。

文章內容來源為《阿力獅的教室》。