🖖 Inicio

SERVICIOS

Salir

nochedía

Crear un website Gatsby

1300 palabras
5 minutos
May 6, 2020

Adaptando el contenido

Ya tenemos instalado el starter, ahora vamos a modificar el texto

En este caso se trata de una sola página que nos servirá de landing page para validar una idea, un concepto con el que pediremos un correo

Es decir nuestra conversión será visita -> correo, por lo que nuestro objetivo será el construir una mailing list para luego poder vender con email marketing

Evidentemente estoy adaptando el contenido (la propuesta) a la tecnología (nuestro website Gatsby) para tener un uso más aplicado de esta landing, pero lo suyo es hacerlo al revés, y aquí lo normal o habitual es tener una landing donde expliquemos qué ofrecerá lo que proponemos con más detalle e intentando convencer y persuadir

Esto aquí no lo tenemos, pero bien podría ser que esto ya lo hayamos explicado en un podcast o en un curso presencial u online en la que dejemos el link de nuestra páginas web

En este caso vamos a proponer un servicio para dar información sobre escape rooms en Barcelona, algo que se entiende fácil

Los fallos de esta propuesta es que nuestra credibilidad se basa enteramente en la estética de la página, cuando el público venga a la landing (tráfico frío) y vea que le pedimos el correo si quiere estar informado, tendremos sólo algo de copy y la estética de la página, con eso es con lo que tenemos que convencerlo de que somos capaces de darle una información que le será relevante

No es que sea la mejor estrategia, pero dependiendo de la temática podría ser más que suficiente (seguro que en el momento de la eclosión de los escape rooms lo hubiera sido), y en el curso nos servirá de excusa para ver cómo modificamos nuestro starter

Ojo, porque las modificaciones que hacemos aquí no son estándares, es decir no todos los starters se modifican de la misma forma, cada uno es hijo de su padre y de su madre

Esto lo podemos ver como un problema pero si profundizamos en Gatsby esto será en realidad una ventaja ya que la expresión "no son estándares" no aplica cuando sabes desarrollar, la estructura de un site Gatsby sí sigue una estructura determinada que es fácil de identificar

En cualquier caso cada starter debería informar de qué archivos hay que modificar (en este caso lo hace, lo tienes en repositorio GitHub o lo que es lo mismo en el archivo README en nuestro repositorio clonado)

Para el caso que ocupa, la mayoría de las modificaciones las podemos hacer en el archivo ./config.js

*Si te fijas en el código de arriba y lo comparas con el original verás que el punto y coma final ha desaparecido, esto es fruto de aplicar mis opciones de prettier en el vscode, algo que puedes consultar en el curso de Javascript Básico (capítulo 2)

Se trata de un objeto y por lo tanto es casi como un archivo JSON, si vas leyendo las variables y sus valores verás que es muy auto-explicativo, y si miramos nuestro localhost:8000 podremos identificar fácilmente qué es cada cosa (sin tener que mirar más código)

Empezamos

siteTitle es el texto que sale en la pestaña, le pondremos Escape Rooms Barcelona

Todo lo que empieza con manifest se refiere al manifiesto que adjuntamos en la página, y esto qué es?

Nos sirve para implementar el PWA o Progressive Web Application, algo que permite que los usuarios instalen nuestra web en sus escritorios de móvil

Por lo que cambiaremos los textos que nos interesan:

manifestName: 'EscapeRoomBCN',

manifestShortName: 'ESCROOM', // max 12 characters

El heading se refiere a lo que literalmente sale en la página web, esto se puede deducir del nombre pero en realidad este nombre de la variable podría haber cualquier otro, vamos a situarlo en el código

Si rebuscamos vemos que tenemos la página inicial index.js (es por definición la página principal, esto sí es un convenio de Gatsby) con el siguiente código

Sin entrar en detalle (pero para que vayas familiarizándoos) la página web en realidad se define con este fragmento

Y esto si lo quisiésemos expresar en html podría ser algo tan sencillo como lo siguiente

Porque en realidad los componentes de React (que ves que no son más que tags) devuelven html, pero claro, no simples <div> sino algo más elaborado

Pero esto lo digo porque nuestro texto se sitúa en el <Header /> y este vemos en el import de arriba que viene del archivo '../components/Header', que quiere decir (porque el .js es opcional) el '../components/Header.js'

Si vamos a ese archivo tenemos el siguiente código

Y aquí vemos dos cosas, primero que importa el archivo que estábamos configurando, el config.js, y segundo que está poniendo los textos dentro de <h1> y dentro de <p>, con lo que ya hemos confirmado que el heading de antes sí se refería al texto que vemos en la pantalla

Por lo tanto volvemos al ./config.js y cambiamos los títulos por lo siguientes:

Nos quedan los links sociales que vemos en la landing (localhost:8000) abajo de todo, algo que en realidad no queremos, como tampoco querríamos dar crédito al autor

Cómo, no dar crédito al autor? en realidad esto presenta un dilema, si dejamos el link al autor estamos yendo contra nuestra propuesta de valor, si lo quitamos estamos siendo desagradecidos e infringiendo la licencia MIT

La solución IMHO sería la de quitar esas referencias de nuestra landing, y otorgar el crédito una vez completada la conversión cuando ya nos han dado el mail, así eliminamos la fricción entre las dos necesidades

Esto lo podemos hacer en la página que hemos visto antes, la página inicial index.js donde sencillamente le quitamos el <Footer /> y el import correspondiente (el import podríamos dejarlo, pero para qué?)

Lo siguiente que podríamos hacer sería buscar fotografías de escape rooms y substituir las que utiliza nuestra landing (podemos ver los archivos en assets) y con esto ya tendríamos nuestra página lista y preparada para validar nuestra brillante idea: Mailing list para recomendar Escape Rooms

Opciones para monetizar podrían ser bien acordar una comisión con los distintos locales ofertados, bien desplazando nuestro producto hacia servicios de reserva y organización, o bien escalando hacia otras actividades de ocio, o bien simplemente conseguir cierto tráfico y luego vender el website

Eso sí, el starter no nos configura el servicio de suscripción, es decir, que ponemos un correo y aunque tengamos un mensaje de gracias no pasa nada

Esto qué quiere decir?

Si estuviésemos con WP tendríamos un servidor siempre presente y podríamos utilizar ese servidor con algún plugin para enviar correos, y podríamos enviarnos un correo cada vez que alguien rellenase el formulario (o lo que fuere)

Pero con Gatsby no tenemos ningún servidor con lo que no tenemos capacidad de enviar correos, por lo tanto como comenté necesitamos delegar este servicio

Posibilidades? Yo utilizo formcarry.com, y también está mailchimp.com, sendinblue.com, mailerlite.com, todos con free tiers generosos, o también podríamos simplemente enviarnos un correo utilizando el servidor de gmail con SendMail.js o posteando las direcciones en google sheets con googleSheets.js

Cuanto menos delegamos, más trabajaremos nosotros, y más nos formaremos, este compromiso siempre tenemos que tenerlo en cuenta

Por cierto, el mensaje de gracias o de error en el formulario de nuestro starter está en inglés y no está en el config.js

Si buscamos en vscode el thank you vemos que está en el EmailForm.js

Por lo que podemos hacer los cambios directamente en este archivo, en concreto en estas líneas

Y ahora sí, ya tendríamos nuestro site con el texto cambiado

*Si haces los cambios en el vscode y guardas, Gatsby te da el resultado en el mismo momento, a esto se le conoce como hot loading y acelera el desarrollo que es una delicia (llorarás de emoción)

Y ya hemos llegado al cuarto capítulo del curso donde nos hemos adaptado nuestro starter para que muestre nuestro copy simplemente modificando un par de archivos

Nos vemos en el quinto capítulo, en Publicar con GitHub y Netlify

Qué tal este capítulo?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]