Astro + Github Pages

En esta entrada vamos a publicar un nuevo sitio web Astro en Github pages, para que veas cómo lo hago. ¿Lista? Vamos pues.

Requisitos previos

Node.js - v18.17.1 o v20.3.0 o mayor. (Astro no soporta: v19 )
VS Code con su plugin oficial para Astro
La terminal. Astro posee una herramienta CLI

🚀 Necesitamos un proyecto astro

Puedes usar tu proyecto actual y brincarte este paso, si no, pues vamos a crear un proyecto nuevo.

jsx

npm create astro@latestnpm install

Para ver que has completado la instalación con éxito. Puedes lanzar el servidor de desarrollo para comprobarlo.

jsx

npm run dev

Super, es momento de concentrarnos en lo bueno y ¡subir a Github Pages!

🐙 Necesitamos un repo en Github

Puedes usar el repo con el que ya estás trabajando y saltar este paso. Pero si estás siguiendo este ejemplo de cero, puedes crear un repo nuevo aquí, y agregarlo.

jsx

git remote add origin git@github.com:blissito/astro_github_pages_ejemplo.gitgit push -u origin main

Listo. Tu repo debería publicarse.

👀 No te olvides de relacionar tus credenciales de Github, yo lo uso con un keypar ssh.

👩🏻‍💻 Ahora la configuración para Github Pages

Vamos a tocar el archivo astro.config.mjs.

jsx

import { defineConfig } from 'astro/config'export default defineConfig({  site: 'https://blissito.github.io',  base: 'astro_github_pages_ejemplo',})

Toma en cuenta mi nombre de usuario y mi repo en site y base, **respectivamente. Cambia todo por lo tuyo. 😉

🚨 Importante

Todos los links de tu sitio Astro deben usar el prefijo que usas en base para que los links funcionen.

html

<a href="/astro_github_pages_ejemplo/contact">Contacto</a>

Esto es muy importante, recuerda que esto es estático. ☎️

🤖 Ahora vamos a usar Github actions

Aquí no hay que pensar mucho, solo copiar y pegar. No por eso no podemos saber cómo lo escribiríamos a mano he! Ojo. 👁️

.github/workflows

yaml

name: Deploy to GitHub Pageson:  # Trigger the workflow every time you push to the `main` branch  # Using a different branch name? Replace `main` with your branch's name  push:    branches: [ main ]  # Allows you to run this workflow manually from the Actions tab on GitHub.  workflow_dispatch:# Allow this job to clone the repo and create a page deploymentpermissions:  contents: read  pages: write  id-token: writejobs:  build:    runs-on: ubuntu-latest    steps:      - name: Checkout your repository using git        uses: actions/checkout@v4      - name: Install, build, and upload your site        uses: withastro/action@v2        # with:          # path: . # The root location of your Astro project inside the repository. (optional)          # node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional)          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)  deploy:    needs: build    runs-on: ubuntu-latest    environment:      name: github-pages      url: ${{ steps.deployment.outputs.page_url }}    steps:      - name: Deploy to GitHub Pages        id: deployment        uses: actions/deploy-pages@v4

No olvides hacer push. 🤓

yaml

git add -Agit commit -m "workflow"git push

Si has visto mis otros videos, encontrarás familiaridad con esta configuración. Aquí nomás hay que notar la branch y la acción del build, que automatiza la generación de los estáticos. ✅

Estamos pues, listos(as) para probar. 🥳

👀 Astro busca tu archivo .lock, asegúrate de tener alguno: package-lock.json, yarn.lock, pnpm-lock.yaml, o bun.lockb.

Abrazo. Bliss. 🤓

Astro + Github Pages

Héctorbliss

Mira el video:

Requisitos previos

🚀 Necesitamos un proyecto astro

🐙 Necesitamos un repo en Github

👩🏻‍💻 Ahora la configuración para Github Pages

🚨 Importante

🤖 Ahora vamos a usar Github actions

¿Qué es Prettier y por qué deberías usarlo?

Checa este otro Post

¿Por qué deberías usar Cloudflare Workers?

Checa este otro Post

Animaciones web con React + Motion 🧙🏻