Publicação e navegação usando GitPage #2508

armadillogamearts · 2024-10-17T17:42:07Z

armadillogamearts
Oct 17, 2024

Boa tarde, publiquei um site utilizando o Gitpage, quando executo ele no meu pc, usando o Live server com o VSCode, funciona perfeitamente, mas quando abro a página publicada usando o GitPage, ele só funciona corretamente o index. Vou tentar detalhar melhor o que está acontecendo:

https://armadillogamearts.github.io/site/
Usando VSCode:
Clico em Live server, e funciona perfeitamente a navegação entre todas as páginas, menus, etc.

Usando GitPage:
O index abre bonitinho, como deve ser.

Meu index está configurado para, selecionar o idioma clicando no botão -> usuário deveria ser redirecionado para o idioma escolhido.

como estão estruturados os arquivos no meu computador:
fonts
media
pages
scripts
styles
templates
index.html

henriquetourinho · 2025-11-27T01:56:56Z

henriquetourinho
Nov 27, 2025

🚀 E aí! Desafio clássico do GitHub Pages!

Boa noite! Essa diferença de comportamento entre o Live Server (VSCode) e o GitHub Pages é o erro mais comum que a gente pega quando está subindo um projeto estático. O problema é quase 100% de certeza que está na forma como você configurou os caminhos dos seus links (href).

🔍 O Diagnóstico do Problema

Quando você usa o Live Server, ele serve o seu projeto como se fosse o servidor raiz (http://127.0.0.1:5500/), então, um link configurado como:

<a href="/pages/en/index.html">English</a>

... funciona perfeitamente, pois o / no início aponta para a raiz do servidor local.

No GitHub Pages, o seu site está dentro de um subdiretório (https://armadillogamearts.github.io/site/). Quando o navegador encontra aquele / inicial no link, ele ignora o subdiretório site e tenta buscar o arquivo na raiz:

https://armadillogamearts.github.io/pages/en/index.html (o que gera um erro 404).

✅ A Solução Simples e Robusta: Caminhos Relativos

Para resolver isso de forma que funcione tanto no Live Server quanto no GitHub Pages, o ideal é remover a barra inicial (/) dos seus caminhos, transformando-os em caminhos relativos:

1. Linkando para Subpáginas (A partir do `index.html`)

Se você está no index.html principal e quer ir para a pasta de idiomas:

ERRO: <a href="/pages/en/index.html">English</a>
CORRETO: <a href="pages/en/index.html">English</a>
- O link agora se resolve a partir da URL atual, preservando o /site/.

2. Linkando de Volta para a Raiz (A partir de subpáginas)

Se você está, por exemplo, em pages/en/index.html e quer voltar para o principal:

ERRO: <a href="/index.html">Home</a>
CORRETO: <a href="../../index.html">Home</a>
- O ../../ garante que você suba dois níveis na hierarquia de pastas (saindo de en e depois de pages), chegando ao diretório raiz do seu projeto.

💡 Dica Bônus: O Caminho `<base>`

Se você tem muitos links absolutos no seu código e não quer alterá-los manualmente, você pode usar a tag <base> dentro do seu <head>:

<head>
    <base href="/site/">
    ...
</head>

Note que você precisa saber o nome exato do repositório (site) e incluir a barra no final.

Próxima Etapa: Tente alterar o link de seleção de idioma no seu index.html para o formato relativo (sem a barra / no início) e me diz se resolveu!

Gostei da organização do seu projeto, cara! Se quiser mandar o link do seu repositório no GitHub para eu dar uma olhada no código, posso confirmar o problema rapidinho. Se essa foi a solução, me marca como a melhor resposta aí! Valeu! 😉

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Publicação e navegação usando GitPage #2508

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Publicação e navegação usando GitPage #2508

Uh oh!

armadillogamearts Oct 17, 2024

Replies: 1 comment

Uh oh!

henriquetourinho Nov 27, 2025

🚀 E aí! Desafio clássico do GitHub Pages!

🔍 O Diagnóstico do Problema

✅ A Solução Simples e Robusta: Caminhos Relativos

1. Linkando para Subpáginas (A partir do index.html)

2. Linkando de Volta para a Raiz (A partir de subpáginas)

💡 Dica Bônus: O Caminho <base>

armadillogamearts
Oct 17, 2024

henriquetourinho
Nov 27, 2025

1. Linkando para Subpáginas (A partir do `index.html`)

💡 Dica Bônus: O Caminho `<base>`