Dropbox is one of the most famous and widely used cloud storage services available nowadays enabling a simple yet powerful file sharing and syncing service taking care of all of your documents, photos, videos, etc… Dropbox is accessible virtually from anywhere with internet access starting by its own web platform, you computer through the Dropbox application, or even your mobile and Tablet no mater if it was Android or iOS based, now I believe you already know that, if no go ahead and give it a try, you will start with free 2GB space and following couple of tricks can increase it.

Many cool tips and tricks were presented that enables you to use Dropbox beyond only saving, backing up and sharing files. Here are two articles sharing some of them: 10 Things You Didn’t Know You Could Do With Dropbox and Top 5: Dropbox Tips and Tricks.

Now one of the awesome tricks that we can do with Dropbox is hosting web pages online and share their public URLs with others to see, now there are some services that can provide using Dropbox with additional features such as DropPages and Pancake.io, but what if you don’t want to register to third party service providers and you want to DIY.

There is a possible way.

Prepare the Desired Web Page(s)

First you need to prepare the web pages you want to publish, starting by the HTML documents, accompanied style sheets, scripts, images and what ever required documents. If your site is developed using a server side language such as PHP, or ASP.NET run the web page locally on your machine and save it from the browser as complete Web Page (*.htm|*.html) as showed in the following screenshot.

Save Web Page
Save Option From Browser

This will save the page in its HTML format and accompanied with the required files in a separate folder. Here is an example of what files are saved locally when we apply this to the registration page of Dropbox.

DropBox Registration Files
HTML Document and Required Resources After Browser Save

Publish to Dropbox

After Preparing the required files, we can now publish to Dropbox, we can create a new “Public” folder for this purpose and upload the files to it through the Web Interface, or copy to the Dropbox folder available on your machine which will automatically will be synced online.

Dropbox Folder
Web Page Files

Get the Online URL

After successfully uploading the required files, you can now get the online URL to share with others. This can be done either from the context menu that appears when you right click on the desired file, or from the Dropbox site.

  • From local Dropbox folder: Right Click on the HTML file -> Select “Dropbox” ->Select “Copy public link”
  • From the Dropbox site: Navigate to the folder where the files were uploded -> Right Click on the HTML file -> Select “Copy public link”
Copy Public Link
From the Dropbox Folder on Your Computer
Dropbox Public Link
From Dropbox Website

Copy that link to your clipboard

Copy The Provided Public Link
Copy The Provided Public Link

Now You’re Ready

Copy the public link to your Browser and try it, you will get access to your simple web page hosted on Dropbox.

Here is a Demo published on my Dropbox account.

Now a simple scenario where this feature proves to be handy is when we are working on a website for a customer for example and we need to quickly share with him the progress, we can publish an HTML version showing the actual layout in the browser instead of sending a screenshots.

What do you think?

Advertisements