Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Quick Tips Creating Websites With Dropbox-Powered Hosting Tools

Let’s say you want to quickly sketch out your idea of a website, or just quickly whip up a small site for testing purposes. Also, neither should take a lot of time to build nor should they need a full-stack toolkit. So, where and how do you start? Have you tried creating a website with some Dropbox-powered hosting tools?

Well, they certainly can provide a fast and easy solution for these occasions. You don’t have to fiddle with servers or bother about deployment, some of them even come with pre-configured templates that you can use or customize to spare you coding time.

Further Reading on SmashingMag: Link

In today’s article, we’ve collected nine tools for you that hook up to your Dropbox to streamline the process of creating and hosting static websites. However, before you settle on a Dropbox-powered platform, always balance the pros and cons to make sure it is the right choice for your project — including performance-wise. As for prototyping, the following tools are a great way to make your workflow more efficient so you can spend more time on the details that really matter.

Small Victories Link

One creation tool that is based on Dropbox is Small Victories75. The idea behind it is simple: The tool connects to your Dropbox, creates a special folder there, and whatever you drop into the folder (be it HTML, Markdown or TXT files, images or videos) will automatically be turned into a website. No installation, server, CMS or uploading necessary; every change you make in the Dropbox folder will be pushed to your site instantly. To ease the job, you can draw on nine ready-made themes (among them a homepage, an e-commerce product page and a feed stream) or if you want more control, you can code your own static HTML files instead and use Dropbox essentially as a hosting service.

Small Victories6
Drop your files into a designated Dropbox folder and Small Victories75 will make a website out of it.

To keep everything as simple as possible, the content will be displayed on your site in the order as it appears in your Dropbox folder. This requires a bit of planning ahead when it comes to choosing file names, and, as it turns out, numbering them is the easiest way to maintain a structure. Alternatively, you can set the order to sort by date or by manually comma-delimiting the file names in the order you want them to appear in the settings.txt file. Despite its simplicity, the tool isn’t inflexible at all, but surprises with quite some customization features. Adding your own styles and scripts to the default CSS and JS files goes without saying, while Google Fonts and Typekit support give you even more freedom.

By default, every site created with Small Victories will be hosted as a subdomain of .smvi.co, but you can also use a custom domain if you prefer. Just enter the domain in the settings.txt file and make sure to register it in your domain’s DNS settings, too. If you want to make your content available only to a selected group of users, to show an idea to a client, for example, or to share slides, you can also set a password protection. Especially when you’re looking for fast results or want to collaborate with your team members, the tool is convenient to work with. A shared Dropbox folder is all it takes.

Here some examples of sites that were built using Small Victories:

Screenshot from the vis:dmcg site8
vis:dmcg9, an inspiration showcase.
Screenshot from the Salon des Refusés site10
Salon des Refusés11, an exhibition of art and photography.
Screenshot from the XXIX Store site12
XXIX Store13, an e-commerce site.
Screenshot from the Wise App’s site14
Wise App15’s product page for an app.

Pancake Link

Also based on the “drop your files into a Dropbox folder” idea, is Pancake1816. Apart from HTML, it supports .md and .txt and creates a page for every text file you save to the respective Dropbox folder. By default, your project will be hosted as a subdomain of .pancakeapps.com (which is SSL-secured, by the way), but you can also use your own domain with a Pancake site. Apart from Dropbox sync, the platform offers a beta version with git push that comes with version control and supports popular generators such as Jekyll, Sphinx, and Wintersmith.

Pancake17
Pancake1816 serves HTML and text files directly from your Dropbox folder.

DropPages Link

DropPages2119 already launched back in 2011 and offers the same approach as the tools above. Three sub-folders in your Dropbox’s project folder house text (which can also be written in Markdown), images and CSS, and, finally, HTML files to render the text. You simply edit the files on your computer, save, and they’ll automatically sync with your live site. If you don’t want to edit live content, create a folder called _drafts and get started with your new content in there. When you’re done, overwrite the live version with it. Content is minified, gzipped and cached. DropPages is free to use.

DropPages20
DropPages2119 syncs between your Dropbox and your website to make editing content as painless as possible.

Site44 Link

Site442422 updates your website as soon as you’ve saved any changes within the folder you’ve created in Dropbox (it constantly monitors it specially for this purpose, too). Sites created with the tool usually live on a .site44.com sub-domain, but using custom domains is possible as well. For fast response times, your content will be cached on Site44’s servers. Advanced features include password protection, custom 404 pages, and support for redirects. A 30-day trial is free, personal plans start at $4.95 per month.

Site4423
Site442422 monitors a Dropbox folder which you use to save your website assets in. As soon as you make changes to this folder, your website will automatically be updated.

Sitebox.io Link

Another static site generator living in a symbiosis with Dropbox is Sitebox.io25. You can code your own layout (Markdown is supported) or use one of three ready-made, responsive themes. The possibility to set a meta description for every page helps make your website search-engine friendly. A nice bonus: The tool won’t push all changes you make to the folder live instantly. Instead, you can preview your changes first, and when everything is as you want it to be, you can publish in one click. Sitebox is free to use with up to five pages with a subdomain at .sitebox.io, a professional license with an unlimited amount of websites and the option to connect your own domain is available for $10 a month.

Sitebox26
An example site created with Sitebox27 and the default Unison theme.

Cloud Cannon Link

Cloud Cannon3028 is a simple CMS that syncs back and forth with Dropbox or, alternatively, GitHub and Bitbucket, to build and deploy your website to a test or custom domain. Focus lies on collaboration between developers and non-developers. While developers have full control over the source code and can use their favorite tools to build static or Jekyll sites, non-developers can update content visually in the inline editor. For improved performance, websites built with Cloud Cannon are optimized and assets served from a CDN.

Here’s a handy feature: You can set up a staging site for testing purposes and easily push to the live site when you’re ready. Restricting public access to your site or to parts of it is also possible. Plans for Cloud Cannon start at $25 for one user and unlimited websites, more expensive agency and enterprise plans are also available. If you just want to give it a try, there’s a 30-day free trial, too.

Cloud Cannon29
Cloud Cannon3028 manages the balancing act between giving developers full freedom and empowering non-developers and clients to edit content themselves.

KISSr Link

No frills, just a Dropbox-powered hosting service — that’s KISSr. You save your website to Dropbox, and when you update files, the changes will be copied to KISSr’s servers. One prototype site is free, for $5 per month you get unlimited sites, storage, and bandwidth.

KISSr
KISSr provides simple Dropbox web hosting without requiring a personal FTP server.

Paperplane Link

Paperplane3331 spares you fiddling around with FTP by connecting to your Dropbox (or GitHub if you prefer). To use it, pick a name, point Paperplane to your files, and that’s it — the service will transform your assets into a website. Custom domains can be used, too. Paperplane weighs in with $9 per month, but you can also test it out for free with three sites max and no custom domains.

Paperplane32
Paperplane3331 wants to make static hosting simple.

Synkee Link

Synkee3634 works differently than the other tools on our list. It connects to your Dropbox but doesn’t replace an FTP server — simple deployment and version control are the magic words here. A typical workflow with Synkee is as follows: You save your website assets to Dropbox, edit them with your favorite text editor, and the changes get synced to your website’s server as your Dropbox syncs. Deployments can be handled via a dashboard either manually, or you set them to apply automatically when you save a file. Built-in version control and the possibility to revert changes on the FTP server also add to a more efficient workflow. Synkee also works with GitHub and Bitbucket and offers a two-week free trial. After the trial has ended, plans start at $5 per month for one user and ten projects, team plans are also available.

Synkee35
Synkee3634 lets you deploy and sync websites that you save in Dropbox to your FTP server.

What are your experiences? Have you used one of these tools before? Or do you know of one we haven’t listed? Let us know in the comment section below.

(il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2015/11/static-website-generators-jekyll-middleman-roots-hugo-review/
  2. 2 https://www.smashingmagazine.com/2014/08/dropbox-carousel-design-deconstructed-part-1/
  3. 3 https://www.smashingmagazine.com/2009/03/9-steps-to-a-happy-relationship-with-your-hosting-provider/
  4. 4 https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/
  5. 5 http://www.smallvictori.es/
  6. 6 http://www.smallvictori.es/
  7. 7 http://www.smallvictori.es/
  8. 8 http://vis.dmcg.co/
  9. 9 http://vis.dmcg.co/
  10. 10 http://www.salondesrefus.es/
  11. 11 http://www.salondesrefus.es/
  12. 12 http://www.smallvictori.es/
  13. 13 http://www.smallvictori.es/
  14. 14 http://www.wiseapp.com/
  15. 15 http://www.wiseapp.com/
  16. 16 https://www.pancake.io/
  17. 17 https://www.pancake.io/
  18. 18 https://www.pancake.io/
  19. 19 http://droppages.com/
  20. 20 http://droppages.com/
  21. 21 http://droppages.com/
  22. 22 http://www.site44.com/
  23. 23 http://www.site44.com/
  24. 24 http://www.site44.com/
  25. 25 https://www.sitebox.io/
  26. 26 https://www.sitebox.io/
  27. 27 https://www.sitebox.io/
  28. 28 http://cloudcannon.com/
  29. 29 http://cloudcannon.com/
  30. 30 http://cloudcannon.com/
  31. 31 https://www.paperplane.io/
  32. 32 https://www.paperplane.io/
  33. 33 https://www.paperplane.io/
  34. 34 https://www.synkee.com/
  35. 35 https://www.synkee.com/
  36. 36 https://www.synkee.com/

↑ Back to top Tweet itShare on Facebook

Cosima has been an editor at SmashingMag since 2013. Whenever she's not writing articles for the bi-weekly Smashing Newsletter or the Quick Tips series, she’s probably working on a new Smashing eBook.

  1. 1

    As far as I know, the Dropbox feature that allows to get content of public folder as a website will be disabled very soon. If I’m not wrong it will be disabled by the next month.

    8
    • 2

      This is correct, Dropbox sent out a notice the other day regarding disabling hosted .HTML files very soon.

      6
    • 4

      Here is the notice from Dropbox: https://www.dropbox.com/help/201

      However, this shouldn’t prevent the majority of the services above from working, as most sync your dropbox with their own systems in order to serve your site’s HTML.

      Thanks for the write-up, Cosima!

      2
    • 5

      That doesn’t affect the above services though, does it? It seems that they connect as apps and basically just syncs everything into their own hosting, thus not using the good-ol’ public folder at all.

      3
    • 7

      cool man

      1
    • 8

      indeed it has as of 16/oct. Im now having a right job to reformat or rehost the website i master that i migrated across to DB when Virgin pulled the plug on my 10 year old webspace 6 months ago.

      So far i am getting totally nowhere with my experiments to reformat the pages into another format, ie php. I get exactly the same result – which according to DBs own info I shouldnt – in that when I click on the URL the pages – in whatever format i publish them – download to the PC rather than open them for viewing, which is as much use as a chocolate fireguard. Visitors to the site URL now just get a message saying that the page is unavailable because of an unknown problem. The new arrangements blocked HTM and HTML coded pages from being previewed or viewed online, but so far i have been unable to get ANY format of webpage to open online.

      0
  2. 9

    That’s correct. Beginning Oct 3, 2016, you can’t use shared links to render HTML content in a web browser on Dropbox.

    Not sure if links are supported in comments, but here’s the explanation from Dropbox about HTML content.

    0
  3. 10
  4. 11
  5. 13

    Wow! nice post. But i always like wordpress. Ho yea dropbox is not bad…….

    -5

↑ Back to top