Update: The following guide no longer works. Dropbox now doesn’t allow the user to render HTML from public folders. Thanks to Craig (in the comments) for updating us.
Dropbox has become more than a file syncing and cloud storage utility. We’ve already shared the pro user’s guide for dropbox. Dropbox is a cloud storage utility, in other words it hosts the files for us. Saying that – then why can’t we use it to host our own website? Of course, that’d be cool. Maybe you’ve just created a site and wanna demonstrate it to your client or share it with a friend. It can work like a charm. Dropbox can be a great tool for hosting. (But again, you may also choose from some of the best dropbox alternatives.)
So, I’d like to show you 2 ways to host a standard website using Dropbox. Well, limitations are coming behind running. You can just host a simple static website. A Dynamic site that uses PHP can’t be hosted. You don’t have server access so there’s is no way to host dynamic websites.
Also, other limitation is your storage. You can get up to 10 GB free hosting using referrals. But, 10 GB won’t be enough for hosting if you’re going to make your site go public. May be you buy a custom domain. Making your site go public increases the possibility that your site will be down if too many visitors get online. Not giving enough bandwidth to other visitors. For that, you’ll have to opt for a pro account and buy yourself higher storage for hosting.
So, those were the limitations for hosting. Well, if you’re just going to host to show it to your client or share it with some other user, then, you’re good to go.
Host your Website on Dropbox
#1 Externally host your site through Dropbox Apps
Droppages.com uses the Dropbox API to host your website. You just need to sign in through Dropbox and let the DropPages app allow to access your account. After signing up you need to create a new site. On your dashboard, you’ll see create new site. Under this option, you need to add the name of your free domain. As shown below ( mysite.droppages.com ).
After you create a site you need to edit it now. So, for that go to your dropbox folder. You’ll find My.Droppages folder under the Apps folder. Now you need to go to the base.html file that is present in the templates folder. ( Apps > My.Droppages > atf-underground.droppages.com > templates > base.html )
You can also edit the styling of your site through the main.css file present in public folder. The site will get live within seconds.
The service until this point is totally free. You can also redirect the DropPages.com URL to your own custom domain by upgrading your account. Also you’ll get more storage for your website. You get 50 MB storage under free domain but after upgrading it’ll extend to 1GB.
#2 Host it Manually
If you don’t want to let others maintain your site or want to have full control over it, you can also host it manually on Dropbox. All you have to do is upload the .html file and other files to the public folder and redirect it’s public link to a custom domain.
First of all, enable your public folder. Create a Folder named “website” and under that upload your Html files. As per in the below screenshot I’ve uploaded index.html. Now get the public link for this Html file. Through this link, you can give access to anyone to open your site.
But, that link will be actually too long and not easy to remember. You need to redirect this link to your custom domain. You can redirect it through the control panel of the domain service provider. If that’s not possible you can create .htaccess file and upload it to the root folder ( ie. here “website” folder). You’ll have to write this in the .htaccess file.
RedirectMatch 301 /website(.*) https://dl.dropbox.com/u/7868965/website/$7
You’ll have to change the “/website” to the root folder name you created and the public link at the end with your actual public link of index.html. So after you add this .htaccess file to the root folder (“website”), you’ll have to open your website like this – http://www.mywebsite.com/website/index.html . So, whenever you want to access the index.html file or if anyone wants to access he’ll have to open using that. The website is in the root folder which contains index.html. You can add other files to that root folder and access it. (Example: http://www.mywebsite.com/website/main.css ).
Hope so that helped. If you have any queries please mention in the comments.
Also Read: Monitor Computer Remotely using Dropbox