Disclaimer:This Uses JavaScript, but even if you don’t know JavaScript, copy-paste the below JavaScript code in the given order and according to the given instructions. Trust me it Works !!!

Why Use This ?

If you are a web developer and you want to create a small and lightweight personal blog then installing a Content Management System (CMS) on a web-host seems too much hassle for a blog of that scale.

With this pieces of code you can create a lightweight blog with little tweaks in your HTML code.

HTML Code

<p>

Pages

<a onclick=”disp(1)” href=”javascript:void(0);”>1</a> -

<a onclick=”disp(2)” href=”javascript:void(0);”>2</a> -

.

.

.

.

</p> <div id=”posts”></div>

The div with id=”posts” will display the results.

And the <p> tag displays the below navigation bar

Blog Storage File

Create a text file on your server and write your blogs on it.

I am using “?separator?” as a separator between blogs.

<h1>Blog 1</h1>

<p>This is blog 1</p>

?separator? <h1>Blog 2</h1>

<p>This is blog 2</p>

?separator? .

.

.

(You got the idea right? )

JavaScript Code

Now it’s time for the real meat.

1.Define Global variables

var file = "blogs.txt"; //Location and Name of the file where blogs are stored

var bps = 5; //Blogs Per Page

var separator = "?separator?"; //String the separates every blog on a page

2. Write the main Display function

function disp(x){

var XHR = new XMLHttpRequest();

var str;

XHR.open("GET", file, true);

XHR.send();

XHR.onreadystatechange = function() {

if(XHR.readyState === 4 && XHR.status === 200){

var arr = XHR.responseText.split(separator);

document.getElementById('posts').innerHTML ="";

for(var i = 0; i < bps; i++)

if(typeof(str = arr[((x-1)*bps)+i]) !== 'undefined')

document.getElementById('posts').innerHTML += str;

}

}

}

This function edits the div with id=”posts” according to the global variables, when the links on the navigation bar are clicked.

3.Startup Error Handling

The page will be blank when page loads, hence use the below snippet to avoid it.

window.onload = function(){disp(1);};

Conclusion

This is the easiest way of creating a blog which is :