Advertisement
  1. Code
  2. Web Development
Code

Get Started Building Your Blog with Parse.js

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog with Parse.js: Working with Data
Final product image
What You'll Be Creating

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.

XAMPP website

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".

XAMPP - Manage Servers - 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!

Localhost when XAMPP is 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.

Add a new branch gh-pages

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

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.

Navigate into the Git repo folder you just cloned, create a simple index.html file, and just write Hello World in it.

Check your localhost and make sure it's working.

Localhost - hello world

Great. Then let's push it to GitHub.

Go to http://yourusername.github.io/reponame, give it a few minutes, and you will see your index.html is now live :)

GitHub Page - hello world

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.

Go ahead and register at Parse.com if you haven't done so. 

Parsecom website

Now, you have your data server in the cloud.

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. 

Put Bootstrap in 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.

Refresh and make sure it's working.

Add Bootstrap basic template

Step 3: Copy the Example Blog Template Over

Now, move on an open the example blog from Bootstrap: http://getbootstrap.com/examples/blog/

On the webpage, right click and choose "View Source". We want to copy all the content in <body> over to our index.html and replace the <h1>Hello, world!</h1> in the basic template.

Don't copy the <script> tags since we already have all the Javascript files we need.

You should now have this page:

Add example blog template

Step 4: Copy the Example Blog Style and Add It in index.html

Notice the styles are not right yet. That's because we need blog.css, the blog specific stylesheet built on top of bootstrap basic styles.

Go ahead and find it from the source code: http://getbootstrap.com/examples/blog/blog.css

Copy that file, and put in your blog/css folder.

Link it in index.html below bootstrap.min.css:

And now the styles should be right, and we have our static template ready.

Static template

Setup and Connect to the Parse Database

To make our static blog dynamic, we need to first setup it's own database on Parse.com.

Step 1: Create a New App

Go to Parse.com dashboard, and click "Create New App". 

Let's call it Blog for now.

Create a blog app on Parsecom

Once it's created, go to "Quickstart Guide - Data - Web - Existing project"

Parse Quickstart Guide

Step 2: Add Parse.js in index.html

Following the Quickstart Guide, add Parse.js to your index.html first. But instead of putting it in <head>, you can put it just below jQuery:

Step 3: Test Parse SDK

Moving on, create a blog.js under your blog/js folder with your Application ID and JavaScript key, and some test code. They all can be found in your Quickstart Guide:

Save it, and link this JavaScript file in your index.html, below bootstrap.min.js.

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

Success 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.

Parse Data Browser

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.