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:
- Construyendo un blog con Gastby y Strapi, parte 0
- Construyendo un blog con Gastby y Strapi, parte 1 - Configurando Strapi
- Construyendo un blog con Gastby y Strapi, parte 2 - Configurando Gatsby
- Construyendo un blog con Gastby y Strapi, parte 3 - Desplegando Strapi en Heroku
- Construyendo un blog con Gastby y Strapi, parte 5 - Integrando Gatsby, Strapi y Cloudinary en producci贸n
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
git remote add origin git@github.com:usuario/ejemplo-gatsby.git git push -u origin master
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
- Ejemplo de la configuraci贸n para integraci贸n continua de la rama 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