Hospedar web en Dropbox

Importante: desde el 3 de octubre de 2016 Dropbox ha deshabilitado la posibilidad de realizar esto, por lo que este artículo ya no sirve

Desde hace tiempo sabía de la posibilidad de que puede utilizarse Google Drive algún servicio de almacenamiento en la nube para hospedar paginas web simples que utilizaran tan solo HTML, CSS y Javascript; y en multitud de artículos se explicaba como. Así que he hecho una pequeña aplicación web con AngularJS para probar.

Actualización 1: Mi idea original era escribir sobre hosting en Drive. Sin embargo, encontré una mala noticia: Google iba a eliminar esta posibilidad para el 31 de agosto de 2016 (fuentes aquí y aquí), así que no valía la pena a largo plazo.

Buscando alternativas a Google Drive, las dos que me han parecido mas interesantes son Github y Dropbox. Dropbox es un sistema de almacenamiento en la nube (el precursor de Google Drive) y Github es una plataforma para almacenar proyectos utilizando un sistema de control de versiones Git (para profanos: un sitio donde programadores y demás índole pueden guardar diferentes versiones del código de sus aplicaciones, webs, etc.). He decidido probar primero con Dropbox.

Antes de empezar, un par de advertencias y un consejo que he aprendido:

• Igual que pasaba con Google Drive, tan solo se pueden utilizar los lenguajes de lado cliente (HTML, CSS y Javascript), nada del lado servidor como PHP, Python, Ruby, etc.
• En Dropbox se ha reportado algún fallo de conexión a la hora de acceder a la web que hayamos creado si hay mucho trafico, por lo que no lo recomendaría para aplicaciones web "grandes". 
• Las url relativas no funcionan de esta forma, por lo que tendremos que cambiarlas en el código de la aplicación (mas tarde se explica como). Una forma de agilizar las cosas sería con los archivos pertenecientes a frameworks o herramientas como Twitter Bootstrap o AngularJS, accedediendo a ellos mediante CDN. Por ejemplo:

  <!-- En vez de utilizar esto ... -->
  <script src="./src/angular.min.js"></script>
  
  <!-- ... mejor utilizar esto. -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  

Como hospedar una web en Dropbox:

1.  Accedemos a nuestra cuenta y creamos una carpeta, la podemos llamar por ejemplo "web".
2. En la carpeta "web" almacenamos todos los archivos que en su código NO tengan una url relativa. Por ejemplo, valdría cualquier hoja de estilo CSS, imagen o archivo Javascript sin una url o referencia a otro archivo local.
3. Para cada uno de los archivos que hemos subido, obtenemos su enlace publico. En la web de Dropbox, si pasamos el ratón por encima del nombre del archivo subido aparecerá el menú "Compartir", accedemos a el y podemos encontrar el enlace en el campo titulado "Vinculo al archivo".
4. Actualizamos las url relativas en los archivos que no hemos subido todavía con los enlaces públicos que hemos obtenido en el paso anterior. Ademas hay que sustituir el comienzo del enlace "https://www.dropbox..." por "https://dl.dropbox...". Por ejemplo, así he actualizado la referencia que tenia hacia un CSS:

   <!-- He sustituido esto ... -->
   <link href="./css/cover.css" rel="stylesheet">
   
   <!-- ... por esto. -->
   <link href="https://dl.dropbox.com/s/qr0v59pxh4wy53c/cover.css?dl=0" rel="stylesheet">
   

5. Subimos el resto de archivos con las url actualizadas
6. Repetimos los pasos 3, 4 y 5 en caso de quede alguna url relativa, como podría ser en archivos que hagan referencia a otros archivos que a su vez hagan referencia a otros. Por ejemplo si tenemos un archivo A, que tiene una url que hace referencia al archivo B, que a su vez tiene una referencia al archivo C; haríamos lo siguiente: subimos C, obtenemos el enlace publico de C, actualizamos la url que hace referencia a C en el archivo B, subimos B, obtenemos el enlace de B, actualizamos su referencia en A y subimos A (puede resultar un poco "liosa" la explicación).
7. Ya podemos acceder a la web a través del enlace publico de la pagina principal (normalmente el archivo "index.html" o "home.html"), recordando de cambiar el inicio "http://www.dropbox..." por "http://dl.dropbox...".

Actualización 2: Si tienes una cuenta de Dropbox anterior al 4 de octubre de 2012, puede simplificarse el proceso utilizando la carpeta "Public" (las cuentas posteriores a esa fecha no tienen dicha carpeta).

Por ultimo y para que veáis que no me invento nada:

• Web hospedada en Dropbox

Referencias:
https://daveriskit.wordpress.com/2015/02/22/diy-hosting-a-static-website-in-dropbox/