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

1
2
3
4
5
6
7
8
9
10
11
12
    {
      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