Skip to content

Latest commit

 

History

History
146 lines (105 loc) · 5.87 KB

github.mdx

File metadata and controls

146 lines (105 loc) · 5.87 KB
Raw
title description type i18nReady
Despliega tu proyecto de Astro en GitHub pages
Cómo desplegar tu proyecto de Astro usando GitHub Pages.
deploy
true

import { Steps } from '@astrojs/starlight/components';

Puedes usar GitHub pages para desplegar tu proyecto de Astro directamente desde un repositorio en GitHub.com.

Cómo desplegar

Puedes desplegar un proyecto de Astro en GitHub Pages usando GitHub Actions para construir y desplegar tu proyecto automáticamente. Para hacer esto, tu código fuente debe estar alojado en GitHub.

Astro mantiene la acción oficial withastro/action para desplegar tu proyecto con muy poca configuración. Sigue las instrucciones a continuación para desplegar tu proyecto de Astro en GitHub Pages y consulta el README si necesitas más información.

Configura Astro para GitHub Pages

Desplegando a una URL github.io

Configura las opciones site y, si es necesario, base en astro.config.mjs.

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://astronaut.github.io',
  base: 'mi-repo',
})

site

El valor de site debe ser uno de los siguientes:

base

Un valor para base puede ser requerido para que Astro trate el nombre de tu repositorio (por ejemplo, /mi-repo) como la raíz de tu sitio web.

:::note No configures un valor para base si:

  • Tu página se sirve desde la carpeta raíz.
  • Tu repositorio está ubicado en https://github.com/<USUARIO>/<USUARIO>.github.io. :::

:::caution Cuando este valor está configurado, todos los enlaces internos de tu página deben tener el prefijo del valor de base:

<a href="/mi-repo/acerca">Acerca</a>

Ve más sobre como configurar un valor base :::

Usando GitHub pages con un dominio personalizado

:::tip[Configurar un dominio personalizado] Puedes configurar un dominio personalizado agregando el siguiente archivo ./public/CNAME a tu proyecto:

sub.mydomain.com

Esto desplegará tu proyecto en el dominio personalizado en lugar de user.github.io. No olvides también configurar el DNS en el proveedor de dominio. :::

Para configurar Astro para usar GitHub pages con un dominio personalizado, configura tu dominio como el valor de site. No configures un valor para base:

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://example.com',
})

Configurar una acción de GitHub

1. Crea un nuevo archivo en tu proyecto en `.github/workflows/deploy.yml` y pega el siguiente YAML. 
```yaml title="deploy.yml"
name: Deploy to GitHub Pages

on:
  # Activa el flujo de trabajo cada vez que hagas push a la rama `main`
  # Usando un nombre de rama diferente? Reemplaza `main` con el nombre de tu rama
  push:
    branches: [ main ]
  # Te permite ejecutar este flujo de trabajo manualmente desde la pestaña Acciones en GitHub.
  workflow_dispatch:
  
# Permite que este trabajo clone el repositorio y cree un despliegue de página
permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  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@v3
        # with:
          # path: . # La ubicación raíz de tu proyecto de Astro dentro del repositorio. (opcional)
          # node-version: 20 # La versión específica de Node que debería usarse para construir tu sitio. Por defecto es 20. (opcional)
          # package-manager: pnpm@latest # El gestor de paquetes de Node que debería usarse para instalar dependencias y construir tu sitio. Detectado automáticamente basado en tu lockfile. (opcional)

  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
```

:::note
La acción de astro toma algunas entradas opcionales. Estas pueden ser proporcionadas descomentando la línea `with:` y la entrada que quieres usar.
:::

:::caution
La [acción](https://github.com/withastro/action) oficial de Astro escanea el lockfile para detectar tu gestor de paquetes preferido (`npm`, `yarn`, `pnpm`, o `bun`). Debes incluir el archivo `package-lock.json`, `yarn.lock`, `pnpm-lock.yaml` o `bun.lockb` en tu repositorio.
:::

  1. En GitHub, ve a la pestaña Settings de tu repositorio y encuentra la sección Pages de la configuración.

  2. Elige GitHub Actions como el Source de tu sitio.

  3. Haz commit del nuevo archivo de flujo de trabajo y haz push a GitHub.

¡Tu sitio debería estar publicado ahora! Cuando hagas push a los cambios en el repositorio de tu proyecto de Astro, la acción de GitHub los desplegará automáticamente por ti.