扫描, 分享朋友圈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獲取這些資料並在前端完成渲染和展示。
如果你不知道如何往下，可以查看原始檔案。如果你在跟著教程完成的過程中遇到了困難，請給我留言。
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
