平時要丟個HTML網頁範例檔案，大家都會丟去哪邊呢？多數人作法都會去找Hinet免費網頁空間，但是這必須要有租Hinet網路才有得使用，對於使用第四台網路的使用者怎麼辦？其實我們有另外一個選擇，就是利用「Google Drive」雲端硬碟來打造專屬於自己的HTML網頁、網站，透過Google免費提供的5GB空間，就已經很足夠建置個人的網頁了。
Google Drive雲端硬碟的應用非常多，可以當成5GB免費檔案儲存空間，也可以用來放置文件、表單、免費圖片空間，應用的層面很廣，這回我們要透過Google Drive的檔案權限設定部分，讓文件可以公開存取，變成可以顯示在網路上的一個HTML靜態網頁，這個空間可以支援大部分的HTML語法，包含引入圖片、使用javascript或是jQuery等等，最適合拿來當展示網頁。
現在我們可以透過Google Drive雲端硬碟，可以讓我們上傳一些基本的網頁檔案，例如圖片、js、html等等的靜態網頁檔案，而且我們將網頁檔案分享權限設定為公開，這樣就可以讓網路上所有人直接存取你的檔案，瀏覽你的網頁了。或許透過Google Drive來建置網頁很不專業，不過我們可以將它當成第三方資源使用，例如丟一些網頁設計範例檔案在上面，透過雲端自動同步來做管理，本機電腦修改就會直接上傳到網路上了。
- 網站名稱：Google Drive
- 網站網址：http://drive.google.com
- 注意！Google將於2016年8月關閉檔案外聯服務，此方法可能會失效。推薦 Dropbox 外連。
第1步 首先來到Google Drive雲端硬碟網站，點選左上角﹝建立﹞→﹝資料夾﹞，我們透過一個專用的資料夾來管理我們的HTML網頁檔案。
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_1.png?resize=600%2C385&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第2步 接著請將資料夾命一個名稱，並點﹝建立﹞繼續。
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_2.png?resize=389%2C278&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第3步 當我們建立好後，請在該資料夾上點選右鍵，選擇【共用】裡面的【共用】設定。
【註】
其實香腸是先建立了一個資料夾叫做「網頁檔案」，然後才再建立「MyWeb」，這樣我可以在「網頁檔案」這個資料夾下面建立很多的網頁資料夾，便於管理。
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_3.png?resize=600%2C292&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第3步 這時請將該資料夾做權限變更，預設是私人，請點﹝變更﹞。
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_4.png?resize=600%2C349&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第4步 接著權限部分請設定【公開在網路上】，存取權部分，請設定為【可以檢視】，然後點﹝儲存﹞。
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_5.png?resize=595%2C431&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第5步 資料夾的建立與權限設定完成之後，請來到您的資料夾內，然後將已經做好的網頁拖曳上傳。
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_6.png?resize=600%2C304&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第6步 這時Google Drive雲端硬碟會問您是否上傳到這個共用資料夾，請點﹝上傳並共用﹞。
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_7.png?resize=394%2C227&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第7步 這時會問你檔案是否要轉格式，在此請不要轉換任何檔案，以確保網頁可以正常運作，請點﹝開始上載﹞。
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_8.png?resize=600%2C242&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第8步 當網頁上傳完畢後，右邊會顯示「已上載」。
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_9.png?resize=600%2C262&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第9步 接著請點選在你的網頁資料夾中的網頁檔案(html檔案)，使用滑鼠右鍵點一下，點【選擇開啟工具】→【Google雲端硬碟檢視器】。
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_10.png?resize=600%2C269&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第10步 這時候我們會看到網頁是檢視原始碼的，可能中文有亂碼，但這部分不用擔心，請再點﹝預覽﹞即可，
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_11.png?resize=600%2C377&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第11步 最後就會將網頁跳到公開頁面了，這就是HTML網頁呈現頁面，雖然網址很醜，不過我們可以透過Google縮網址服務，把網址變精簡。
![[教學]用Google Drive雲端硬碟建立HTML網頁](https://i0.wp.com/sofree.cc/wp-content/uploads/Google-DriveHTML_A3A3/gdrive_12.png?resize=600%2C409&quality=99&ssl=1 "[教學]用Google Drive雲端硬碟建立HTML網頁")
第12步 圖片外連測試，如下，所以也是可以外連的XD。
![[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？](https://i0.wp.com/sofree.cc/wp-content/uploads/2024/04/20240402230128_0.png?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？")
![[教學]如何申請台北捷運誤點證明？](https://i2.wp.com/sofree.cc/wp-content/uploads/2024/04/20240403164113_0.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何申請台北捷運誤點證明？")
![[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告](https://i0.wp.com/sofree.cc/wp-content/uploads/2023/06/20230620130326_57.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告")
![[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？](https://i2.wp.com/sofree.cc/wp-content/uploads/2023/11/20231103232630_0.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？")
![[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告](https://i0.wp.com/sofree.cc/wp-content/uploads/2023/06/20230620130326_57.jpg?fit=768%2C403&quality=99&ssl=1 "[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告")
可以上傳到openshift嗎?
可以
可是我該選擇哪一個Application?它裡面的選項中沒有HTML耶
純PHP空間應該可以，細節您可能再查一下資料，因為我已經好幾年沒碰囉
好的我試試
竟然真的不能用了
請問hinet提供的免費網頁，或是Dropbox，可以架設WordPress嗎？
無法。
9月了，竟然還能用？
版主,請問一下Google Drive 檔案外連功能將於 2016 年 8 月關閉,怎麼辦Q_Q
你可以改用 dropbox
https://sofree.cc/dropbox-pancake-io/
請問這個可以連結到自己專屬的網域名稱嗎?
此空間無法綁定自己的網址。
目前此方法不是很適合，因為他一直修改限制了
我是用Mac寫網站,但是是用DW寫的, 之後傳上去Gdrive, 結果網站打不開, 改成googledrive.com/host/(id)後, 打開網頁, 也只有圖檔而已, 怎會這樣呢？ 是因為ＧDrive不能支援寫網頁的軟體嗎？
但為何圖片未能顯示呢？
去頭去尾就是/*************/最大串的留著 /頭改https://googledrive.com/host/ 斜線尾包含斜線都刪掉!
更改網頁內容後再上傳.網址就會又改變了
你好，我是用photoshop cs6做好的網頁上傳到資料夾後，照你說的作，網址去頭去尾，可是網頁還是沒有欸好苦惱
如果真需要純HTML空間，可考慮Dropbox比較方便喔！
您好：請問第五步：
我在電腦製作好的網頁image及index.htm的內容，如何放到第五步圖示中左邊那兩個資料夾內，謝謝！
chrome 瀏覽器可以直接拖曳上傳，否則在網頁上點右鍵，應該也有提示上傳方式。
打勾→共用→複製網址<<是要從哪打勾
請參考下方訪客留言的教學，因為改版囉！
參考： http://sofree.cc/google-drive-html/#comment-1531526349
都參考過ㄌ 就是不知道要從哪裡打勾==
在要分享的網頁檔案上，點選右鍵→取得連結。
然後複製該連結，連結中有一個「id=」後面複製起來，然後最後砍掉「&」之後的字串，「&」本身也要刪除。這就是所需的部分了，參考一下其他人作法就可以。
如果還是不會，改天再來補一下教學！
會ㄌ謝謝 可是用Google怎搜尋不到我做的網頁 麻煩你ㄌ
正常，要收錄到應該不太容易，因為這不是正規的網站，比較適合當DEMO使用，不適合作正式網站營運。
知道ㄌ謝謝
有插入音樂的執行現在會沒有聲音了…
沒想到Google規則改好快。
一個可以用來交網頁作業的平臺就這樣消失了…Orz
那就改用dropbox看看囉！
不過要是多一點Js之類或是php就不能了吧
PHP 不能執行。
不好意思..
我的怎麼開都是原始碼..
http://goo.gl/tDb9CS
打勾→共用→複製網址
https://docs.google.com/file/d/0BxtfwksMeknOSHpTMUdmX29rVXc/edit
改成
https://googledrive.com/host/0BxtfwksMeknOSHpTMUdmX29rVXc
上傳網頁無法看到”預覽”功能後, 不知道該如何成功看到網址….
去頭去尾的介紹…有人成功過嗎?..因為我仍看不太懂這樣的方法怎麼使用…SORRY
打勾→共用→複製網址
https://docs.google.com/file/d/0BxtfwksMeknOSHpTMUdmX29rVXc/edit
改成
https://googledrive.com/host/0BxtfwksMeknOSHpTMUdmX29rVXc
google改版後~~沒有預覽這個選項了~~~那還能使用嘛~~~
http://gapps.csu.edu.tw/drive10.html
HTML的話
打勾→共用→複製網址
drive.google.com/file/d/0B75wDHn7xvXieU4zUDZpNzJUU0E/edit?usp=sharing
請去頭去尾，留下那串「0B75wDHn7xvXieU4zUDZpNzJUU0E」，然後改成這樣
googledrive.com/host/0B75wDHn7xvXieU4zUDZpNzJUU0E
要怎麼用??
急用
上有有使用者回應，您可以試試看~~~~
我也很好奇要怎麼使用
上有有使用者回應，您可以試試看!
感謝分享
第十步…沒有預覽這個選項呀…
可能改版了，最近Google狂改版啊!!! (哀嚎
所以要怎麼辦, 急!!!!!
您可以試試看： http://sofree.cc/google-drive-html/#comment-1531526349
您好:請問我雲端ㄉ網址不小心同步後從https://www.googledrive.com/變成https://1e08169864fd612b8a94d7fe95122d2612c1f57d.googledrive.com/這樣…請問要如何才能還原…
求救….
感恩…謝謝
不太清楚耶@@ 沒遇到過..
請問關於露天拍賣裡的關於我…要插入一張圖片…能用嗎…試了很久試不出來
不建議，因為Google Drive不適合大流量使用，
說不定用 http://sofree.cc/minus/ 還比較好，可是它連線稍慢。
您好，我想請問一下，為什麼我網站上的圖片看不到呢??是哪邊要設定呢??謝謝
網址：http://goo.gl/HDXAQS
圖片路徑問題 或者是 檔名中文。
您好，我把圖片也放在雲端資料夾裡面，那我的圖片路徑也要改成從雲端資料夾裡讀取??
另外，檔名部分不能中文??謝謝
我的目錄是
/img
/index.html
我的圖片插入的路徑就是：
您好，想請問~
以往可打開的現在卻不行了!
圖片都是放在images資料夾裡，index.html 程式裡圖片的位置沒有更改都是，有哪邊需要更改嗎? 它現在改版後都不知道從哪邊看網頁了>”<
要怎樣設定發布後的網址？？
他發布後網址，只能拿到那串很像亂碼的網址。
網址取得部分都如上面教學所說囉！
用IE瀏覽文字會變亂碼
網頁的編碼，請宣告使用UTF-8，不要沒有宣告或是使用big5，就不會有問題了。
Hello版大,我操作到第10.11步,我的頁面卻沒有出現.請問會是什麼原因??*_*
沒辦法取得 URL 嗎?
想請問板大，我把一個HTML放在Google drive空間，我跟朋友可以打開沒問題。
但是傳給一個在大陸的朋友她說打不開，不知道您是不是知道雲端硬碟在大陸是不是有被封鎖？
有解嗎？還是可以放在哪裡不被封
大陸應該是有封鎖。
只能翻牆才有解。
我爬文看到版大的說明受益良多
但似乎無法支援CSS或XHTML?
剛擺上去無法正常呈現CSS
我DEMO網頁內有寫一點基本的CSS，測試上是OK
請問放上去的網頁裡有含youtube內嵌語法 用google drive打開來卻顯示不出來 這有解嗎
可能無解哦…..
這對多層資料夾的網站支援度不佳，主頁面 <ID1>/index.html 子資料夾 <ID1>/images/XXX 的路徑會變成 <ID2>/XXX …… 單一資料夾的網站根本玩不大啊，殘念了orz
請問他這種架構，只能放單一網頁還是可以放多個網頁？
我上網找到別人的教學已經看懂了，跟你這篇有一點點不一樣，但是可以變成和一般空間那樣來使用了。
恩，不過我是把它當成範例空間的用法
其實剛我發現了新的應用方法了！那就是搭配協作平台，協作平台的網址雖然比較長，但後台設定似乎可以設定自己的網址？剛設定要等生效時候看看。
至於雲端硬碟的網頁，只要使用協作平台的HTML模式編輯，使用嵌入框架的模式就可以了。
不過用嵌入的方式，對搜尋優化較為不好
在協作平台那一個有嵌入的頁面，放上隱藏的關鍵字應該可以解決？
基本上不太建議就是了，框架的結構在搜尋上，主框沒啥資料，僅有框架內的東西才有資料，所以在搜尋上其實是會被拆開成一頁一頁。
謝謝版主的清楚說明,小妹受教不少.但有一不解.到第12步驟外連測試時,我不論長短網址都是出現原始碼頁面耶.是不是哪裡用錯了? 求救!求救~~~
你有沒有該網頁頁面網址???
哈~~真兩光,原來我用成原始碼的網址了.
再請問一問題,我要把網址用email寄給別人,可是我希望他看這封信時網頁已打開.不用再去點網址要怎麼設啊?
把網址複製下來不就可以寄信了 ?
小弟不才，想請教一下老大，我可以把自己寫好的模組用在google site(就是那自己弄的網頁上面嗎？），而且我發現上傳上去的index不能編輯。。。。麻煩解惑一下，非常感謝各位神人
你寫的模組? 不太懂哦
請把這空間當成html空間~~~ 他只能做基礎的html事情~~
我倒是希望他可以取代 Windows live writer
有困難啊!!!! (攤手)
免費SLL加密 xDDD
對XD
這個可以當ftp使用嗎?
別人可以上傳檔案嗎?
這個可以當ftp使用嗎?
別人可以上傳檔案嗎?
你可以下載他同步軟體~
這麼好用的東西~~怎麼能不分享呢!!
Wan-Ling Tsai 基本上問題全部解決的!!~~~YA!
這個不錯
我想請問~到最後預覽
我按圖片右鍵覆製影象
然後貼上奇摩拍賣
在編輯時圖片是有出現
可是按確定時圖片就完全沒出現
我不知是哪裡出了問題~可以告訴我嗎~
多謝回答喔
是否Yahoo不支援HTML語法？ 或是有擋掉某些連線？
又多一個空間設計網頁。
是阿~ 當測試用比較合適
「烤煙強」這個能夠阻擋機器人嗎？
可以
http://sofree.cc/quiz/
真的可以!! 太方便了!!!
是阿~ :D
烤煙強是甚麼意思呢?
請用台語唸~
外連測試的那張香腸圖片香腸好像變態 XD
哪有變態，你髒髒
用來做圖床似乎不錯.. ？
網站流量如果沒太可怕，OK的