Coloque no ar: publicando seu portfólio no GitHub Pages

Este conteúdo é a Parte 6 de 6 da trilha Projeto Portfólio Profissional. Acompanhe o hub da trilha: /projetos/criar-portfolio-profissional

Depois de criar a estrutura, o visual, as interações, a responsividade e os links do portfólio, agora vamos colocar o projeto no ar usando GitHub Pages.

Para um portfólio feito apenas com HTML, CSS e JavaScript, o GitHub Pages é uma opção direta e leve. Você não precisa configurar servidor, banco de dados ou uma plataforma mais avançada para esse primeiro projeto.

A ideia desta etapa é mostrar o caminho dentro do GitHub para ativar a publicação. O foco não é ensinar deploy complexo, e sim deixar claro onde clicar e o que conferir antes de compartilhar o link do portfólio.

Antes de abrir as configurações do GitHub Pages, confira se o projeto está organizado com os arquivos principais na raiz ou na pasta escolhida para publicação.

portfolio-profissional/
  index.html
  style.css
  script.js
  assets/
    foto-perfil.png

O arquivo mais importante é o index.html. O GitHub Pages procura esse arquivo como entrada do site quando publica uma página estática.

Com o repositório criado, envie os arquivos do portfólio para a branch principal. Se você estiver começando, pode usar o próprio GitHub Desktop, o VS Code ou comandos Git.

# Primeiro envio do projeto para o repositório.
git init
git add .
git commit -m "Cria portfolio profissional"
git branch -M main
git remote add origin https://github.com/seu-usuario/seu-repositorio.git
git push -u origin main

Troque seu-usuario e seu-repositorio pelos dados do seu GitHub. Se o repositório já existir na sua máquina, você não precisa repetir todos esses comandos.

Depois que o projeto estiver no GitHub, abra o repositório pelo navegador. No menu superior, clique em Settings para entrar nas configurações.

É nessa área que ficam as configurações de publicação, permissões e opções gerais do repositório.

Dentro de Settings, procure a seção Code and automation no menu lateral. Depois clique em Pages.

Esse é o caminho principal para publicar um portfólio estático no GitHub Pages: Settings, depois Pages.

Na tela do GitHub Pages, escolha a fonte de publicação. Para um projeto simples com HTML, CSS e JavaScript, normalmente você pode usar Deploy from a branch.

• Em Source, escolha Deploy from a branch.
• Em Branch, selecione main.
• Em Folder, selecione /(root) se o index.html estiver na raiz.
• Clique em Save para salvar a configuração.

Se você colocou o projeto dentro de uma pasta docs, a pasta escolhida deve ser /docs. O ponto principal é: o index.html precisa estar dentro da pasta publicada.

Depois de salvar, o GitHub pode levar alguns minutos para publicar o site. Quando estiver pronto, a própria tela do Pages mostra o link para visitar o projeto.

Abra o link em uma nova aba e teste o básico: menu, botões, links externos, e-mail, responsividade no celular e carregamento das imagens.

• O arquivo index.html está na pasta publicada.
• O style.css está conectado corretamente no HTML.
• O script.js está conectado no final do body.
• As imagens estão em caminhos relativos que funcionam no GitHub Pages.
• Os links de GitHub, LinkedIn, projetos e e-mail foram testados.
• O portfólio abre bem no celular e no computador.

Com o portfólio publicado, o próximo passo é evoluir com calma. Adicione novos projetos, melhore os textos, ajuste o visual e mantenha os links sempre funcionando.

O mais importante é não tratar o portfólio como algo fechado. Ele deve acompanhar sua evolução como desenvolvedor.