Tutorial 👉 Cómo publicar alojar su sitio web en Dropbox

(19 de octubre de 2020)

¡Este tutorial es para exportar desde Sketch2React como HTML y publicarlo en tu propio Dropbox! Y no te costará ni un centavo en hosting 🤖 💪

Eso te interesó, ¿verdad? 😺 ¿Quién no lo haría? El caso de uso de este flujo de trabajo podría ser:

  1. Ha puesto su alma y ha creado un sitio web o un prototipo hermoso y totalmente receptivo con nuestra herramienta para Sketch
  2. Te dices a ti mismo:
    «¡¿Y ahora qué ?! ¿Realmente necesito pagar por alojar esto? ¿Debo molestarme en aprender los entresijos de cómo administrar un servicio de publicación FTP / en la nube?
  3. Yo digo: ¡No, amigo mío, tú no!

Si ya tienes Dropbox, hay una excelente solución para ti llamada DropPages . Es gratis hasta 50 MB de almacenamiento en el sitio web, por lo que es perfecto para publicar sus diseños. Como realmente rápido 🚀

Además, dado que todo su sitio web está en Dropbox, editar y actualizar los archivos es solo una cuestión de reemplazar los antiguos , espera a que Dropbox se sincronice y listo: ¡actualizado!

Resulta que Dropbox es ultrarrápido . Todos los que han tenido la experiencia de alojar archivos descargables en el servicio ya lo saben, pero no tenía idea de que alojar HTML, CSS y Javascript también sería muy rápido.

DropPages requiere una pequeña cantidad de configuración, ambos antes, dentro de Sketch y también después de haber exportado su sitio web a HTML desde Sketch2React .

No se preocupe, es muy fácil y estoy contigo todo el camino. 🤖 💪

Requisitos del tutorial

Sitio web de demostración simple

100\% hecho con Sketch usando Sketch2React 100\% componentes de estilo

Para el propósito de este tutorial, creé este sitio web de demostración 100\% creado dentro de Sketch utilizando Sketch2React alojado en mi Dropbox. ¿Genial, eh?

Puedes descargar mi archivo Sketch desde aquí para estudiar 💎

👨‍🍳 Si Sigues conmigo, vamos a cocinar, ¿de acuerdo?

Paso 1 – Empezando

Esta carpeta se agrega a tu Dropbox
  1. Ve aquí , inicie sesión en Dropbox y permita que DropPages tenga acceso a su cuenta. DropPages crea una carpeta separada para usted llamada My.DropPages en la carpeta llamada Aplicaciones. No se preocupe, todo está perfectamente separado de todas sus otras cosas.
DropPages – Presiona el botón azul a la izquierda
  1. Presiona el botón azul Crear un nuevo sitio y asígnele un nombre donde incluya las palabras droppages.com o no funcionará dentro de los límites de la cuenta gratuita de DropPages.

    yourname.droppages.com

    🤖 💪 ProTip! Si desea tener un dominio personalizado + más almacenamiento, puede registrarse para obtener una suscripción paga . Este tutorial asume que solo quieres probar esto 100\% gratis, como yo. 😆

  2. Veamos lo que DropPages ha creado para nosotros. Tenemos tres carpetas:

Contenido y Público son los que estamos cubriendo. en este tutorial
  1. Vaya a Contenido y Public y elimine lo que DropPages ha instalado para usted (index.txt y main.css); nosotros no Necesito esos. No se preocupe, reemplazaremos esos archivos con nuestros propios e increíbles archivos HTML de Sketch2React. Plantillas que puede ignorar por completo.

Paso 2: ¡saltemos a Sketch! 💎

He preparado un poco sitio web de demostración en Sketch con nuestro sencillo marcado . Dado que es solo una demostración, ¿por qué molestarse en hacer más de dos páginas? Sí, exactamente .

He utilizado componentes de nuestra biblioteca gratuita Sketch2React Components y he realizado cambios personalizados en ellos (por supuesto, soy diseñador, ¿qué más haría todo el día? 😆)

Simplemente agregando la clase Bootstrap btn-block este pequeño El botón se convierte en ancho completo en nuestra aplicación de código: ¡yummi!

Un par de cosas interesantes que hice fueron:

  • Rediseñado uno de los componentes de nuestra tarjeta con un bonito fondo azul
  • Rediseñamos nuestro botón para que tenga el ancho completo utilizando una clase Bootstrap llamada
    btn-block
  • Usé increíbles ilustraciones gratuitas de uno de mis proveedores favoritos de cosas buenas, Icons8 .
¡¿Qué ?! No me gusta este estilo en absoluto, soy un diseñador godamnit 😆
  • Como puede ver 👆 arriba al usar ciertas clases de Bootstrap que manipula el aspecto de los componentes, hereda automáticamente algunos comportamientos predeterminados que Sketch2React no sobrescribe. Para solucionar este problema, creé un CSS personalizado :
¿Escribí este código yo mismo? No, lo busqué en Google. 😆

¡Eso logró lo que estaba buscando, deshacerme de ese feo subrayado en mi hermoso botón! 👨🏻‍💻El resultado de usar un CSS personalizado 👇

¡Aaaa, no hay subrayados feos aquí!

Si cree que el código da mucho miedo, no se preocupe, Sketch2React funciona perfectamente bien sin todas estas cosas adicionales que agregué, el CSS personalizado. Recuerde, he estado usando esto desde antes de que lanzáramos el primer alfa público, a principios de 2018. 😺 💪

Las reglas deben romperse (a veces)

Esto ha tomado un Un poco de rastro y error para entender. Resulta que una regla de DropPages muy importante va totalmente en contra de una de las reglas de vinculación más importantes de Sketch2React 😆

Normalmente al diseñar para Sketch2React, crea un vínculo como este:

Comportamiento normal de vinculación de Sketch2React

  1. Seleccione un componente que tenga una propiedad vinculable
  2. Utilice la W acceso directo dentro de Sketch para vincular ese componente a otra página
  3. Agregue ./artboardname.html al panel {attribute.url} dentro de ese componente, como se muestra a continuación:

./artboardname.html

  1. También todos los enlaces volviendo al inicio necesita ser nombrado:

./index.html

Lo entiendes 🤖 💪 Esto asegura que todo esté limpio y agradable en nuestra maravillosa exportación de código. También significa que puede arrastrar y soltar toda la carpeta exportada (HTML) en un servidor FTP y todos los enlaces simplemente funcionan.

Para nuestra exportación de React es un poco diferente ya que necesita sumergirse en el archivo exportado código para que el enlace funcione, pero eso no es para este tutorial. De hecho, tenemos uno para eso, por supuesto 👨‍💻

Por cierto, React ni siquiera es compatible con DropPages, así que simplemente … ehm elimine eso.

¿Qué sucede?

El problema es que si sigues esto y al mismo tiempo quieres tener un buen flujo de trabajo para publicar páginas en Dropbox a través de DropPages, debemos romper esta regla. A veces las reglas están ahí para romperse 😬 👍

Si no, este mensaje de error lo golpeará como un ladrillo una vez que intente hacer clic en cualquier elemento vinculado a otras páginas una vez que haya publicado su sitio web (o prototipo) en DropPages :

¿Es correcta la URL? Las páginas de contenido no deben tener una extensión.

Y no queremos esto que alguna vez suceda, ¿verdad? Esta es la solución que descubrí que funciona de maravilla.

La solución 🤖 💪

Simplemente elimine la extensión .html habitual y funcionará. ¡Pero no de todos los enlaces que regresan a Inicio! ⚠️

Reglas específicas de DropPages para enlaces de Sketch2React

  1. Seleccione un componente que tenga una propiedad vinculable
  2. Use el acceso directo W dentro de Sketch para vincular ese componente a otra página
  3. Agregar ./artboardname al atributo {.url} panel dentro de ese componente, como a continuación:

./artboardname

  1. Además, todos los enlaces que regresan a Inicio todavía necesitan para ser nombrados:

./index.html

Preste especial atención a la última regla, nr 4 .

¿Cómo se configura un flujo de trabajo que funcione tanto para las exportaciones normales como para las específicas de DropPages? En realidad, dado que solo los enlaces necesitan un poco de ajuste, primero lo diseñaría y construiría con el flujo de trabajo habitual y luego simplemente duplicaría el mismo archivo de Sketch, llámelo algo como myfilename-droppages y continúe con mi vida.

Somos diseñadores por lo que el trabajo manual no nos asusta, ¿verdad? 😆 👍

¡Finalmente estamos listos para exportar godamnit!

Okey, así que si aún no te has quedado dormido o tienes un colapso mental, ¡te saludo como mi mejor amigo! Ahora viene la parte divertida de este tutorial: ¡exportar cosas de Sketch2React a HTML y publicarlas en tu Dropbox!

Exportar desde Sketch2React a HTML

  1. Asegúrate de visitar cada página que has diseñado una vez – se agrega a nuestro paquete de exportación de esa manera
  2. Presione el botón Descargar 👉 HTML y guárdelo en el disco
  3. Descomprima su zip
  4. ¡Voila, has terminado! ¡Ahora carguemos esto en Dropbox!

Subiendo a Dropbox.com

Lo que he encontrado que es la forma más efectiva de subir esto es realmente hacer esto directamente desde su navegador . La sincronización es más rápida, especialmente cuando comienzas a volver a cargar los mismos archivos una y otra vez, lo que probablemente harás ya que siempre se actualizan / arreglan las cosas una vez que las ves en vivo.

Pero antes de hacerlo asegúrese de comprime sus recursos de imagen , yo uso el excelente TinyPNG servicio para eso. El cual, en contraste con su nombre, también es compatible con JPGS.

Suelta estos archivos en Contenido

Todas tus páginas HTML van a la carpeta Contenido en tu sitio web recién creado, la mía se ve así:

Suelta los archivos HTML de Sketch2React exportados en la carpeta llamada Contenido

Coloca estos archivos en Público

Público contiene todos tus activos CSS, Javascript e Imagen. El mío se ve así:

Suelta tus carpetas Sketch2React CSS, JS e Image aquí

Ahora regrese a su cuenta de DropPages y presione Publicar ahora ¡y listo! A veces puede tomar un par de minutos para que todo se sincronice y cargue, solo tenga paciencia, funcionará.

Si experimenta problemas de sincronización, presione el botón rojo Restablecer sincronización, publique nuevamente y eventualmente funcionará.

Aquí está mi carga por cierto 👇

http://articledemo.droppages.com/index.html

😺 👍 Eso es todo, amigos, espero que hayan disfrutado este tutorial y lo encuentren útil para su flujo de trabajo de diseño a código.