使用 Google Drive 建立網頁其實很簡單，做好執行的 HTML 檔(例如 index.html)，把所有相關的檔案(html/js/css/jpg)上傳後，網站就架設完畢了，而上傳檔案及獲得外連路徑的操作可參考「取得 Google Drive 外連路徑」系列文章。不過本篇要說明的是，操作 Google Drive 建構網頁的過程中，一些可能遇到、但鮮少被提及的狀況。同時藉由實際案例說明，更能瞭解操作要點。
一、某些檔案類型無法外連？
網頁內容的呈現需要靠 html 檔來執行，不過放在 Google Drive 的 html 內容使用外連路徑時，有一些匪夷所思的現象，以下來看實例──
1. HTML 檔內的 js 外連現象
這個狀況吃了不少苦頭才 debug 出來，例如以下的 html 內容：
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script>
alert(typeof jQuery)
</script>網頁引用 js 函式庫時，使用以上 CDN 網址的載入速度比較快(可參考「如何使用JQUERY版本」)。然而這個 html 檔的內容放在 Google Drive 執行後，我們會發現彈出提示方塊顯示 jQuery 為 "undefined" → 代表這個 js 檔根本沒有被載入。
這個結果一定讓人嚇一跳對吧？似乎得到的結論為，html 檔不可使用外連路徑，只能把這個外連的 jquery 檔上傳到 Google Drive 直接引用。
難道所有外部檔案都不可連結嗎？
2. PICASA 圖床可外連
如果說 html 檔不可使用外部連結，只能使用相對路徑，但是以下的 PICASA 外連圖檔路徑，卻又可以正常顯示：
<img src="http://4.bp.blogspot.com/-hMRDr2V-aXs/U1osx1KDYAI/AAAAAAAAJTM/Fa2-yAEaZkM/s1600/wfublog-anniversary.png"/>所以 PICASA 圖檔不受外連路徑的限制，js 會受到外連路徑的限制，這是目前得到的實驗證據。延伸出來的問題是，那麼哪些檔案類型可以外連、哪些又不能外連呢？
要搞清楚這個問題豈不得做上一整天的實驗，而且新的檔案類型源源不絕，為了省麻煩，最簡單的結論乾脆是，全部檔案都上傳到 Google Drive 最保險，對吧？
3. HTML 檔內的正確 js 外連方式
這件事是無意中發現的，剛好可以為這個主題下個定論，js 其實是可以外連的，請見以下範例：
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script>
alert(typeof jQuery)
</script>當把外連路徑 "http:" 給去掉後，剩下相對路徑網址，執行的結果彈出提示方塊顯示 jQuery 為 "function" → 代表這個 js 檔被成功載入。
這是個奇怪又無奈的結論：Google Drive 的 html 檔內容，外連路徑記得要去除 "http:" 字串，以確保能執行正常。
二、拖曳檔案上傳
Google Drive 支援拖曳的方式上傳檔案，這個功能讓建立網頁格外方便。
1. 拖曳檔案
基本上使用瀏覽器比較新的版本，從檔案總管選取要上傳的數個檔案後，就能直接拉進 Google Drive 來上傳，WFU 在各大瀏覽器都能執行成功，如 Chrome、FireFox、IE、Opera。
2. 拖曳資料夾
但是要建構網站，不可能只上傳幾個檔案而已，可能還需要同時上傳好幾個資料夾(目錄)。但是在檔案總管選取多個資料夾、以及多個檔案後，拖曳到 Google Drive 時，會顯示錯誤訊息，告訴我們瀏覽器不支援這項功能。
原來拖曳資料夾上傳的功能，目前只有在 Chrome 家族的瀏覽器有支援，包含新版 Opera(瀏覽器核心跟 Chrome 是一樣的) 也有支援。但是 FireFox 以及 IE，則無法拖曳資料夾上傳，這一點需要特別注意。
3. 小遊戲網頁製作範例
本站會員中心的「小遊戲區」，有一些免費的 open source (開源)遊戲，出自開源平台 Github，例如這個「突擊! 競技場」的 source code 放在這裡：
右手邊有個「Download ZIP」按下後可下載打包好的 zip 檔，解開後會有數個資料夾及檔案，全部拖曳到 Google Drive 就完成了第一步。
接著資料夾 "htdocs" 裡面有個 "index.html" 檔案，利用「取得 Google Drive 外連路徑」來取得路徑後，例如放在我的 Google Drive 路徑為：
把這個連結貼到瀏覽器網址試試看，是不是就能玩這個遊戲了呢？用 Google Drive 建立網頁就是這麼簡單。
4. 其他範例
例如安裝著名的 fancybox 燈箱外掛，也可以用拖曳資料夾的方式，迅速把所有相關檔案上傳到 Google Drive，請參考：
三、Google Drive 有流量限制
Google Drive 雖然好用，但並非架設網站的萬靈丹，是有流量限制的：
如果網站想保持正常運作，不想三不五時讓訪客開啟不了網站，那麼網站最好別架設在 Google Drive、Dropbox 等這些免費空間。
如果沒有特殊需求的話，"網站" 可以架設在 Blogger 這樣的部落格平台，以確保沒有流量的問題、也不必擔心駭客。而個別功能的 "網頁"，則可以架設在 Google Drive，例如上一點舉例的「小遊戲」頁面。
這麼做的好處是，小遊戲、個別頁面或許會因為流量太大而暫時失效，但網站主體不至於被流量限制而開天窗，給予訪客不好的印象。因此結論是，Google Drive 只適合放置 "網頁"、而非架設 "網站"。
四、編輯 Google Drive 檔案__Editey
以上三件事是比較重要的概念，而這一項算是補充的心得。上傳到 Google Drive 的檔案有時需要修改內容，如果頻率高的話，重複刪除、上傳的這些步驟也是挺累贅的。如果 Google Drive 能有線上編輯功能的話，就能節省很多作業流程。
「Editey」正是一個解決這類需求的線上服務，可以直接編輯 Google Drive 的 HTML/JS/CSS 檔案內容，讓我們不需再為了一點小小的修改而重複許多動作。
如果只有編輯部分檔案格式需求的話，也可以安裝個別的 Chrome 套件就好：
- HTML 檔：https://chrome.google.com/webstore/detail/html-editey/jgmngefpkkgnhkgffnldnpinipphceob
- JS 檔：https://chrome.google.com/webstore/detail/javascript-editey/hkihmgfcedmdoaogcjdljeeacngbhinc
- CSS 檔：https://chrome.google.com/webstore/detail/css-editey/ehcpkbhefjnefdkdoaahbafdohheeidn
- XML 檔：https://chrome.google.com/webstore/detail/xml-editey/liglgghpccflcebckjdmiplgjbicachl
相信讀者有了本篇的這些技巧，駕馭 Google Drive 網頁都能得心應手。
Google Drive 相關文章：