Cómo crear un iniciador Gatsby

Foto de Jed Owen en Unsplash

Hace unas semanas publiqué mi primer abridor para Gatsby y quiero compartir lo que aprendí de este viaje.

Como muchos entrantes en Gatsby, comenzó como una cartera personal. Después de publicarlo y compartirlo en Tweeter, la gente comienza a preguntarme si era de código abierto, y dije "Ermm sí ".

Técnicamente, todo el código estaba abierto para todos en Github, pero no era configurable en absoluto (mucha información codificada sobre mí). Entonces, en lugar de ayudar a los desarrolladores, fue una experiencia horrible cuando tienes que adivinar dónde cambiar el código.

Fue en este punto cuando comencé a pensar en crear un iniciador Gatsby para facilitar la configuración de la página. Mi objetivo era lograr una configuración de 2 minutos con pasos definidos, por lo que tuve que trabajar mucho para hacer algo configurable y también extensible.

# 1 Hazlo atractivo para los desarrolladores

Puede pensar en su iniciador como una página que está vendiendo a los desarrolladores (no obtendrá ningún dinero porque no es el punto de código abierto). Así que tienes que hacerlo atractivo Para eso sigo estas 3 reglas:

Hazlo funcionar.
Hazlo rápido.
Hazlo bonito.

Hacer que funcione es para que su aplicación sea realmente funcional y sin errores ni excepciones. Afortunadamente, tuve esta regla porque mi página ya funcionaba sin problemas.

Después de lograr esto, un buen consejo para este punto es hacer una lista de todas las características que implementó. Por lo tanto, un desarrollador puede echar un vistazo rápido a lo que contiene sin leer ninguna base de código.

Que sea rápido queda para construir una aplicación con un buen rendimiento general. Lograr este punto con Gatsby no es tan difícil, porque Gatsby ya está saliendo rápidamente de la caja Pero aún así, puedes escribir código que funcione horriblemente.

Para medir el rendimiento de mi aplicación, utilicé Google Lighthouse. Le proporciona un informe con estadísticas de diferentes aspectos en su aplicación, como rendimiento, accesibilidad, PWA y más.

Que sea bonito, esta regla se puede explicar con esta frase:

Si una aplicación se ve mal o si no es compatible con mi pantalla, entonces no la usaré.

¡Sí, es así de simple! Debes proporcionar algo que parezca atractivo para los demás y que también responda, lo cual es mi opinión que DEBE en el estado actual de desarrollo web.

Un buen consejo si está trabajando con React es elegir un sistema de diseño con componentes integrados. ¡Eso le ahorrará un montón de tiempo porque había un equipo completo que se tomó el tiempo para pensar cómo debería ser el espaciado, la paleta de colores, la fuente, la capacidad de respuesta y muchos más!

# 2 No codifique la información personal

Cuando busqué en mis páginas, pude detectar fácilmente que tenía una mezcla entre el componente y la información sobre mí. Un ejemplo rápido fue la página Acerca de mí, que se veía así:

Fragmento de la sección Acerca de mí

La solución fue "fácil", toda la información debe provenir de otros recursos, y afortunadamente hacerlo con Gatsby es increíblemente fácil.

Decidí usar un CMS para almacenar todos mis datos y luego mostrarlos en el motor de arranque, en este caso, elegí Contentful y estoy muy contento con eso .

El primer paso es crear un ContentModel donde pueda declarar la forma de los datos sobre el propietario de la cartera.

Modelo de contenido para mí

Después de eso, necesito llenar mi Modelo de Contenido con Datos creando un Contenido. Hice esto para proporcionar un ejemplo de cómo debería verse cuando completa toda su información, y también sin datos, el motor de arranque está completamente vacío

Fragmento de nuevo sobre mí

Al hacer esto, la persona que quiere cambiar la información sobre sí mismo no tiene que buscar en la estructura del componente para encontrar dónde se está montando la imagen. Simplemente ingrese a Contentful y cambie el activo para la imagen y eso es todo

# 3 Proporcionar una configuración rápida

Este es un paso crucial si desea alentar a las personas a comenzar a usarlo. Como mantenedor, debe proporcionar pasos simples para levantarse y ejecutar el iniciador.

Además, la configuración puede cambiar según lo que haya elegido para construir su iniciador. En mi caso, como utilicé Contentful como proveedor de datos, tuve que explicar una migración fácil de todo mi ContentModel y Content al espacio de otra persona.

Consejo rápido: recuerde agregar el nuevo comando gatsby como primer paso de la configuración. Es la forma en que la documentación sugiere hacerlo y también es mejor que clonar el repositorio.

Entonces, los pasos que definí para mi iniciador son:

  • gatsby nueva cartera de mate
  • configuración de hilo
  • desarrollar hilo

Intente ser lo más específico posible cuando introduzca un nuevo paso que normalmente no existe, en mi caso, configuración de hilo. Además, pego cómo debería verse el resultado de la consola si todo saliera bien.

# 4. Agréguelo a la lista oficial de entrantes de Gatsby

¡Este podría ser el paso más fácil y más agradecido, que básicamente se está oficializando!

Para cualquiera que no lo sepa, Gatsby tiene una lista de todos los entrantes dentro de su sitio web, y las personas (incluido yo) van allí buscando los entrantes. Este paso es como registrar un dominio para su sitio web para que los usuarios puedan descubrirlo en Google.

La forma de agregar su iniciador es simplemente abriendo una solicitud de extracción al repositorio de Gatsby y editando el archivo starters.yml donde escribe una breve descripción y la URL del iniciador.

- url: enlace a una demostración de su iniciador
  repo: enlace al repositorio de GitHub
  descripción: la descripción de tu iniciador
  # Estos corresponden a los filtros de categoría en la biblioteca
  # ¡Haga un esfuerzo para usar las etiquetas existentes y agregue más si es necesario!
  etiquetas:
    - Redux
  # Agregue las características de su sitio
  # Estos se incluirán en la página de detalles de su titular.
  caracteristicas:
    - Listado de publicaciones de blog con vistas previas (imagen + resumen) para cada publicación de blog

Después de fusionar su solicitud de extracción, podrá ver como una nueva entrada del escaparate. ¡Aquí puedes ver el mío!

¡Una última cosa, en el momento en que los mantenedores acepten su solicitud de extracción, usted será parte de la comunidad de Gatsby! Gatsby le da "botín gratis" a cualquier contribuyente (tienen una tienda donde puedes elegir gratis algunas cosas y entregarlas en tu casa), que es la mejor manera de mostrar gratitud a los desarrolladores, muchas gracias Gatsby

Le recomiendo que visite la comunidad de Spectrum, es un foro con desarrolladores increíbles para que pueda pedir cualquier cosa y también responder.

¡Eso es! Esta fue mi experiencia con la construcción de un motor de arranque Gatsby. Espero que les sea útil. En caso de que construyas uno también, comparte tu experiencia en el comentario