Tutorial: Primeros pasos con Astro — 11. Desplegando en Netlify

00:00 / 00:00

1x

0.25x 0.5x 0.75x 1x 1.25x 1.5x 1.75x 2x

• 1. Creando el proyecto en Content Island
• 2. Definiendo el modelo de datos
• 3. Añadiendo datos
• 4. Creando el proyecto en Astro
• 5. Creando la estructura de carpetas
• 6. Conectando Content Island con Astro
• 7. Montando la página de About
• 8. Página con lista de posts
• 9. Montando un post
• 10. Despliegue automático con Astro y Content Island usando GitHub Actions
• 11. Desplegando en Netlify
• 12. Automatizar el despliegue con GitHub Webhooks + Content Island

11. Desplegando en Netlify

Netlify es una plataforma de alojamiento y automatización que permite a los desarrolladores desplegar aplicaciones web estáticas de forma sencilla y rápida.

Además, Netlify ofrece un plan gratuito que incluye:

• Alojamiento de sitios web estáticos.
• Certificado SSL.
• Integración continua.
• Despliegue de ramas y pull requests.

En este ejemplo, vamos a ver cómo desplegar el proyecto "Get Started Astro" de Content Island en Netlify.

Paso 1: Crear un repositorio

Lo primero que necesitamos para desplegar este proyecto es un repositorio de GitHub:

• Abrimos nuestra cuenta en Github y le damos a crear uno nuevo.
• Le damos un nombre. get-started-deploy-netlify
• Podemos crearlo público o privado, como queramos. Porque después vamos a darle permisos a Netlify para que se conecte al repositorio.
• Y le damos directamente al botón de crear sin añadir ningún fichero.

Copiamos la URL del repositorio que acabamos de crear y lo clonamos en nuestro ordenador, en una carpeta vacía utilizando el siguiente comando:

git clone <URL del repositorio> .

Ponemos un punto al final para que git no añada una carpeta extra con el nombre del repositorio.

Ahora, teniendo clonado el repositorio con el proyecto de Astro, simplemente copiamos el contenido de la carpeta blog-site a la que acabamos de crear y lo subimos al repositorio con los siguientes comandos:

git add .
git commit -m "Initial commit"
git push

Vemos que ahora ya esta subido el proyecto a nuestro repositorio de GitHub.

Paso 2: Configurar despliegue

Para configurar el despliegue en Netlify, necesitamos tener una cuenta en la plataforma.

Una vez logados, en la página principal, le damos al botón de Add new site y seleccionamos la opción Import an existing project.

Le decimos que queremos desplegar el repositorio con GitHub que es donde tenemos nuestro proyecto.

Si es la primera vez que lo hacemos, tenemos que darle permisos a Netlify para acceder a nuestra cuenta de GitHub.

Podemos seleccionar todos los repositorios o solo los que queramos. En este caso, seleccionamos el repositorio que acabamos de crear.

Una vez configurado, ya podemos seleccionar el repositorio que queremos desplegar y nos aparecerán las opciones de configuración.

Seleccionamos el nombre de la aplicación que usará Netlify como subdominio:

Si lo necesitamos, podemos cambiar las settings de compilación, pero en este caso podemos dejar las que vienen por defecto.

Vamos a añadir una nueva variable de entorno porque recordemos que cuando se ejecuta la build del proyecto, se conecta con nuestro proyecto de Content Island para recuperar los datos de cada Post

Por lo que necesitamos configurar la variable de entorno CONTENT_ISLAND_SECRET_TOKEN y obtenemos el valor que nos proporciona Content Island en la pestaña General.

Y le damos a Deploy.

¡Y listo! Ya tenemos nuestro proyecto con Content Island y Astro desplegado en Netlify.

Paso 3: Configurar webhook en Content Island

Ahora, para que cada vez que hagamos un cambio en nuestro contenido de Content Island, se vuelva a desplegar el proyecto en Netlify, necesitamos configurar un webhook en nuestro proyecto.

Una vez logados en nuestra cuenta y después de seleccionar nuestro proyecto, vamos a la pestaña Webhook.

Le damos a Añadir nuevo Webhook y seleccionamos Netlify en el desplegable.

Primero, nos pedirá un nombre para el webhook (por ejemplo podemos usar el nombre que le dimos al proyecto en Netlify get-started-deploy-netlify).

Y para la URL del webhook, debemos ir a la configuración del proyecto en Netlify, en la sección Project configuration > Build & deploy y hacemos scroll hasta el apartado Build hooks:

Aquí, le damos a Add build hook, le ponemos un nombre (por ejemplo Content Island Webhook) y seleccionamos la rama main para que se despliegue cada vez que se active el webhook.

Por último, copiamos la URL que nos proporciona Netlify y la pegamos en el campo de URL del webhook en Content Island y guardamos los cambios.

¡Y ya está todo listo! Ahora, cada vez que hagamos un cambio en nuestro contenido de Content Island, se activará el webhook y se volverá a desplegar nuestro proyecto en Netlify.