Leonardo.DEV

Como criar um site estático com GitHub Pages

Publicado em 25/11/2025

Bate-papo rápido

“Por que não usar uma plataforma já existente?” você deve estar se perguntando. No meu caso, a resposta é simples: eu quero desenvolver, aprimorar e testar minhas habilidades como desenvolvedor — desde o back-end até o front-end e também a parte de implantação. Hoje tudo está em um nível simples, mas no futuro pretendo criar uma pipeline de deploy com CI/CD.

No momento deste post, o blog está hospedado no GitHub Pages . Porém, quando eu decidir implementar funcionalidades como sistema de likes, comentários ou outras interações, provavelmente vou precisar de um back-end, e o GitHub Pages não oferece esse suporte. Isso pode eventualmente me levar a migrar para a AWS — mas esse é assunto para outro post. Agora se você, assim como eu, quer criar seu próprio site estático, vamos seguir com o hands-on!

Introdução

O GitHub Pages permite que você hospede sites estáticos gratuitamente diretamente de um repositório GitHub. Você pode usar HTML, CSS e JavaScript, sem necessidade de servidor backend. Segundo a documentação oficial: “GitHub Pages publica qualquer arquivo estático do qual você faz push no repositório.”

1. Crie um repositório no GitHub

Acesse o GitHub e crie um novo repositório. Você pode usar um repositório existente ou criar um novo, conforme a documentação oficial do GitHub Pages. Se for criar do zero, dê um nome relevante (por exemplo, `meu-blog`) e adicione um README.

2. Crie o arquivo de entrada do site

Na branch que você escolheu para publicar, crie um arquivo `index.html` (ou `index.md`). O GitHub Pages usará esse arquivo como ponto de partida do seu site.

3. Configure o GitHub Pages

Vá até a aba Settings → Pages no repositório. Em “Source” (“Origem”), selecione a branch (por exemplo, `main`) e a pasta raiz (`root`) para publicar.

4. Publique e veja seu site

Após a configuração, o GitHub Pages começará a publicar seu site. Pode levar alguns minutos para que o deploy apareça. Você poderá acessar via `https://seu-usuario.github.io/nome-do-repo/` (ou domínio personalizado, se configurado).

5. Próximas etapas

Agora que você tem um site estático no ar, pode adicionar mais páginas HTML, CSS customizado, JavaScript e até posts estáticos. Se quiser usar geradores de site estático (como Jekyll, Hugo, etc.), você pode seguir a documentação oficial para gerar conteúdo.

Dica extra

Você também pode criar uma branch dev e enviar suas alterações para ela antes de fazer o merge para a branch main. Isso mantém o fluxo de trabalho mais organizado e torna o processo mais profissional. Espero que tenha gostado do conteúdo e se te ajudou em algo, compartilha para que esse conteudo ajude outros também.
Até a próxima!

← Voltar