使用Parse.js搭建自己的部落格

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

Final product image — What You'll Be Creating

你是否曾經為自己絕妙的網站創意而感到興奮不已，卻發現將它部署到伺服器並讓它運行起來的過程苦不堪言？在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".

XAMPP - Manage Servers - Start 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獲取這些資料並在前端完成渲染和展示。

如果你不知道如何往下，可以查看原始檔案。如果你在跟著教程完成的過程中遇到了困難，請給我留言。

使用Parse.js搭建自己的部落格

設置開發環境

第1步 安裝XMAPP

第2步 創建一個新的GitHub Page

第3步 註冊Parse.js帳戶

Bootstrap靜態HTML範本

第1步 下載Bootstrap

第2步 從Bootstrap基礎範本開始

第3步 複製部落格範本示例

第4步 複製示例部落格的樣式並加入到index.html中