扫描, 分享朋友圈Chinese (Simplified) (中文（简体）) 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
