How to Use Dropbox to Host a Simple HTML Website

Hosting even the simplest of websites need you to know a lot about things like domain names, web hosting space, servers, CMS, etc. This is especially troubling if you are someone new to this kind of stuff. That being said, if you want to host complex websites like RTT then you have no other way but to go through all the things I said earlier. However, if all you need is a simple website with just a few pages, say like a portfolio site or small business site then the process doesn’t have to be so complicated.

Most of us are using Dropbox to store and share files. Not only for storing and sharing but you can also use Dropbox for a lot of other things. One of those is hosting your own website on Dropbox for free. So, if your need is a simple website then here is how to use Dropbox to host websites with just a few clicks.

Here is the demo website we hosted on Dropbox.

Use Dropbox to Host a Website

Limitations

Well, when you choose to host your website with Dropbox you need to mind some limitations. This is because Dropbox is a cloud storage service and is not designed to host websites. Below are some things you need to keep in mind.

  • The free space is just 2GB. You can increase it with referrals.
  • You can only host static HTML websites. You cannot host dynamic websites that use PHP, Java, etc.
  • The bandwidth is limited and if your website is receiving high traffic then your site may be down for most of them.
  • You don’t have access to the server or advanced configurations that you get when hosting your site on a dedicated web host.
  • Since you won’t be getting any visual editor to create HTML files, you need to know a bit of HTML, CSS, and a thing or two about Markdown editing.
  • To host a custom domain, you’ll have to opt for the premium version.

Use Dropbox to Host a Website

There are several free services that let you host websites on Dropbox. For this particular tutorial, I’m using DropPages. With the free account, you are limited to use DropPages subdomain with 50MB storage. If you want to use your own domain name with higher storage then you need to signup for their premium plan.

To start off, head over to DropPages and then click on the “Sign in” button appearing on the homepage.

host-website-dropbox

 

 

The above action will take you to the Dropbox authentication screen. Here, click on the button “Allow” to grant the permissions to DropPages. Don’t worry, DropPages will only have permission to access its own folder. It won’t be able to access other folders or files on your Dropbox account.

host-website-dropbox-click-allow

After giving the required permissions, you will be redirected back to DropPages. Here, click on the button “Create a new site”.

host-website-dropbox-click-create-new-site

This will take you to the domain selection page. Here, enter your new domain name as example.droppages.com and the click on the button “Create”. Don’t forget to replace “example” with your own custom name. Since you are on a free plan, you cannot add a custom domain.

create-a-new-websites

 

That’s all there is to do. You’ve successfully created a website using Dropbox and DropPages. By heading over to the domain you created, you can access your new website. Of course, there won’t be much until you add content to it.

All files created by DropPages will be stored in your Dropbox account. If you open your Dropbox account and navigate to /Apps/My.DropPages/ you will see a new folder with your domain name.

dropbox-free-hosting

Inside this folder, you will see three other sub-folders. Here is what they are and what they do.

Content: The content folder is used to upload the text files that are written in Markdown language. These text files are then rendered as HTML using the Template folder. You don’t have to specifically use the text files with Markdown to create content for your site, but it will make your life much easier.

Public: This folder hosts all the public files like CSS, JS, Images, and of your downloadable content like PDF, ZIP files, etc.

Templates: You can use this folder to host all your HTML files. This folder is also responsible for rendering HTML files with the text files in the Content folder.

host-website-dropbox-sub-folders

To add content to your new site, upload the HTML files to the Templates folder, and other files like images, CSS, and JS to the Public folder. If everything goes right, you will have your new website up and running in no time.

host-website-dropbox-add-html-files

Now, if you go to your domain name you’ll see the layout is pretty basic with just two lines of text. No images or css.

hello-world

You can either upload you own HTML and CSS files in the content and public folder.

Or, DropPages also offers 3 free themes. Download anyone of them, extract the content and you’ll find three folders — Content, Public, and Templates. Simply upload the content of these folders to the respective directory on your Dropbox and you’ll get a website like this. (see the screenshot at the top).

To change the text and images entry on the website, update the Content and Public folder.

content-folder

There are several free HTML themes that can help you create the website you want. Here is a good site for you to get started with some good HTML themes. If you don’t know how to write HTML then you can use this free tool to create HTML content.

Also, don’t forget to read the DropPages documentation to get most out of it.

That being said, if you are serious about your website then I recommend you to host it on a proper web host with a proper domain name. The following video will help you create a professional website withWordPresss under 10 minutes.

Hope that helps and do comment below sharing your thoughts and experiences about using the above method to use Dropbox to host a Website

About Vamsi Krishna

Vamsi is a tech and WordPress geek who enjoys writing how-to guides and tinkering with computers and software in general. He also writes his own blog sharing some simple tech how-to guides.