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 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.
When you click on the Share button a modal popup window you will be opened:
The “Link to file” URL immediately becomes available to the public. It will look something like the following:
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:
Instead of getting to the actual image file that would look like this:
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:
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:
Became something like this:
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.