Dropbox 的應用非常多，這回來分享一下透過「Pancake.io」建立最基本的HTML網頁空間利用。讓免費2GB儲存空間瞬間變成2GB免費HTML空間還支援SSL(HTTPS)網頁、還可以綁定網址。2GB空間不算多，但是Dropbox總有一些活動或者是購買特定手機或服務都會贈送免費空間，或者是真的需要覺得不錯也可以花錢購買Dropbox付費方案來使用。

透過Dropbox搭配Pancake.io現在也能呈現HTML網頁，讓你不再苦於尋找穩定的免費空間，現在Dropbox就現成免費給你用。不過使用這種雲端儲存空間有一個要點需要注意，網站的流量不能太大，若網站流量過大可能帳號會被暫停或者是永久停權等狀況發生的可能，所以簡易的網頁DEMO，像是你可能用jQuery做了一些網頁特效藥呈現範例檔案給大家，可以善用Dropbox+Pancake.io。

Dropbox的第三方服務應用非常多，我們介紹過自動備份WordPress到Dropbox、Dropbox代抓服務、MultCloud雲端空間大串聯、DropPages打造個人網站等相關應用。但這回我們要來回歸基本面，利用Dropbox本身的「public」公開分享功能，把你製作好的網頁丟到Dropbox上，成為一個可以預覽的網頁，有時候學校要交作業、要DEMO網頁，都可以利用這樣來呈現，不用苦惱找不到免費空間。

前一陣子，大家瘋狂使用Google Drive雲端硬碟做為純網頁HTML空間，但是Google大神總愛修改規則，導致於後期根本無法正確地透過Google雲端硬碟來當HTML空間，原因在於Google會修改網址造成若有引用其他檔案資源，網頁的特效可能無法呈現的諸多問題，現在慮用最簡單的Dropobx就可以滿足你的需求，立刻把網頁輕鬆DEMO給大家看。

香腸原先要介紹Dropbox的公開資料夾功能，後來發現網站上已經在2012年做了聲明：

自 2012 年 10 月 4 日起，新建立的 Dropbox 帳戶不再擁有公開資料夾。別擔心，您可以透過分享連結與好友和同事快速分享檔案，就算他們沒有 Dropbox 也沒關係。

如果您帳號為該時間之前註冊，那麼你還是可以擁有公開資料夾功能。如果在該時間之後，資料夾就無法當成網頁空間只能變成dropobx檔案清單。為了滿足很多人在Google Drive或Dropbox上尋找免費空間的需求，香腸找到了「Pancake.io」這個服務可以來做搭配，只要透過授權認證，即可把Dropbox的2GB當成免費網路空間。

• 網站名稱：Pancake.io
• 網站網址：https://www.pancake.io/
• 尚未擁有Dropbox，可以直接註冊Dropbox或者是參考Dropbx註冊教學。
• 此服務還可以幫Dropbox 設定專屬網址

第1步 來到PANCAKE網站，這個網站提供git串接和Dropbox串接，不過我們先選擇比較平民化、簡單的Dropbox。執行串接之前，先點右上角﹝Sign up﹞進行註冊。

第2步  直接輸入你想要註冊的信箱和密碼(不是Dropbox信箱密碼，別輸入錯了)。

第3步  註冊完畢後點選左上【Projects】，進入後點﹝+ Create a new prokect﹞建立一個新專案。

第4步  Pancake.io網站提供Dropbox和Git串接，我們選擇【Dropbox】，然後點下﹝+ create﹞。

第5步  這時會跳轉到Dropbox的授權網頁，如果需要登入Dropbox請直接登入，之後會看到以下畫面，請點選﹝允許﹞讓Pancake.io網站可以存取應用程式內的Pancake.io資料夾。

第6步  這時又會回到Pancake.io網站，請再次點﹝+ Create a new prokect﹞。

第7步  再次選擇【Dropbox】然後點下﹝+ create﹞。

第8步  這時候Pancake網站就會自動幫您建好一個新專案，預設會幫您塞入兩個範例檔案，example和index。

第9步  點選【Settings】進入後可以調整專案的名稱與此專案的網址，然後點下右下角﹝Update project﹞。

• Name：專案名稱，香腸測試輸入中文會異常，那就改輸入英文吧！
• Subdomain：Pancake免費提供的次級網域，直接輸入您想要的名稱。
• URL：可以綁定自己的網址。
• Favicon：網址列的小圖。
• Root folder：網站根目錄，可以保持預設。

第10步  點選【Files】回到專案內的檔案清單，您可以點﹝edit﹞就可以直接在pancake網站進行編輯。這兩個DEMO檔案早已經存在你的Dropbox空間囉！

第11步  這是線上提供的編輯器，有儲存(Save)、儲存為(Save As…)、預覽(Preview)、幫助(Help)等基本功能，預設這個是Markdown撰寫方式，當然您也可以建立純html檔案(詳細可參考官方說明)。

第12步  這是官方的預設index.txt於網頁顯示出來的樣子。

測試網址：http://sofree.pancakeapps.com/

第13步  你可以登入你的Dropbox後，找到「Dropbox>應用程式>Pancake.io」，這邊可以直接把你做好的網頁直接拖曳檔案上來，測試後可以支援js、html、css等基本純HTML網頁檔案。例如香腸拉了一個「blogroll」資料夾，等待上傳完畢即可。

第14步  上傳後，來試試看網頁，是不是就順利讀取到檔案了呢？

測試網址：http://sofree.pancakeapps.com/blogroll

第15步 上傳的HTML檔案也可以在Pancake網頁中做線上編輯，當然您也可以在本地安裝dropbox進行同步編輯，也是不錯的選擇。

Dropbox 透過Pancake.io即可活化成純免費HTML空間，讓你不需要苦於尋找免空，透過他就可以輕鬆擁有。不過小網站、測試站可行，但是大網站建議您還是尋求付費主機空間比較恰當。另外，此服務也能搭配自訂網域，幫你的Dropbox綁上自己專屬的個人網域！

相關文章

[教學]如何領取TPASS 悠遊卡補助100元？

[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？

[教學]如何申請台北捷運誤點證明？

菲律賓遊學攻略｜語言學校太多難以抉擇？看這篇就對了！

免用Photoshop！Adobe Express 免費線上圖片裁切服務

免註冊帳號！ChatGPT 開放免費使用並且無任何限制！

[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？

[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告

Line Mobile 月租24元！中華電信隱藏資費方案(附邀請碼+申請教學)