Although there are a lot of cloud storage providers, but Dropbox leads the pack with its innovative APIs and features. Apart from cloud storage, you can use Dropbox for a lot of purposes. One of the features that Dropbox supports is hosting static webpages on the cloud storage and make them available to the world. If you are a newbie or only want to host static HTML pages, you can make use of your Dropbox account.
1. Using KISSr
KISSr is a service that lets you host static websites using Dropbox as a web host. The advantage of KISSr over other competitors discussed in this article is that it lets you register and use a proper custom domain name instead of using sub-domains or long URLs. Just go to KISSr site, enter the name you want for your site (you’ll need to start with a sub-domain) and then click on the big Try it button.
The biggest disadvantage of using KISSr is that even though you are using Dropbox as the backend, it will limit the overall storage and bandwidth of your account.
2. Using DropPages
DropPages is an web application that connects to your Dropbox account to create a site for you. The benefit of using DropPages is that it does not restrict any space usage like KISSr and gives you a subdomain (yourname.droppages.com) to access your site. Follow the steps below to create your website with DropPages.
1. Go to http://my.droppages.com
2. This will ask you to sign into your Dropbox account. Click the “Sign in” button and give it permission to access your Dropbox account.
3. After you sign into your account, you will be greeted with screen where you can press the Allow button in order to proceed. Pressing the Deny button will cancel the signup process.
4. Now click on “Create a new site” button and enter the name of your site, e.g., mte.droppages.com
5. You can also pre-built themes of HTML pages.
3. Using Site44
Site44 is another service very similar to DropPages. We already have a tutorial on how to use Site44 to host your webpages using Dropbox as the back-end.
4. Creating the public folder manually
Although you can use the services listed above to create your site on Dropbox but if you don’t want to go through the signup process and don’t want to manage your site through anyone else, you can simply follow this guide to create your own hosting on Dropbox without using any tools.
Create a folder named “Public” (if it is not already there) in your Dropbox account. Next, you will need to visit this page to enable the public folder on your account. Now create another folder called “site” inside the public folder. Put all your HTML pages inside the “site” folder.
The “site” folder will act as the root folder for your static site. You can right click any file and get the public link under Dropbox menu. The link can be shared with other people. The person who has the link will be able to open the webpage.
Dropbox links are pretty long and can’t be remembered. If you have a domain name, you can easily redirect all your pages hosted on Dropbox to your own domain. This depends upon whether your host supports URL directing from the control panel or not. If the host does not support it, you can redirect the pages using the .htaccess file.
Create the .htaccess file on the root folder of your domain and enter the following information:
RedirectMatch 301 /site(.*) https://dl.dropbox.com/u/1234567/site/$1
You will need to change the “/site” if you are using another name for the site folder. You will also need to replace the Dropbox public URL with your own.personal public URL. Get the Dropbox URL by right clicking any file in the Public folder and then select “Get public link” under Dropbox menu.
Let me explain what the above command does. It will redirect all URLs containing “yoursite.com/site/xyz.html” where xyz.html is the page name which is hosted on Dropbox. For example, I have added a file called index.html in my “site” folder in my Dropbox account. Now whenever I want to open index.html, I will have to enter “http://mysite.com/site/index.html“. You can put any number of files in the site folder. You will be able to access those files using the above method.
I hope this has been useful for you and I’d like to thank you for reading. If you like this article, please leave a helpful comment and share it with your friends.