Do-It-Yourself Hosting Website in Dropbox

I’ve read a little bit about the options to host static websites in dropbox. There are tools that help you do that, such as Pancake.io and there are bunch of tutorials on how to connect Pancake with dropbox (Here is one). I only briefly tried these tools as they all seems to have some constraints around them, such as using their propriety content management systems.

My need is to host “my site”. A set of static web-pages with some Javascript not just a blog or content.

My next step was to try to see if there is Do-It-Yourself approach to achieve that. And it seems doable but I have to say that my current approach is somewhat of a newbie approach and there may be other more optimized ways to do that.

The first thing to figure out is how dropbox (at least currently in February 2015) is exposing public content.

Here is what I found:

Go to the dropbox website and select “Share” on a specific file. In this case favicon.png in the img folder.

dropbox share button

When you click on the Share button a modal popup window you will be opened:

dropbox shared url

The “Link to file” URL immediately becomes available to the public. It will look something like the following:
https://www.dropbox.com/s/t5e09wloxnpog1i/favicon.png?dl=0

Note the prefix “www”. When following this link you get to a webpage containing the content you need, but not to the content itself.

In other words you get to this page:

dropbox www favicon

Instead of getting to the actual image file that would look like this:

favicon

Well after trying few things and reading more, it appears that the only thing you need to do is to change the prefix from “www” to “dl”. So the link below will take you directly to the content:
https://dl.dropbox.com/s/t5e09wloxnpog1i/favicon.png?dl=0

The other thing to note is that the file is shared as a single file with no relative folder structure. Favicon above is in an img folder under website but you can not see that hierarchy in the URL.

I also tried to share entire folders but at least thus far I was not able to use the URL to the individual files when the folder is shared and the file is not.

Understanding the way in which the dropbox URL sharing works is the single big thing that I had to understand before starting the DIY hosting project.

The next thing was to upload all the files and manually share them one by one. The last step was to go to all the references between files, such as in the HTML href for images and change them from the regular relative link to the specific dropbox generated URL.

So that a relative url like this:
./img/favicon.png

Became something like this:
https://dl.dropbox.com/s/t5e09wloxnpog1i/favicon.png?dl=0

This method works ok for my simple website but will probably not scale well for larger projects.
The final result is not too bad with performance and availability that seems to be good.
See my site at manha10.com

Good luck experimenting and please share your thoughts if there are better/simpler ways to do this.

Update: See newer post. The website is not as stable as expected.

Advertisements

Author: dave

Consider myself kid in soul and naive by choice. I am interested in people, technology and business and thrive when they all work together. My favorite quote and motto is that “You can fool some people some times but you cant fool all the people all the time” ― Bob Marley

2 thoughts on “Do-It-Yourself Hosting Website in Dropbox”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s