[教學]用Google Drive雲端硬碟建立HTML網頁

平時要丟個HTML網頁範例檔案,大家都會丟去哪邊呢?多數人作法都會去找Hinet免費網頁空間,但是這必須要有租Hinet網路才有得使用,對於使用第四台網路的使用者怎麼辦?其實我們有另外一個選擇,就是利用「Google Drive」雲端硬碟來打造專屬於自己的HTML網頁、網站,透過Google免費提供的5GB空間,就已經很足夠建置個人的網頁了。

Google Drive雲端硬碟的應用非常多,可以當成5GB免費檔案儲存空間,也可以用來放置文件表單免費圖片空間,應用的層面很廣,這回我們要透過Google Drive的檔案權限設定部分,讓文件可以公開存取,變成可以顯示在網路上的一個HTML靜態網頁,這個空間可以支援大部分的HTML語法,包含引入圖片、使用javascript或是jQuery等等,最適合拿來當展示網頁。


現在我們可以透過Google Drive雲端硬碟,可以讓我們上傳一些基本的網頁檔案,例如圖片、js、html等等的靜態網頁檔案,而且我們將網頁檔案分享權限設定為公開,這樣就可以讓網路上所有人直接存取你的檔案,瀏覽你的網頁了。或許透過Google Drive來建置網頁很不專業,不過我們可以將它當成第三方資源使用,例如丟一些網頁設計範例檔案在上面,透過雲端自動同步來做管理,本機電腦修改就會直接上傳到網路上了。

第1步  首先來到Google Drive雲端硬碟網站,點選左上角﹝建立﹞→﹝資料夾﹞,我們透過一個專用的資料夾來管理我們的HTML網頁檔案。

[教學]用Google Drive雲端硬碟建立HTML網頁

第2步  接著請將資料夾命一個名稱,並點﹝建立﹞繼續。

[教學]用Google Drive雲端硬碟建立HTML網頁

第3步  當我們建立好後,請在該資料夾上點選右鍵,選擇【共用】裡面的【共用】設定。

其實香腸是先建立了一個資料夾叫做「網頁檔案」,然後才再建立「MyWeb」,這樣我可以在「網頁檔案」這個資料夾下面建立很多的網頁資料夾,便於管理。

[教學]用Google Drive雲端硬碟建立HTML網頁

第3步  這時請將該資料夾做權限變更,預設是私人,請點﹝變更﹞。

[教學]用Google Drive雲端硬碟建立HTML網頁

第4步  接著權限部分請設定【公開在網路上】,存取權部分,請設定為【可以檢視】,然後點﹝儲存﹞。

[教學]用Google Drive雲端硬碟建立HTML網頁

第5步  資料夾的建立與權限設定完成之後,請來到您的資料夾內,然後將已經做好的網頁拖曳上傳。

[教學]用Google Drive雲端硬碟建立HTML網頁

第6步  這時Google Drive雲端硬碟會問您是否上傳到這個共用資料夾,請點﹝上傳並共用﹞。

[教學]用Google Drive雲端硬碟建立HTML網頁

第7步  這時會問你檔案是否要轉格式,在此請不要轉換任何檔案,以確保網頁可以正常運作,請點﹝開始上載﹞。

[教學]用Google Drive雲端硬碟建立HTML網頁

第8步  當網頁上傳完畢後,右邊會顯示「已上載」。

[教學]用Google Drive雲端硬碟建立HTML網頁

第9步  接著請點選在你的網頁資料夾中的網頁檔案(html檔案),使用滑鼠右鍵點一下,點【選擇開啟工具】→【Google雲端硬碟檢視器】。

[教學]用Google Drive雲端硬碟建立HTML網頁

第10步  這時候我們會看到網頁是檢視原始碼的,可能中文有亂碼,但這部分不用擔心,請再點﹝預覽﹞即可,

[教學]用Google Drive雲端硬碟建立HTML網頁

第11步  最後就會將網頁跳到公開頁面了,這就是HTML網頁呈現頁面,雖然網址很醜,不過我們可以透過Google縮網址服務,把網址變精簡。

[教學]用Google Drive雲端硬碟建立HTML網頁

第12步 圖片外連測試,如下,所以也是可以外連的XD。

Google Drive 圖片外連