DropPages 三個步驟，打造專屬個人網站

發表時間：

Dropbox是目前網路上非常知名的雲端儲存服務，除了可以透過DropTunes化身成為雲端音樂平台，現在還可以透過DropPages，讓這個好用的雲端空間變成您的個人網站，不必再去申請有廣告的免費Hinet網頁空間，現在只要四個步驟，輕鬆讓您擁有個人網站，讓建置網站不再是一件困難的事情。

一般來說，架設一個網站需要找空間和網址，有了前兩者後，接著就是撰寫HTML，這樣才有辦法產出一個網頁，當然網頁做好後，還要透過FTP將您製作好的網頁上傳，多數使用者其實搞不太懂FTP是什麼？常常在這邊弄錯，因而感覺網站架設是一件很困難且複雜的事情，讓許多人對於網站架設卻步，但現在其實不用擔心了，網路上其實有很多快速架站的替代方案，只要幾個步驟就可以完成網站架設的動作。

《本文同步刊載於 密技偷偷報 No.57 》

想要透過DropPage快速打造個人網站，首先必須要有個Dropbox帳號，接著需要在電腦內安裝Dropbox同步軟體，最後即可透過DropPages輕鬆擁有自己的個人網頁，網址和空間通通包辦在裡面，還有免費的網頁模板可以下載，你只要負責提供內容，網站就可以輕鬆完成了。如果想要不一樣，可以按照DropPages的模板架構，自行修改CSS或是自己開發模板，就可以擁有一個與眾不同的個人網頁。做法非常簡單，官方上提到只要四個步驟，個人網站就可以完成。

步驟1：選擇一個合適的版型

目前，DropPages網站上提供三個基本的模板供大家使用，一開始我們可以從這邊挑選自己喜愛的版型，雖然可選項目不多，不過當我們熟悉DropPages的使用方式與版型架構後，未來自己也可以動手寫一個，寫得不錯也可以提供給DropPages與大家分享。

DropPages 三個步驟，打造專屬個人網站

 

步驟2：建立網站空間

當我們下載好版型後，接下來就是要在自己電腦內的Dropbox同步資料夾中建立網站目錄，未來只要將檔案丟進這個目錄，就會自動同步到您的DropPages網頁之中，完全不需要安裝FTP軟體，丟在自己電腦內，讓Dropbox同步軟體自動更新網頁內容就可以了，是不是覺得非常的簡單呢？

【註】請先安裝Dropbox用戶端軟體，才可以進行以下步驟。

第1步  首先請到您電腦內的Dropbox同步資料夾，在第一層目錄下建立一個資料夾，資料夾名稱請命名為「您的名稱.droppages.com」，這個未來將會成為您的網址。

【註】為了避免名稱與其他人衝突，建議您可以將您要命名的名稱拿到Google上搜尋看看，或是用瀏覽器直接拜訪該網址，看看有無網頁出現，如果沒有表示這個網址是可以使用的。

DropPages 三個步驟，打造專屬個人網站

第2步  當資料夾建立完成後，請在資料夾上點擊滑鼠右鍵選擇【Dropbox】→【Share this folder】。

DropPages 三個步驟，打造專屬個人網站

第3步  這時會跳到網頁版的Dropbox，請在「Invite collaborators to this folder」下方欄位輸入「[email protected]」邀請這個使用者來與你共享目錄。

【註】

「[email protected]」這個使用者是DropPages官方帳號，你必須邀請他，讓他有權限存取你的目錄，他才有辦法透過DropPages讓你的Dropbox目錄變成個人網站。

DropPages 三個步驟，打造專屬個人網站

第4步  當您邀請該帳號後，請您耐心等候DropPages官方審核，當審核通過後會寄信告知您已經可以開始使用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 三個步驟，打造專屬個人網站

DropPages的作法很特，它網頁不使用HTML檔案，而是全部使用純文字檔案，至於網頁編寫方法可以參考「Content」目錄下的「Sample syntax.txt」這檔案。

舉個例子，如果想要在首頁放一張圖片，作法如下：

  1. 首先在請在「/public」目錄下建立一個「images」資料夾，並將圖片放進去。
  2. 假設我們放入的圖片是JPG檔案，那圖片路徑應該是「/public/images/圖片名稱.jpg」這樣子。
  3.  如果想要在首頁插入圖片，請修改「/content/index.txt」，在裡面想插入圖片的位置擺上這個語法：「![another kitten](images/圖片名稱.jpg)」，這樣就會顯示囉！

圖片語法解說：「![another kitten](images/圖片名稱.jpg)」

  1. 「images」就是前方第一步驟命名的資料夾名稱，架設您命名的是「img」，那引用圖片語法則是「![another kitten](img/圖片名稱.jpg)」。
  2. 中括號內的名稱也就是「another kitten」可自訂名稱。但請注意，不論圖片是同一張，這個自訂名稱皆不允許重複，否則圖片無法正常顯示。

【註】DropPages語法使用說明：http://goo.gl/YPr4G

DropPages 三個步驟，打造專屬個人網站

網頁亂碼如何解決？

因為網頁撰寫是儲存為「.txt」檔案，所以修改時可以使用記事本進行修改，要新增頁面就新增一個新的記事本放到您要顯示的目錄，網頁撰寫規則可以參考版型內現有的頁面，至於目錄、txt檔案都可以使用中文命名(前台也同時會變成中文)，不過值得注意的是在檔案儲存時，記得注意檔案編碼問題，必須將網頁調整成「utf-8」編碼，才不會造成中文亂碼問題。

【註】如果您使用微軟記事本編輯，請注意存檔時，編碼要選擇【UTF-8】。

DropPages 三個步驟，打造專屬個人網站

如果您是使用NotePad++編輯網頁，別忘了點選【編碼】→【轉換至URF-8碼格式(檔首不含BOM)】再存檔即可，更詳細說明請參考：解決WordPress佈景亂碼問題。

【註】比起微軟記事本，香腸更推薦大家使用NotePad++修改網頁。

DropPages 三個步驟，打造專屬個人網站

 網站完成！

如果要徹底了解頁面和前台的關係，建議大家可以邊改邊透過瀏覽器查看自己網站的變化這樣會比看一堆文字還要更好理解。基本上這樣的作法雖然跟一般做網頁有落差(當然DropPages也吃一般HTML語法)，但是若是要做靜態的個人網站，其實算是一項非常方便的服務，只要透過建立幾個資料夾與文字檔案，網站其實很快就做出來了。

【註】範例網址：http://sofree.droppages.com/

DropPages 三個步驟，打造專屬個人網站