Faça o deploy do seu site Astro no GitHub Pages
Você pode usar o GitHub Pages para hospedar o seu site Astro diretamente do seu repositório no GitHub.com.
Como fazer o deploy
Seção intitulada Como fazer o deployVocê pode fazer o deploy através de GitHub Actions para automaticamente gerar o build e fazer o deploy do seu site. Para isso, o seu código-fonte precisa estar hospedado no GitHub.
O Astro mantém oficialmente o withastro/action
para fazer o deploy do seu projeto com pouquíssima configuração. Siga as instruções abaixo para realizar o deploy do seu site Astro no GitHub Pages, e leia o README do pacote se você precisa de mais informações.
-
Defina as opções de
site
e, se necessário,base
emastro.config.mjs
.astro.config.mjs import { defineConfig } from 'astro/config';export default defineConfig({site: 'https://astronaut.github.io',base: '/meu-repositorio',});site
deve serhttps://<SEU_NOME_DE_USUARIO>.github.io
ouhttps://meu-dominio-personalizado.com
base
deve ser o nome do seu repositório após uma barra para frente, por exemplo/meu-repositorio
. Isso para que o Astro posso entender que a raiz do seu site está em/meu-repositorio
, em vez do padrão/
.
Não defina o parâmetro
base
se:- Sua página for servida do diretório raiz.
- Seu repositório está localizado em
https://github.com/<NOME_USUARIO>/<NOME_USUARIO>.github.io
. - Você está usando um domínio personalizado.
Se você não tinha determinado um valor de
base
anteriormente, e só está configurando esse valor para fazer o deploy pelo GitHub, você deve atualizar os links internos das páginas para incluirbase
.<a href="/meu-repositorio/sobre">Sobre</a> -
Crie um novo arquivo no seu projeto em
.github/workflows/deploy.yml
e cole o YAML abaixo.deploy.yml name: GitHub Pages Astro CIon:# Ativa o workflow toda vez que você fizer um push para a branch `main`# Usando um nome de branch diferente? Modifique `main` para o nome da sua branchpush:branches: [main]# Permite que esse workflow seja executado manualmente da aba "Actions" no GitHub.workflow_dispatch:# Permite que este job clone o repositório e crie uma página de deploypermissions:contents: readpages: writeid-token: writejobs:build:runs-on: ubuntu-lateststeps:- name: Checkout your repository using gituses: actions/checkout@v3- name: Install, build, and upload your siteuses: withastro/action@v1# with:# path: . # A localização da pasta raiz do seu projeto Astro dentro do seu repositório. (opcional)# node-version: 18 # A versão específica do Node que deve ser utilizada para a build do seu site. A versão padrão é a 18. (opcional)# package-manager: pnpm@latest # O gerenciador de pacotes usado para instalar as dependências e fazer a build do site. É automaticamente detectado a partir da sua lockfile. (opcional)deploy:needs: buildruns-on: ubuntu-latestenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}steps:- name: Deploy to GitHub Pagesid: deploymentuses: actions/deploy-pages@v1A action do Astro aceita alguns parâmetros opcionais. Esses podem ser definidos removendo o comentário da linha que começa com
with:
e do parâmetro que você deseja usar.A action oficial do Astro escaneia por uma lockfile para detectar o seu gerenciador de pacotes favorito (
npm
,yarn
, ‘pnpmou
bun). Você deve realizar o commit do
package-lock.json,
yarn.lock,
pnpm-lock.yamlou
bun.lockb` criado automaticamente pelo seu gerenciador de pacotes favorito no seu repositório. -
No GitHub, vá para a aba Settings do seu repositório e encontre a seção Pages das configurações.
-
Escolha GitHub Actions como a Source do seu site.
-
Faça o commit do novo arquivo de workflow e faça push para o GitHub.
O seu site deve estar publicado agora! Quando você fizer push de mudanças para o repositório do seu projeto Astro, a Action do GitHub irá fazer deploy delas automaticamente para você.
Você pode opcionalmente configurar um domínio personalizado adicionando o arquivo ./public/CNAME
a seguir no seu projeto:
meu.subdominio.com
Isso vai realizar o deploy do seu site no seu domínio personalizado ao invés de usuario.github.io
. Não se esqueça de também configurar o DNS no seu provedor de domínios.