How to Host your blog on Dropbox ?

February 10, 2012

in Featured,HowTo,Tutorials

Haven’t heard about dropbox yet ? Dropbox is a cloud storage service where you can host or backup your files online for free. It provides you 2GB of free space which is so secure, fast and you can access your saved files from anywhere, anytime through any PC, smartphone etc. One of the best inventions in the tech scene, dropbox. We had told alot of dropbox related stuff such as Dropbox clone with 10GB space, dropbox encryption, etc.

Today we are going to see how to host your website using Dropbox as your backend hosting. Yes, you can host or create a blog with dropbox completely. As the files are stored in the cloud with fast and secure access, your blog hosted on dropbox will be cool, isn’t it ? Let’s check out how to create your blog hosted on dropbox. For a geek, its a clever combination of hosting a simple personal blog hosted in a cloud storage service.

Before we get into the step by step instructions on how to host your blog on the dropbox, let me clear you few details. Don’t except something like a WordPress blog hosted on dropbox, this isn’t similar. It’s more like a personal blog or personal web page hosted on Dropbox. Not a high traffic blog, certainly a personal blog which consumes less bandwidth and traffic.

This process involves a third party tool called Scriptogr.am – which helps to fill the gap between hosting the files on dropbox and creating a front end user interface of a blog. It combines the technology of Markdown with servers of Dropbox and has the effect of allowing you to host your own blog without cost. But what’s it all about?

Scriptogr.am uses Markdown, a lightweight markup language, originally created by John Gruber and Aaron Swartz. Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

This markdown simply converts your text into a markup language. Suppose, if you write a paragraph, then it adds < p > < / p > tags. Underline text with the = sign, and it will be replaced by a < h1 > and underline text with dashes (-), and it will be a < h2 > and so on. These are some syntax of markdown.

You can check out these tags in your gtalk message, if you want to send some one a gtalk chat message in italics, put the message in between two underscore like _hi how are you_ or if you want to send them in bold text, put the text message between two asterisks *hello*, the text will be displayed in bold. It’s all about how it converts text into HTML tags. Here when hosting the text files on dropbox, it converts into a markdown to display as HTML enabled as in your blog posts.

This makes writing super intuitive, and suddenly saves many minutes / hours in the design of a simple text (like a blog can be). To know more about Markdown, you can visit the daring fireball project Markdown. You can also try out their online markdown tool that converts your text to markdown with live preview.

If you want to run the markdown, you can do it with your Notepad ++. Notepad ++ is a simple tool like notepad but with some advanced features and plugins. Notepad++ has a Markdown plugin which can be installed. Check out how to install the Markdown plugin on Notepad++ and use it to convert text in Notepad++ to Markdown with perl script.

How to host your blog with Dropbox

1. Go to Scriptogr.am and allow it to authorize your dropbox account.

2. Once you’re done, it creates a folder called ‘Apps’ in your dropbox account in the path Apps > Scriptogram

3. Now you can personalize your blog which is hosted on the dropbox.

4. Give a username to your Scriptogram account. This username will act as your blog URL. Suppose if you give your username as ‘Srivathsan’, then your blog (which is hosted on the dropbox) URL will be Scriptogr.am/srivathsan.

5. If you want your blog URL to be changed into custom domain such as www.example.com, then you can change it in the settings panel. It has option to add custom domain. Instead of Scriptogr.am url, it will show your custom domain.

6. Now the front end ‘Blog url’ is ready. Now what about the backend ? where you need to upload your blog posts. Yes, you can simply upload a text file (which contains your blog post text) to your dropbox account. Let’s take a look at the process of doing it.

7. As I already told, when you allow Scriptogr.am to access your dropbox account, it creates a folder called ‘Apps’ in your dropbox account. The apps folder has a Scriptogram > Posts folders inside.

8. Inside the Posts folder is where you need to upload your text files. If you’re using dropbox in your Windows/Mac, then simply put the text file into the Posts folder.

9. The text file which contains the blog posts text has to be in certain format. Apart from the markdown formatting, it has to hold the front block. The front block must be the first thing in the file and takes the template form of :

—
Date: 2012-02-09
Title: My first blog post
—

Between the triple-dashed lines, you can set any of the predefined variables (see below for a reference). But, the Title is required. Without the title, the system will fail. Here the date and title is must, because it displays the title and date format in your blog. So always before writing your blog post in a simple text file, start with this template format. Below this, you can start writing your blog post.

10. As already told above, the posts folder is where you add your blog post (& page) files. These files are plain text files, but needs to be saved with the .md (markdown) extension like this: yourfilename.md . So once you’re done with writing the blog post, you need to save the file extension as .md

11. You can always use the markdown syntax for formatting the blog post. If you’ve installed the markdown extension in your Notepad++, then you don’t have to worry, with a simple execution of markdown perl script, it converts your simple text into a markdown format. If not, you can manually use the markdown syntax found here.

12. So I simply created a small blog post started with the template format of date and title and then wrote a few lines, saved it .md extension, uploaded it to dropbox posts folder.

13. Now you can visit – scriptogr.am// to find out your post, when you click the post title, then it has a permalink structure as scriptogr.am/username/posts/blog-post-title/ Here is the username you picked while signing up to scriptogr.am.

14. Now lets talk about the design, themes, css of blog page that you’ve hosted on dropbox. Till now we have sucessfully hosted the blog on dropbox. When you visit the blog homepage, you can find a small icon on the top right side, when you click it you get to visit the admin panel and settings panel of your blog where you have the option to customize themes, HTML and CSS of your blog.

15. Before that, forgot to tell you. Once you’ve uploaded the blog post to your dropbox, it doesn’t automatically publish the blog post. Go to your admin panel and hit the ”Synchronize” button. When logged in to scriptogr.am.

16. As told above, visiting your own page, you’ll see the scriptogr.am logotype symbol on the top right of the browser window. This is the link that leads to your admin panel.

17. At the admin panel, you can find options to set custom domain name for the blog, change themes, play with HTML editor, change the CSS codes etc.

So finally, here is a simple tutorial to host your blog on dropbox. Let me know if you find difficult to setup the blog. Feel free to throw your comments, am here to help :)

Liked this post? Got something to say? Share/Comment below. You can also Get Regular Updates. Subscribe to Free RSS Feeds or Email Updates. Follow us on Twitter @madrasgeek and Like us on Facebook.

Tagged as: blog hosting, dropbox, HowTo, tutorial, web hosting, webhosting, WordPress hosting

{ 1 comment… read it below or add one }

Name *

E-mail *

Website

Notify me of followup comments via e-mail