Automatizar un blog de Gatsby con GitHub y Buddy

El lanzamiento de un blog o sitio web exitoso significa que su servidor necesitará poder manejar el tráfico que aumentará rápidamente en los próximos meses. Una campaña publicitaria efectiva o una asociación con un distribuidor de contenido puede generar fácilmente 10 veces más tráfico en un período de tiempo muy corto.

En este artículo, aprenderá cómo crear y ejecutar un sitio web estático capaz de manejar grandes cantidades de tráfico sin requerir una infraestructura de alojamiento costosa y compleja. Utilizaremos Gatsby, un generador de sitios web estáticos, y Buddy, una plataforma de integración y despliegue continuo. También le mostraré un flujo de trabajo efectivo para publicar nuevas publicaciones y actualizar las existentes utilizando un repositorio de GitHub.

Antes de comenzar, me gustaría que les muestre un gran ejemplo, Evie Magazine. Funciona con la misma tecnología que te voy a enseñar. Tome nota de la rapidez y capacidad de respuesta del sitio al hacer clic en los enlaces.

Veamos ahora qué hay de malo con los sistemas de administración de contenido:

Por qué no deberías usar el sistema de gestión de contenido

La forma más popular de crear sitios web es usar WordPress o un sistema de administración de contenido alternativo como Drupal y Joomla. Todos funcionan con la misma tecnología: PHP y MySQL Database. Un CMS es ideal para usuarios no técnicos que buscan comenzar a ejecutar su propio sitio web. Es fácil de usar y requiere poca experiencia técnica para publicar contenido con él. Sin embargo, cuando el tráfico comienza a ser masivo, la administración del sitio rápidamente se sale de control.

**El primer problema es el rendimiento**. Para cada solicitud que realiza un visitante, se requieren dos programas de servidor (servidor PHP y base de datos MySQL) para procesar la solicitud. Bajo tráfico normal, esto generalmente demora unos segundos en procesarse. Sin embargo, si el sitio web está muy diseñado y cargado con complementos, puede llevar más tiempo. El problema empeora con el alto tráfico ya que los programas del servidor luchan por procesar cada solicitud a tiempo.

**El segundo problema es la seguridad**. Tómese un minuto y visite CVEDetails. Este es un sitio web de seguridad en línea que enumera las vulnerabilidades descubiertas en todo tipo de software. Te sorprenderá ver la cantidad de vulnerabilidades encontradas en las bases de datos PHP y SQL. Para empeorar las cosas, hay cientos de tutoriales que puedes encontrar en línea que enseñan a los usuarios diferentes técnicas para hackear un sitio web de WordPress. Las instrucciones son fáciles de seguir y hasta un niño de 12 años puede hacerlo.

Afortunadamente, existen soluciones y soluciones a todos estos problemas. Desafortunadamente, algunos de ellos implican mucho tiempo y dinero para implementar. Gastar dinero no es un gran problema si puede resolver un problema rápidamente. Pero pasar tiempo en el mismo problema todo el tiempo afectará seriamente la productividad.

Estoy seguro de que, como la mayoría de las personas, querrás pasar más tiempo produciendo contenido y no lidiar con problemas de alojamiento y seguridad. Para saber cómo puede lograr eso, eche un vistazo a la siguiente sección.

---

Presentación de Gatsby — Generador de sitios web estáticos

Gatsby es un generador de sitio estático gratuito de código abierto basado en React. Genera archivos HTML estáticos utilizando datos procedentes de archivos de descuento, sistemas de gestión de contenido o una API personalizada. A continuación se muestra una ilustración de la configuración:

En este ejemplo, los artículos se escriben como archivos de descuento y se guardan en un repositorio privado. Un sistema de implementación continua selecciona automáticamente los artículos de rebajas enviados y utiliza Gatsby para convertirlos en páginas web estáticas que luego se implementan en un servidor web. Los visitantes simplemente cargan estas páginas web estáticas mientras navegan por el sitio web.

**La primera ventaja** para los sitios web estáticos ** es que **la carga de la página se produce instantáneamente** ya que no se realiza ningún procesamiento en el servidor. Por lo tanto, un solo servidor es capaz de atender más solicitudes por segundo que un servidor PHP que utiliza los mismos recursos de CPU y memoria. Los sitios web estáticos también son mucho más fáciles de escalar, ya que no hay una base de datos involucrada.

**La segunda ventaja** para los sitios web estáticos es la **seguridad**. No hay ningún complemento, código de servidor o base de datos para explotar en el servidor web público. Tampoco hay credenciales o información confidencial almacenada en el sitio web estático. Esto elimina efectivamente el incentivo para que un hacker busque formas de entrometerse en su sitio web. Además, ya no tiene que perder tiempo tratando con parches de software o resolviendo problemas de seguridad y rendimiento.

Hay muchos más beneficios que no he mencionado. Creo que he dicho lo suficiente para garantizar su atención. En las secciones siguientes, le mostraré cómo configurar su sitio web estático usando **Gatsby*, *GitHub** y **Buddy**.

Prepare un sitio de alojamiento

Lo primero que deberá hacer es configurar una ubicación en línea para implementar su sitio web estático. Hay tantos servicios en línea que le permiten hacer esto, como:

• Amazon S3
• AWS Amplify
• Firebase
• CloudFront
• Now
• Surge
• GitHub Pages
• Heroku

También puede implementar en un sitio de alojamiento web compartido que es lo que usaremos para este tutorial. Prefiero alojamiento compartido ya que obtienes acceso a más valor por tu dinero, p. alojamiento de correo electrónico, FTP, SSH, gestión de dominio, SSL gratis e.t.c. Usaré una cuenta que poseo con FastComet. Cualquier empresa de hosting que le brinde acceso a CPanel lo hará. Si no tiene uno, puede obtener un servicio de alojamiento web gratuito con acceso a CPanel en Free Hosting.

Una vez que haya iniciado sesión en su cuenta y ya tenga un nombre de dominio que puede usar. Realice los siguientes pasos:

1. Crear un subdominio, gatsby.example.com. (En este caso usaremos gatsby.wallesdevelopers.com)
2. Cree una cuenta FTP que apunte a su directorio de subdominio

Nota: Para un sitio web de producción real, use su dominio principal. Solo estamos usando un subdominio para los propósitos de este tutorial.

Deberá guardar sus credenciales de FTP en algún lugar que usaremos durante la configuración de la canalización de Buddy. Una vez que haya completado los pasos, pase a la siguiente etapa.

---

Configuración del blog de Gatsby

Suponiendo que ya tiene Node.js instalado en su sistema, cree un nuevo proyecto de blog de Gatsby con los siguientes comandos:

​ $ npm install -g gatsby-cli
​ $ gatsby nuevo amigo-gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog
​ $ cd buddy-gatsby-blog
​ $ npm install
​ $ npm start

El blog que acabamos de crear se basa en una plantilla de proyecto creada y mantenida por el fundador, Mathew Kyle. Para confirmar que está funcionando, simplemente abra un navegador en **localhost: 8000**. Si editara cualquiera de los archivos de descuento, notará que los cambios son instantáneos. Subamos ahora este proyecto a nuestro repositorio de GitHub.

Primero, vaya a su cuenta de GitHub y cree un repositorio completamente en blanco: **buddy-gatsby-blog**. Asegúrese de no inicializar ningún archivo durante el proceso de creación del repositorio.

A continuación, necesitamos clonar este repositorio en nuestro disco duro. Antes de hacer eso, hay algo que debe tener en cuenta.

Por defecto, al menos en mi caso, **ssh** es el protocolo que uso para clonar repositorios. En una sección posterior, trabajaremos con GitHub Desktop. Desafortunadamente, esta herramienta no funciona bien con **ssh**. Parece que no hay una manera fácil de hacer que funcione especialmente en Windows. Para evitar esta molestia, cambie a https durante el proceso de clonación.

Suba el proyecto **buddy-gatsby-blog** a su repositorio de GitHub con los siguientes comandos. Ingrese su nombre de usuario y contraseña de GitHub cuando se le solicite:

$ cd buddy-gatsby-blog
# reemplaza {username} con tu nombre de usuario de GitHub
$ git remote add origin https://github.com/{username}/buddy-gatsby-blog.git
$ git push -u maestro de origen

Despliegue con Buddy

Ahora que tenemos nuestro repositorio remoto listo, es hora de implementar nuestro sitio web. Primero, regístrese para obtener una cuenta gratuita en Buddy. Te recomendaría que te registres con tu cuenta de GitHub. Esto facilitará la selección de su proyecto en el siguiente paso. Utilizaremos esta plataforma para automatizar el proceso de implementación de nuestro sitio web estático.

Luego, haga clic en **New Project*. Seleccione *GitHub** como su proveedor de alojamiento Git y luego seleccione o escriba **buddy-gatsby-blog** en la sección del repositorio. Espere unos segundos y se le presentará la opción de crear una nueva pipeline(React). Haga clic en el botón y se le presentará un formulario para definir los detalles de su tubería. Simplemente ingrese lo siguiente:

• Name : Build & Deploy
• Trigger Mode : On push
• Branch : Single branch — master

1. Construir acción

Buddy es lo suficientemente inteligente como para detectar que estamos trabajando con un proyecto de Gatsby. Seleccione **Gatsby CLI**, que es un contenedor docker especializado creado para ejecutar el comando Gatsby CLI. Después de seleccionarlo, especifique los siguientes comandos en la sección bash:

Haga clic en el comando **Add this action** para confirmar. Se lo dirigirá a la página de resumen de la pipeline.

2. Implementar acción

Justo debajo de la acción **Execute:gatsby build*, haga clic en el signo más para agregar una nueva acción. Esta vez seleccione FTP y ponga sus credenciales FTP que guardó anteriormente. Asegúrese de seleccionar *Source path** y la **Remote path** correctamente.

Tenga en cuenta que / en **Remote path** en realidad apunta a la carpeta de subdominio especificada durante la creación de la cuenta FTP. no la raíz del servidor web real. Haga clic en el botón **Add this action**.

Ejecutar Pipeline

La siguiente página debe mostrar sus acciones principales. Haga clic en el botón **Run Pipeline*, luego presione el botón *Run Now** en la página siguiente. Espere unos minutos para que se complete el proceso de compilación e implementación. Una vez hecho esto, abra su navegador e ingrese la URL que utilizó para crear su subdominio para confirmar que la implementación se realizó correctamente:

Ahora que hemos automatizado el proceso de implementación, hablemos ahora sobre el flujo de trabajo de administración de contenido en la siguiente sección:

---

Flujo de trabajo de gestión de contenido con GitHub

Los escritores de contenido a menudo son personas no técnicas que rara vez verá abrir un terminal para ejecutar un comando. Afortunadamente, tenemos herramientas GUI que harán que la administración de contenido sea muy fácil. En mi opinión, este flujo de trabajo es mucho mejor y más fácil de trabajar que los editores de contenido WYSIWG de WordPress.

Primero, los escritores necesitan aprender a escribir usando el formato Markdown. Es realmente simple de aprender y no debería tomar más de 30 minutos para dominarlo. Después de eso, usarán este formato por el resto de su vida. A continuación, deberán descargar e instalar typora.io, un editor crafted markdown maravillosamente diseñado.

A continuación, deben crear una cuenta con GitHub. Como administrador del repositorio, debe darles acceso al repositorio **buddy-gatsby-blog**. Deberían poder clonar el repositorio, crear nuevas sucursales y enviar solicitudes de extracción. Sin embargo, no se les debe permitir actualizar el maestro directamente. Solo los editores deberían poder fusionar nuevos artículos con la rama maestra.

Aquí el sitio interactive training site que enseña a los principiantes sobre la ramificación de Git. Cada escritor necesita descargar e instalar GitHub Desktop. Tendrán que clonar el repositorio remoto en su disco duro antes de poder comenzar a escribir artículos.

Una alternativa es instalar Visual Studio Code, que proporciona edición de rebajas y herramientas de administración de repositorio GitHub, interfaz todo en uno. En la siguiente sección, le mostraré cómo crear y enviar nuevos artículos para que los editores los revisen.

Crear un nuevo artículo

Para crear un nuevo artículo, se deben seguir los siguientes pasos:

1. Usando GitHub desktop, mientras la rama maestra está activa, cree una nueva rama, ej. **gatsby-post**
2. Abra el proyecto **buddy-gatsby-blog** en Typora. Cree una nueva carpeta en el blog llamada **gasby-post**.
3. Dentro de esta carpeta, cree un nuevo archivo markdown: **index.md**.
4. Escribe contenido markdown. Debe especificar la sección front matter en la parte superior. Aquí hay una muestra:

1. Después de guardar el archivo, vaya a GitHub desktop y confirme los nuevos cambios.
2. Luego haga clic en el botón Publish this Branch.
3. A continuación, haga clic en el botón Create Pull Request. Esta es básicamente una solicitud formal para que el editor revise el borrador y fusione la nueva rama con master. Se abrirá una página web donde el escritor confirmará el envío de la solicitud de extracción.

Y así es como un escritor puede crear y enviar un nuevo artículo para el blog de Gatsby. Ahora es el turno de los editores para revisar el borrador.

Revisión de un borrador y publicación

La responsabilidad de revisar un borrador debe ser un editor u otro escritor. A menudo es difícil para un autor criticar su propio trabajo de manera objetiva. Por lo tanto, alguien más necesita verificar su trabajo. El proceso de revisión es el siguiente:

1. El editor localiza la solicitud de extracción enviada en GitHub desktop en el sitio web de GitHub.
2. El editor revisa el artículo y coloca comentarios en línea utilizando las herramientas de revisión del sitio web de GitHub para que el autor pueda realizar cambios. El autor será notificado por correo electrónico de GitHub para actuar sobre esos comentarios de revisión. A veces, el proceso de revisión puede ser un proceso de ida y vuelta entre el escritor y el editor. El editor puede decidir hacer los cambios si son menores.
3. Si todos están contentos con el artículo, el editor lo fusiona con la rama maestra.
4. Esto hace que Buddy realice un proceso de compilación e implementación. Dentro de un par de minutos, el nuevo artículo aparecerá publicado en el sitio en vivo.

Y así es como se lleva a cabo el proceso de revisión de un borrador y publicación. En la siguiente sección, veremos cómo podemos actualizar un artículo que ya ha sido publicado.

Actualización de un artículo publicado

Actualizar un artículo que ya ha sido publicado es tan fácil como el pastel. Tenga en cuenta que solo los usuarios autorizados para ingresar a la rama maestra pueden hacer esto:

1. Cambiar a la rama maestra
2. Localice y abra el artículo en Typora o en su editor de rebajas favorito.
3. Haz los cambios, guarda y haz un commit
4. Empuje la nueva confirmación al repositorio remoto

Buddy recogerá el nuevo commit, reconstruirá el sitio estático y lo implementará automáticamente. Dentro de un par de minutos, debería ver la actualización del artículo publicado. Tenga en cuenta que debido al almacenamiento en caché del navegador, es posible que no lo vea de inmediato. Puede realizar una actualización completa en Chrome para borrar la memoria caché de la página y ver el nuevo estado del artículo.

Resumen

Como puede ver, configurar y ejecutar un sitio de blog estático es bastante fácil y tiene muchas ventajas sobre una plataforma CMS tradicional. Si desea agregar funciones tales como formularios de contacto, inicios de sesión de usuario, etc., deberá implementar un proveedor de servicios local o de terceros que pueda manejar esas interacciones dinámicas por usted. Por ejemplo, implementar un sistema de comentarios es tan simple como integrarse con una plataforma como **Disqus**. Debe tener en cuenta que si más scripts de terceros integra, más su sitio estático se vuelve más pesado. Siempre debe buscar alternativas que sean beneficiosas tanto para su negocio en línea como para su audiencia. Por ejemplo, en lugar de mostrar anuncios molestos en sus publicaciones, puede monetizar su blog promocionando productos y servicios a través de enlaces de afiliados. De esta manera, le brinda a su audiencia una experiencia de lectura limpia y al mismo tiempo gana un montón de dinero.

Si bien aún existen ciertas limitaciones en el tipo y tamaño de los sitios web que puede construir hoy en día utilizando generadores de sitios estáticos, esas limitaciones eventualmente se resolverán. No pasará mucho tiempo cuando los generadores de sitios estáticos se conviertan en la tecnología dominante para construir nuevos sitios.