image

Accede a bootcamps ilimitados y a más de 650 cursos

50
%OFF
Article image
Carlos Soares
Carlos Soares12/07/2024 12:42
Compartir

Como Hospedar Seu Site de Portfólio Gratuitamente no GitHub Pages

    Olá galera Dev!

    Depois de pensar bastante em que conteúdo publicar, resolvi voltar um pouco atras e mostrar como aprendi a utillizar o Github Pages para publicar meu site porfólio, deixando ele online e rodando 24h por dia, 7 dias por semana, e o melhor de forma totalmente gratuita e fácil de fazer. Sendo uma ótima opção para exibir seus projetos e habilidades de forma profissional, acessível para qualquer pessoa, em qualquer lugar. Vou mostrar o passo a passo e mostrar como o GitHub Pages pode ser uma ferramenta poderosa para você que esta começando na área de tecnologia, ou até mesmo quem já tenha certo conhecimento e queira uma maneira gartis de publicar seus projetos, deixando-os acessíveis ao mundo inteiro. Eu utilizo o github pages para para publicar meu repositório, e ficou desta forma:

    image

    Link do meu site/portfólio: https://carlos-cgs.github.io/CGS/

    O que é o Github Pages?

    GitHub Pages é um serviço gratuito oferecido pelo GitHub que permite que você crie sites estáticos diretamente a partir de um repositório GitHub. Isso significa que você pode hospedar seu site de portfólio sem custos, aproveitando o poder e a simplicidade do GitHub.

    Passo a Passo para Criar Seu Site de Portfólio no GitHub

    Crie um Repositório no GitHub

    • Primeiramente, acesse sua conta do GitHub e crie um novo repositório. Nomeie-o como username.github.io, substituindo username pelo seu nome de usuário do GitHub ou o nome que você deseja que apareça em seu portfólio. Este é um passo crucial, pois o GitHub Pages usará esse repositório para criar seu site.

    Clone o Repositório para o Seu Computador

    • Após criar o repositório, clone-o para o seu computador usando o Git. No terminal, digite:
    git clone https://github.com/username/username.github.io
    

    Adicione Seus Arquivos de Site

    • Adicione seus arquivos HTML, CSS e JavaScript ao repositório clonado. Você pode começar com um simples arquivo index.html e expandir a partir daí. Certifique-se de que seu arquivo index.html esteja na raiz do repositório.

    Faça o Commit e Push das Mudanças

    • Depois de adicionar seus arquivos, faça o commit e push das mudanças para o GitHub:
    git add .
    git commit -m "Adiciona arquivos do site portfólio"
    git push origin main
    

    Habilite o GitHub Pages

    • Vá até as configurações do seu repositório no GitHub. Role para baixo até a seção "GitHub Pages".

    image

    • Em "Source", selecione a branch main e clique em "Save".

    image

    Acesse Seu Site

    • Após habilitar o GitHub Pages, seu site estará disponível em https://username.github.io. Pode levar alguns minutos para que o site esteja completamente online.
    • Clique em Actions na parte superior para acompanhar o seu site subindo para o servido.

    image

    • Acesse a utlima workflow runs conforme imagem acima para acompanhar a build e o deploy do seu site.

    image

    Concluindo

    Busquei trazer de maneria fácil e simples como criar e hospedar um site de portfólio utilizando o GitHub Pages. Desde a criação do repositório até a publicação do site. Compartilhando com a comunidade Dev a facilidade de hospedar seu portfólio de forma gratuita e rápida. Espero ter ajudadado e esclarecido todas as dúvidas com relação a hospedagem de seu portfolio no github pages. Até a próxima.

    Vamos Disseminar os Conhecimentos e Transbordar Tudo que Aprendemos!

    Segue lá no LinkedIn: https://www.linkedin.com/in/carlos-cgs/

    Compartir
    Comentarios (6)
    Carlos Soares
    Carlos Soares - 18/07/2024 12:51

    Olá @MarcioPrado. Na parte que digo estático, me refiro a sites que não possuam algum tipo de servidor de banco de dados interno no site. Nunca subi nenhum conteúdo conectado com uma conexão API, mas segundo o que vi e estudei sobre, é sim possível fazer esta conexão via javascript.

    Marcio Prado
    Marcio Prado - 18/07/2024 10:05

    Olá Carlos, tudo bem?

    Tenho uma dúvida, sites estáticos quer dizer que só pode ter um arquivo HTML? Não pode fazer consulta a uma API?

    Porque tenho um projeto para publicar, tentei no Firebase e não consegui e tenho dúvida se é possível dessa forma no GitHub pages.

    UL

    Uberlania Lima - 17/07/2024 20:26

    Que legal

    IM

    Ingrid Machado - 17/07/2024 12:32

    Excelente dica! Obgda!

    FB

    Felipe Bezerra - 16/07/2024 19:26

    É muito útil, obrigado!

    Ironio Costa
    Ironio Costa - 12/07/2024 13:43

    Ótimo o seu trabalho: e dica boa ai pra galera , que tem alguma duvida!