4elements, web design and consultancy

Have you ever gotten excited by the idea of a web project, but found it miserable to make it run and work on a server? With Parse.js, everyone who understand the basics of HTML, CSS, and JavaScript can create dynamic websites and working web apps with ease.

In this tutorial, I will take you through the entire process of creating a blogging system with Parse.js from scratch. You will utilize all the bootstrapping tools, and really practice the idea of rapid prototyping, refactoring, and MVC framework. By the end of this series, you should be able to create any CMS site by yourself.

Though trying to be as detailed as possible, this tutorial does assume basic knowledge about HTML, CSS, JavaScript / jQuery, and GitHub. If you are not familiar with the aforementioned tools, there are lots of great tutorials here on Tuts+ that you can check out.

Setup the Development Environment

Let's get started by setting up our development environment. You will need a local testing server, a web server, a data server, and version control in place. As mentioned before, this tutorial requires no previous knowledge about the backend. I will take you through step by step. Feel free to skip this part if you already have those in place.

Step 1: Install XAMPP

After trying several different solutions, XAMPP is still the easiest way to setup a local test server I found. Therefore, I will use XAMPP as the local testing server in this tutorial.

If you haven't already, start by downloading XAMPP here. Choose the one that suits your system and install it.

I use Mac here so I will use that as the example from now on. If you use other operating system, the process should be pretty similar.

After you install it, Launch XAMPP, and start "Apache Web Server".

Now if you visit http://localhost/ in your browser, you should see this default XAMPP page. That means it's up and running!

Step 2: Create a New GitHub Page

Moving on, let's create a new git repo at GitHub. I call it blog just so it's short and clear to me. To make it work as a web sever, we need to set it as a GitHub Page.

First, add a new branch, gh-pages.

Then go to settings, set gh-pages as the default branch.

Great. Now let's get into the command lines, and clone that branch on GitHub into XAMPP's htdocs folder.

Step 3: Get Your Account on Parse.com

It's very easy to host static content on GitHub Page, but when it comes to the backend, things can get tricky with GitHub Page. Luckily, we now have Parse.js. We can use Parse.com as our data server and communicate with it JavaScript. In that way, we only need to host HTML, CSS, and JavaScript files on GitHub.

Bootstrap Static HTML Template

Now let's prepare a static version of the blog system we are going to make. To show you how fast you can bootstrap through this, I will just utilize the example blog template from Bootstrap. Again, if you are already pretty familiar with Bootstrap or you have a static website designed already, feel free to do it your way. If you are new to Bootstrap, follow along.

Step 1: Download Bootstrap

First, download Bootstrap (currently we are using version 3.2.0 here), unzip it, and put its content in your XAMPP/xamppfiles/htdocs/blog folder.

Step 2: Start With Bootstrap's Basic Template

Then, edit index.html to have the basic template of Bootstrap. It provides a basic HTML structure with links to bootstrap.min.css, bootstrap.min.js, and jquery.min.js. Starting with a template like this will save you a lot of time.

Now, refresh index.html on your localhost again, and you should be able to see this alert message:

That means now you are connected to your Blog database in the cloud

If you check your "Data Browser" on Parse.com now, you will see the TestObject you just created.

Conclusion

Today, we have set up all the servers we need: XAMPP as our local testing server, GitHub Pages as our web server, and Parse.com as our data server. We also have a basic blog template in place, and it's now connected to the database.

In the next session, I will teach you how to add blog posts from Parse's data browser, retrieve it with JavaScript, and render it on the front end.

Check the source file if you got stuck. And please leave a comment if you meet any difficulties following along.