Construyendo un blog con Gastby y Strapi, parte 4 - Desplegando Gatsby en Netlify

Este art铆culo es la parte 4 de la gu铆a "Construyendo un blog con Gatsby y Strapi" en esta parte nos enfocaremos en desplegar Gatsby sobre Netlify, si quieres mirar los art铆culos anteriores o siguientes:

Versionar cambios

Para desplegar en Netlify podemos hasta arrastrar una carpeta, soltarla sobre el recuadro de Netlify y funcionar谩 pero cuando queremos disfrutar de todas las bondades de integraci贸n continua que nos ofrece Netlify tambi茅n de forma gratuita lo mejor es tener nuestro proyecto versionado con Git, lo puedes subir a Github, Gitlab o Bitbucket. Ya que Netlify es compatible con cualquiera de estos, en este caso utilizar茅 Github como ejemplo. Lo primero en nuestro proyecto de Gatsby:

git init git add . git commit -m "primer commit antes del despliegue"

Crear un proyecto en Github

Creamos un proyecto en github y agregamos la rama remota a nuestro proyecto git local Crear nuevo proyecto publico

git remote add origin git@github.com:usuario/ejemplo-gatsby.git git push -u origin master

Comandos para agregar rama remota a un repositorio local

Ejemplo de los comandos que deber铆amos ejecutar si tu proyecto se llamar谩 "ejemplo-gatsby" como es mi caso.

Conectar con el proyecto de Strapi que est谩 en Heroku

Ahora debemos decirle a Gatsby de donde buscar la informaci贸n, ya no ser谩 en nuestro localhost sino en el proyecto que hemos desplegado en Heroku, por ello en el archivo gatsby-config.js justo en la configuraci贸n del plugin gatsby-source-strapi

{ resolve: "gatsby-source-strapi", options: { // Debemos cambiar la URL de la API aqu铆 // Atento a que no termine en / porque no funcionara, debe de ser tal cual como esta apiURL: "https://tu-api-de-strapi.heroku.com", contentTypes: [ "articulo" ], queryLimit: 1000, }, },

Luego de hacer este cambio los debemos versionar para subirlo a github:

git add . git commit -m "cambio de apiURL" git push origin master # Para subir los cambios

Accedemos a Netlify

  • L贸gin de Netlify
  • Completamos los datos 贸 utilizas alguna cuenta de acceso como Github

Seleccionar repositorio en Netlify

  • New site from Git
  • Github
  • Buscamos el nombre de nuestro repositorio, lo seleccionamos y completamos los datos de deploy. En el caso de Gatsby, Netlify los reconoce automaticamente Buscando repositorio por el nombre
  • Ejemplo de la configuraci贸n para integraci贸n continua de la rama master Configuraci贸n para la integraci贸n continua de master
  • Aceptar

En este momento se comienza a ejecutar el primer despliegue de tu aplicaci贸n de Gatsby en Netlify y de esta forma tendr谩s configurado la integraci贸n continua, cada vez que hagas un git push o git merge a la rama master se generar谩 un nuevo despliegue del sitio.

Una vez est茅 desplegado nuestra aplicaci贸n podremos acceder a ella por la URL que genera Netlify por defecto, en mi caso fue serene-booth-4d0954.netlify.com

Generar hook para desplegar desde Strapi

Ahora necesitamos tener una forma de avisarle a Netlify que el contenido en Strapi se actualizo para eso utilizaremos los Hooks de Netlify, para ello en Netlify:

  • Settings
  • Build & Deploy
  • Secci贸n de "Build Hooks"
  • Add build hook
  • Colocas el nombre de tu preferencia, ejemplo "DespligueDesdeStrapi"
  • Aceptar
  • Te entregar谩 una URL como esta https://api.netlify.com/build_hooks/5db3b003443as17ce0db516z
  • Tenla a mano que la usaremos en el pr贸ximo paso

Continua con: Construyendo un blog con Gastby y Strapi, parte 5 - Integrando Gatsby, Strapi y Cloudinary en producci贸n

Actualizado 26/10/2019 a las 03:47