Dropbox是目前網路上非常知名的雲端儲存服務,除了可以透過DropTunes化身成為雲端音樂平台,現在還可以透過DropPages,讓這個好用的雲端空間變成您的個人網站,不必再去申請有廣告的免費Hinet網頁空間,現在只要四個步驟,輕鬆讓您擁有個人網站,讓建置網站不再是一件困難的事情。
一般來說,架設一個網站需要找空間和網址,有了前兩者後,接著就是撰寫HTML,這樣才有辦法產出一個網頁,當然網頁做好後,還要透過FTP將您製作好的網頁上傳,多數使用者其實搞不太懂FTP是什麼?常常在這邊弄錯,因而感覺網站架設是一件很困難且複雜的事情,讓許多人對於網站架設卻步,但現在其實不用擔心了,網路上其實有很多快速架站的替代方案,只要幾個步驟就可以完成網站架設的動作。
《本文同步刊載於 密技偷偷報 No.57 》
想要透過DropPage快速打造個人網站,首先必須要有個Dropbox帳號,接著需要在電腦內安裝Dropbox同步軟體,最後即可透過DropPages輕鬆擁有自己的個人網頁,網址和空間通通包辦在裡面,還有免費的網頁模板可以下載,你只要負責提供內容,網站就可以輕鬆完成了。如果想要不一樣,可以按照DropPages的模板架構,自行修改CSS或是自己開發模板,就可以擁有一個與眾不同的個人網頁。做法非常簡單,官方上提到只要四個步驟,個人網站就可以完成。
- 網站名稱:DropPage
- 網站網址:http://droppages.com/
步驟1:選擇一個合適的版型
目前,DropPages網站上提供三個基本的模板供大家使用,一開始我們可以從這邊挑選自己喜愛的版型,雖然可選項目不多,不過當我們熟悉DropPages的使用方式與版型架構後,未來自己也可以動手寫一個,寫得不錯也可以提供給DropPages與大家分享。
步驟2:建立網站空間
當我們下載好版型後,接下來就是要在自己電腦內的Dropbox同步資料夾中建立網站目錄,未來只要將檔案丟進這個目錄,就會自動同步到您的DropPages網頁之中,完全不需要安裝FTP軟體,丟在自己電腦內,讓Dropbox同步軟體自動更新網頁內容就可以了,是不是覺得非常的簡單呢?
【註】請先安裝Dropbox用戶端軟體,才可以進行以下步驟。
第1步 首先請到您電腦內的Dropbox同步資料夾,在第一層目錄下建立一個資料夾,資料夾名稱請命名為「您的名稱.droppages.com」,這個未來將會成為您的網址。
【註】為了避免名稱與其他人衝突,建議您可以將您要命名的名稱拿到Google上搜尋看看,或是用瀏覽器直接拜訪該網址,看看有無網頁出現,如果沒有表示這個網址是可以使用的。
第2步 當資料夾建立完成後,請在資料夾上點擊滑鼠右鍵選擇【Dropbox】→【Share this folder】。
第3步 這時會跳到網頁版的Dropbox,請在「Invite collaborators to this folder」下方欄位輸入「[email protected]」邀請這個使用者來與你共享目錄。
【註】
「[email protected]」這個使用者是DropPages官方帳號,你必須邀請他,讓他有權限存取你的目錄,他才有辦法透過DropPages讓你的Dropbox目錄變成個人網站。
第4步 當您邀請該帳號後,請您耐心等候DropPages官方審核,當審核通過後會寄信告知您已經可以開始使用DropPages建置網站了。(香腸大概等了兩天才收到開通信件。)
如何自訂網址?
如果有網址概念的使用者,或許會想說我是否可以自己用自己的網址當成網站網址,而不要使用「你的名稱.droppages.com」當成網址呢?其實這想法是很好的,做一個網站能夠擁有自己的網址當然是最好的。
如果您有自己的網址,那就在建立資料夾時,輸入「你的網址」,例如香腸輸入「im.sofree.cc」,然後一樣將目錄分享給「[email protected]」,並且等待回應。這時,您還需要額外一個動作,您必須到您自己的網址DNS代管站,加入一筆型態為「CNMAE」的紀錄,紀錄的內容請輸入「server1.droppages.com」等待對應即可。當網址對應到,而且服務開通就可以使用囉!
步驟3:開始建置網站
當您帳號審核通過後,接下來我們就可以開始建置網站了。現在先將您剛剛下載好的版型解壓縮,之後會的到三個目錄,分別是「Content」、「Public」和「Template」,將此三個目錄放到您剛剛在「Dropbox」目錄下方,當初目錄的圖案出現綠色勾勾時,表示目錄已經被同步到伺服器上,表示網頁已經上傳了,這時您可以拜訪您的網站網址「http://您的名稱.droppages.com」。
至於網站的目錄架構如下圖,「Content」是屬於網站內容部分,「Public」資料夾內是放CSS、JS引入檔案。「Templates」則是網頁版型部分。
DropPages的作法很特,它網頁不使用HTML檔案,而是全部使用純文字檔案,至於網頁編寫方法可以參考「Content」目錄下的「Sample syntax.txt」這檔案。
舉個例子,如果想要在首頁放一張圖片,作法如下:
- 首先在請在「/public」目錄下建立一個「images」資料夾,並將圖片放進去。
- 假設我們放入的圖片是JPG檔案,那圖片路徑應該是「/public/images/圖片名稱.jpg」這樣子。
- 如果想要在首頁插入圖片,請修改「/content/index.txt」,在裡面想插入圖片的位置擺上這個語法:「」,這樣就會顯示囉!
圖片語法解說:「」
- 「images」就是前方第一步驟命名的資料夾名稱,架設您命名的是「img」,那引用圖片語法則是「」。
- 中括號內的名稱也就是「another kitten」可自訂名稱。但請注意,不論圖片是同一張,這個自訂名稱皆不允許重複,否則圖片無法正常顯示。
【註】DropPages語法使用說明:http://goo.gl/YPr4G
網頁亂碼如何解決?
因為網頁撰寫是儲存為「.txt」檔案,所以修改時可以使用記事本進行修改,要新增頁面就新增一個新的記事本放到您要顯示的目錄,網頁撰寫規則可以參考版型內現有的頁面,至於目錄、txt檔案都可以使用中文命名(前台也同時會變成中文),不過值得注意的是在檔案儲存時,記得注意檔案編碼問題,必須將網頁調整成「utf-8」編碼,才不會造成中文亂碼問題。
【註】如果您使用微軟記事本編輯,請注意存檔時,編碼要選擇【UTF-8】。
如果您是使用NotePad++編輯網頁,別忘了點選【編碼】→【轉換至URF-8碼格式(檔首不含BOM)】再存檔即可,更詳細說明請參考:解決WordPress佈景亂碼問題。
【註】比起微軟記事本,香腸更推薦大家使用NotePad++修改網頁。
網站完成!
如果要徹底了解頁面和前台的關係,建議大家可以邊改邊透過瀏覽器查看自己網站的變化這樣會比看一堆文字還要更好理解。基本上這樣的作法雖然跟一般做網頁有落差(當然DropPages也吃一般HTML語法),但是若是要做靜態的個人網站,其實算是一項非常方便的服務,只要透過建立幾個資料夾與文字檔案,網站其實很快就做出來了。
【註】範例網址:http://sofree.droppages.com/
感謝分享我想請問一下~~
如果我已經架設好網站嘞~~
但是為何我用一班搜尋都搜尋步道我的網站一定要用打網址的~~
想說要去申請DNS代管可是我又不知道dropbox的IP~~
求大大給我個解!! 感謝你
dropbox 不支援直接綁訂。
可以透過第三方解決:https://sofree.cc/dropbox-doamin-pancake/
感謝您的分享
可是我在第二步驟 就找不到dropbox的個選項了??
當資料夾建立完成後,請在資料夾上點擊滑鼠右鍵選擇【Dropbox】→【Share this folder】。
抱歉打擾了
目前,如果要用dropbox架站,或許可以考慮:https://sofree.cc/dropbox-pancake-io/
droppage是否可以放置sitemap.xml,讓網站蜘蛛搜尋呢?
印象中應該無法。
我架好了網站,但是好像使用一段時間之後,無法在更新內容了,不知道原因何在?我的網站 http://linshen.droppages.com
是不是有使用期限在裡面。
是不是授權時間超過了? 因為我後來就沒使用了@@
I mean that my droppages web-site”base.html”could not update after you had edited,it’s still left in the old”base.html”.And more Forum same had this request post….
isn’t droppages was step down from Dropbox,please help….thanks….
可以使用正體中文嗎….. 對英文不是很熟悉XDD
於2014年droppages網頁
你更新既html,[email protected]吾會再同你更新網頁啦,因佢已死左
dropbox仍正常使用(包括加減資料、擴容量)
看不太懂方言…@@
請問他支援PHP跟資料庫連結嗎?
不支援,若想要支援可能要找一下虛擬主機喔
我們家虛擬主機有拉~ http://achang.tw/#hosting
請問droppages的網路空間….可以使用adobe的dw網頁編輯上傳嗎?
請問使用Dropbox的空間….有辦法上傳Dreamweaver編排的內容嗎?
我也想知道!
想請問香腸大 關於header的部分要怎麼修改? (就是範例網站中的 “香腸DropPages測試站” )
我是使用 Ocean Mist這個template, 到\templates\default.html 去修改 header
但是一直沒看到效果, 不曉得是哪個環節 有問題?
(是存檔格式嗎? 我有試過編碼用 UTGF-8 但仍然不行)
還請大大指教了 謝謝!!!
這您可能要自己再嘗試了,我之後就沒再用它了 :P
因为喜欢Dropbox,所以转了这篇文章。收到香肠的留言后我删了原文给了个链接,抱歉!
对了,香肠大,咱是你的忠实粉丝哦
香腸大
我有寫一篇文
也是有關於DropBox的文章
網址: http://www.softhard.web44.net/?p=76
(非常簡單)
哈哈,我幾分鐘就收到了:)
哇!好簡單啊!
我的網站:http://www.softhard.web44.net
Lifefa585898
相當簡潔的架站方式
請問香腸大
那如果網址是 您的名稱.droppages.com
那之後還有辦法改過嗎??
我這邊看是沒辦法更改,但照理來講應該可以,大概是我找不到設定的位置,在不然就是真的無法修改囉
感覺相當的實用!!
感謝分享!