Chinese (Traditional) (中文(繁體)) translation by Quill Qian (you can also view the original English article)

你是否曾經為自己絕妙的網站創意而感到興奮不已,卻發現將它部署到伺服器並讓它運行起來的過程苦不堪言?在Parse.js的幫助下,任何懂一點HTML,CSS和JavaScript的人都可以很容易地創建一個動態網站或是Web應用。
這個教程將會教你從零開始使用Parse.js搭建一個部落格系統。你將會使用到各種各樣的Bootstrap工具,並在整個過程中將快速反覆運算原型、重構以及MVC框架的思想付諸實踐。完成這一系列的教程之後,你應該可以能夠獨立搭建任何類型的CMS(內容管理系統)。
儘管我們將盡可能詳細地闡述各個步驟與可能遇到的問題,這篇教程假定讀者對於HTML、CSS、JavaScript/jQuery和GitHub有基本的瞭解。如果你對於上述工具不熟悉,可以查閱Tuts+上的相關教程。
設置開發環境
我們將從設置開發環境開始。你將需要一個本地測試伺服器、一個Web伺服器、一個資料伺服器和版本控制工具。如前文所述,這篇教程不需要讀者瞭解後端架構。我們將一步一步地教你來完成整個網站。如果你已經有了上述工具,可以跳過這一部分。
第1步 安裝XMAPP
在試用了幾種不同的解決方案之後,我發現用XAMPP來搭建本地測試伺服器是最方便的,因此這篇教程中我將使用XAMPP作為本地測試伺服器。
如果你還沒有XAMPP,可以根據你的作業系統從這裡下載相應版本並完成安裝。
我使用的是Mac OS,所以從現在起我將用它來演示。如果你使用的是其他作業系統,過程應該是相似的。
安裝完成後,啟動XAMPP,啟動"Apache Web Server".

現在如果你在流覽器中訪問http://localhost/的話你可以看到XAMPP的默認頁,這代表XMAPP已經成功啟動運行。

第2步 創建一個新的GitHub Page
現在讓我們在GitHub創建一個新的版本庫(repo)。為了簡潔好記,我把它命名為blog
。為了讓它能夠成為Web伺服器,我們需要把它設置為一個GitHub Page。
首先,添加一個叫gh-pages
的新分支。

然後進入設置面板,將gh-pages
設為預設分支。

好的,然後我們打開終端,使用命令列將GitHub上的分支複製到XAMPP的htdocs
資料夾中。
$ cd /Applications/XAMPP/xamppfiles/htdocs $ git clone https://your-git-HTTPS-clone-URL-here
打開剛才你複製了Git版本庫進去的資料夾,創建一個index.html
,然後在裡面寫入Hello World
。
$ cd blog $ echo 'hello world' > index.html
訪問你的localhost,確認網頁能夠正常顯示。

現在我們把它推送到GitHub上。
$ git add index.html $ git commit -am "Add index.html" $ git push
幾分鐘後,訪問http://yourusername.github.io/reponame你將可以看到你的index.html
出現在了上面:)

第3步 註冊Parse.js帳戶
GitHub Page能夠託管靜態頁面,但是並不能實現後端動態生成頁面。幸運的是,我們現在有了Parse.js。我們可以使用Parse.com作為我們的資料伺服器,並使用JavaScript與它進行通信。由此,我們只需要在GitHub上託管HTML,CSS和JavaScript文件。
G如果你沒有Parse.com帳號,請註冊一個。

現在,你已經在雲端擁有了自己的資料伺服器。
Bootstrap靜態HTML範本
現在,讓我們為要做的部落格系統準備一個靜態網頁的版本。為了讓大家能夠更輕鬆地完成整個教程,我直接使用了Bootstrap提供的部落格範本。如果你對於Bootstrap相當熟悉,或是已經有了一個設計完成的靜態網頁,你可以按照你自己的方式完成這一部分。如果你對於Bootstrap並不熟悉,可以按著教程繼續往下做。
第1步 下載Bootstrap
首先,下載Bootstrap(我們目前使用的版本是3.2.0),解壓後放到XAMPP/xamppfiles/htdocs/blog
資料夾下。

第2步 從Bootstrap基礎範本開始
將下麵給出的Bootstrap基礎範本複製到index.html
,這個範本包含了基本的HTML結構,並且引用了bootstrap.min.css
,bootstrap.min.js
和jquery.min.js
。從這樣的一個範本開始可以節約不少時間。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
刷新並確認網頁能夠正常顯示。

第3步 複製部落格範本示例
打開Bootstrap提供的部落格示範:http://getbootstrap.com/examples/blog/
在網頁上點擊右鍵,選擇"查看網頁原始程式碼". 我們需要將<body>
裡面的所有內容複製到我們的index.html
來替換掉基礎範本中的<h1>Hello, world!</h1>
。
請不要複製<script>
標籤裡的內容,因為我們已經有了我們所需要用到的所有JavaScript檔。
現在,你的頁面應當是這樣的:

第4步 複製示例部落格的樣式並加入到index.html中
你可能已經注意到頁面的樣式還沒有完全正確,那是因為我們還需要一個基於bootstrap基礎樣式編寫的樣式表blog.css
。
你可以在原始程式碼裡找到它:http://getbootstrap.com/examples/blog/blog.css
把檔複製到你的blog/css
資料夾下。
在index.html
中bootstrap.min.css
下面引用這個css:
<!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/blog.css" rel="stylesheet">
在樣式應該已經完全正確了。就此我們得到了我們所需要的靜態範本。

設置並連接到Parse資料庫
為了使我們的靜態部落格動態化,我們首先需要在Parse.com上為它建立一個資料庫。
第1步 創建一個新應用
打開Parse.com儀錶面板,點擊"Create New App"(創建新應用)。
我們現在把它取名為Blog
。

創建完成之後,點選"Quickstart Guide - Data - Web - Existing project"。

第2步 在index.html中引用Parse.js
根據速成指南,首先需要在你的index.html
中引用Parse.js
。不過你可以把它放在jQuery下面而不是<head>
裡面:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Parse.js --> <script src="//www.parsecdn.com/js/parse-1.2.19.min.js"></script>
第3步 測試Parse SDK
隨後,根據你的Application ID和JavaScript Key在你的blog/js
資料夾下創建一個blog.js
並填入一些測試代碼。你可以在速成指南中找到Application ID、JavaScript Key和測試代碼:
$(function() { Parse.$ = jQuery; // Replace this line with the one on your Quickstart Guide Page Parse.initialize("W8vTW6MTre3g0ScTeyPzqc6Uzj2KZoQ6GBv0j6ZC", "VVayP3EdZ6QH0QMttzpWgeJ2if4f2m8QjA10SaFQ"); var TestObject = Parse.Object.extend("TestObject"); var testObject = new TestObject(); testObject.save({foo: "bar"}).then(function(object) { alert("yay! it worked"); }); });
保存文件,然後在index.html
裡bootstrap.min.js
下方引用這一JavaScript文件。
<!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="js/blog.js"></script>
再次在你的localhost中刷新index.html
,這時你應該能夠看到這條彈框消息:

這代表你已經成功連接到了你在雲端的資料庫:)
這時如果你去查看Parse.com上你的"Data Browser"(資料流覽器)時,你可以看到你剛才創建的測試物件。

小結
到目前為止,我們搭建起了所需要的全部伺服器:XAMPP作為本地測試伺服器,GitHub Pages作為Web伺服器,Parse.com作為資料伺服器。此外,我們創建了一個基本的部落格範本,並且創建了與資料庫之間的連接。
在接下去的章節中,我們將會教你如何通過Parse提供的資料流覽器添加新文章,用JavaScript獲取這些資料並在前端完成渲染和展示。
如果你不知道如何往下,可以查看原始檔案。如果你在跟著教程完成的過程中遇到了困難,請給我留言。
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post