Hosting a Website with Dropbox

Hosting a Website with Dropbox


Many of my students enter our design programs with no access to web hosting, which makes it difficult to showcase what they’ve learned in their web development courses. Near the end of the program, students are asked to think of a domain name and purchase hosting from a trusted provider in order to host their final portfolio websites before graduating. However, before graduating, I wanted to provide my students with a low cost alternative for hosting their HTML and CSS based websites in order for them to share, and post their web design work during the course of the year. I wondered, what could be the lowest cost possible that my students would need to incur in order to gain web hosting access? Hmmm, what about using some form of cloud storage? Dropbox offers free cloud storage. It’s fast, stable and allows you to create backups; just right for hosting small web design projects. 🙂

So how do we set up Dropbox to begin hosting our HTML and CSS based websites? This step-by-step tutorial outlines how to set up hosting a website with Dropbox by creating a public shared folder, saving published web files and capturing a shared-public URL to display your websites.

DropBox Hosting Setup

  1. Sign up for a free dropbox account. I think you start off with 2GB, which is a good amount to start: http://dropbox.com
  2. Locate the “Public” folder in the main directory of your dropbox account.
    Hosting Dropbox

    Dropbox Public Folder

  3. Drag the root folder of your website containing only the necessary published web files inside. ie: index.html, css folder, images folder etc…
    Hosting Dropbox

    Drag and Drop Root Folder into Public Folder

    • Note: If you’re using absolute URL paths in your web pages, change them to relative paths when hosting through Dropbox.
      For example: <a href=”http://mark-anthony.ca/website/index.html”></a>
      change URL’s to:
      <a href=”./website/index.html”></a>
      This method allows for access to the website without the need of a domain name.
  4. Finally, right-click on your index.html file and select ‘Copy public link…’.
    Hosting Dropbox

    Right-Click on ‘index.html’ and select ‘copy shared link’.

You can now place the copied public link into your browser and your website should display. Your URL may look something like this: https://dl.dropboxusercontent.com/u/14964706/website/index.html

Dropbox Hosting: The Downsides

Some drawbacks to hosting websites using Dropbox are that you can’t host .php files. Only static web pages are supported when using Dropbox to host your web pages. So if you have a contact form or search elements that require PHP, they won’t work with Dropbox. Dropbox doesn’t support custom URL’s. So if you wanted custom URL’s to share with clients, coworkers or peers, it would be difficult to do so using Dropbox. Finally, managing a large website with multiple pages and links would also be tedious with Dropbox. I would suggest using this method for smaller, simple websites.

Conclusion

Overall, the positives outweigh the negatives when it comes to hosting a website with Dropbox. It’s a great alternative for sharing simple websites with clients and or showcasing student work before acquiring adequate hosting. In addition to having a free alternative for hosting web pages, Dropbox also allows you to make quick edits from any device. Also, knowing that your site is secure, always available and backed up is always a big stress relief.

2 Comments

Add yours
  1. 1
    John

    Great tutorial Mark-Anthony. If I didn’t already have “FREE” web hosting I would give this a go. I may anyways with one of my pet projects that i don’t want to have attached to any of my current domain names. And before you ask, I’ll tell you how I have the “FREE” web hosting … I know someone who got into the web hosting business about 15 years ago and since I was one of his first clients he gave me a deal – 10 years with unlimited number of domain names for $100 – that was close to 15 years ago and they are still live. I can only presume that he is extremely successful or has given up on this venture but still has his servers running – either way he has forgotten about me and that’s okay with me.

    • 2
      Mark-Anthony

      Hey John, I’m glad you liked the post and found it helpful. Using Dropbox for hosting is great for smaller projects. That’s an amazing deal you got. I wish my hosting provider forgot about me… 😉

+ Leave a Comment