Guía como publicar tu web en Webflow en Netlify CMS (Udesly) y modificar entradas.
Artículo de guía de como publicar tu web hecha en Webflow en Netlify CMS usando Udesly y con las colecciones traídas de Webflow. También se comenta como modificar estas colecciones y el coste de todo el proceso. Aclaro que no es un tutorial, sino mas bien una guía.
Decir, que desde el inicio me he basado en un tutorial cread por Félix de NoCodersAcademy
Hosting 100% GRATIS para webs hechas en WEBFLOW (Tutorial)
Crear web en Webflow
Lo primero es crear una cuenta gratuita en Webflow, encontrarás muchos tutoriales en cualquier de las plataformas, incluso plantillas.
Sugiero que una vez que os familiaricéis con Webflow, le echéis un ojo a la parte de Webflow university en la que se enseña a cómo utilizar Webflow de manera más profunda. Allí encontraréis ejemplos muy buenos de edición.
Comentar que Webflow no es fácil, tampoco es difícil, pero requiere de tiempo y de un cierto conocimiento básico en lenguaje CSS.
Exportar código desde Webflow
Antes de comentar la exportación, me gustaría señalar que repaséis todo lo editado, es decir, SEO, colecciones, últimos detalles etc
Aunque la herramienta es gratuita de usar, es necesario pagar para poder exportar el código y añadir scripts de código cómo google tag manager y otros. Es necesario exportar el código y poder almacenarlo en el hosting. No hay manera de evitar este paso. Hay mucha gente que utiliza Webflow de manera profesional y ya paga por la herramienta, por lo que directamente ya lo hacen. En muchos tutoriales lo veréis así.
En mi caso en particular, sólo cree esta web, por lo que tomé la decisión de pagar la subscripción por un mes (20€) y exportar el código.
Parece un poco absurdo, pagar 20€ y exportarlo a un hosting gratuito pero en realidad no lo es, ya que esos 20€ son mensuales y para este caso, no merecía la pena. sugiero que analicéis los precio de Edición y de Hosting ya que os puede interesar y evitar todo este proceso. El precio del hosting en Webflow lo podéis ver en las pestañas del propio proyecto (Billing)
Esta parte se integra con la que viene a continuación, tendrás que añadir la extensión de chrome de udesly para generar un archivo de configuración (tendrás que estar situado en el proyecto en webflow) que será necesario usar después en la herramienta udesly.
Udesly (para coleccionesCMS)
Si hemos creado nuestra web de Webflow con colecciones y queremos subirlo a Netlify para mantenerlo de manera dinámica (poder modificar, añadir o eliminar entradas), tenemos que acudir la herramienta que proporciona Udesly. Os dejo un enlace. Desde él podéis ver como subirlo a Netlify.
Design Jamstack powered website with Webflow Udesly.com
En esta parte el código cambiará de formato, el código será diferente. Lo tendréis que subir a un repositorio GIT (he intentado subirlo a netlify de manera manual pero no funcionó correctamente, no entiendo todavía por qué).
Para actualizar el código, lo mencionaré al final.
Netlify CMS
En Netlify, además de poder almacenar sitios estáticos también tiene la opción CMS. Para poder activiarla y modificar las entradas haremos lo siguiente:
- Dentro del proyecto, vamos identity y le damos a "enable".
- Scroll down para activar "Git gateway"
- Abrimos la URL del proyecto y ponemos al final "/admin".
- Se abrirá un PopUp para que nos podamos registrar.
Nota = En la parte de identity se puede configurar la forma de registrarse. Podéis configurarlo para crear cuentas mediante registro o mediante invitación.
Nota= En la pestaña de /admin ya tenéis todas las colecciones y su editor.
Dominio
Si necesitáis asignarle un dominio, particularmente he acudido a este tutorial para adquirirlo a través de SERED.
Añadir un DOMINIO en Netlify, tu WEB GRATIS (casi 😜)
Actualización de código
Este proceso tiene que ser a través de Udesly y GIT. Tendremos que repetir el proceso de descarga del proyecto y transformación con Udesly para a continuación volver a subirlo a GIT ( udesly lleva a cabo un git push automáticamente). Una vez actualizado ya se despliega sin necesidad de hacer nada.
También se podría subir el código a git de manera "manual" pero creo que es mas adecuado hacerlo mediante udesly.
Para finalizar
Como veis, no es un proceso difícil aun que requiere de foco para entender el workflow. Desde luego no es palabra del señor y si en algún momento, con esta guía os habéis sentido confundidos no dudéis en poneros en contacto conmigo y lo comentamos.
