Usando o GitHub Pages

Aprenda como você pode usar o GitHub para hospedar sua página web online gratuitamente.

Logo do git e do github

O GitHub possui um recurso muito interessante chamado GitHub Pages. Com ele, você pode hospedar o seu site e usar um domínio gratuitamente para fazer a divulgação de seus projetos. Vale a pena lembrar que esse recurso demanda conhecimentos em linguagens que servem para desenvolver sites na web, como o HTML, CSS, js e várias outras linguagens. Saiba também que não é possível usar recursos mais complexos como Banco de Dados usando o mySQL com PHP, pois a ideia de hospedar um site no GitHub é meramente educacional e profissional, não comercial.

Se você está vendo essa parte do curso sem antes ter olhado para as partes anteriores, provavelmente você sentirá mais dificuldades em implementar o que será dito abaixo. Recomendo fortemente que você veja as aulas anteriores acessando:

Hospedando uma Página Web no GitHub

Vamos agora ver os passos que você deve seguir para hospedar sua página Web usando o GitHub. Perceba que esse site na qual você está acessando foi criado usando os passos apresentados abaixo.

  1. Crie um repositório com um nome obedecendo a seguinte sintaxe: username.github.io, sendo que o username deve ser exatamento o nome do usuário cadastrado na sua conta do GitHub.

Crie um repositório para hospedar sua página

Atente-se para não errar nada na hora de nomear o seu repositório.

  1. Ainda nas configurações, vá para o fim da página até encontrar a seção que fala sobre "GitHub Pages". Atente-se para que esse recurso esteja habilitado. Caso você não queira programar o seu site desde o início, você pode criar um bom documento README.md usando o Markdown (futuramente irei ensinar sobre isso) e escolher um template oferecido pelo própio GitHub em "Choose a theme".

Habilite os recursos do GitHub Pages

Certifique-se que os recursos na seção "GitHub Pages" estejam habilitados para que tudo funcione corretamente.

  1. Entretanto, se você sabe criar página web, é possívell hospedar todos os arquivos da página no repositório, assim você ganhará um domínio gratuito para promover os seus projetos (lembrando que o documento ../index.html é o arquivo padrão que ele abrirá como a home da sua página).

É possível programa a sua página desde o início

Saber programar para web é um diferencial na criação de página usando o GitHub Pages.

  1. Após ter criado um bom documento README.md e escolhido um template para a sua página, ou então programar a sua página totalmente usando HTML, CSS E js, você pode fazer um commit no seu repositório e sua página estará pronta para ser acessada.

Hospede todos os arquivos do site no seu repositório

Coloque todos os arquivos da sua página no GitHub. Ele funciona como um servidor para hospedar o seu síte com um domínio gratuito.

  1. Agora é só você digitar o domínio do site, que é exatamente o mesmo que se encontra nomeando o seu repositório e acessá-lo pelo seu navegador padrão.

O seu site possui um domínio com mesmo nome do repositório

Hospedando Mais de um Site na Mesma Conta

Caso você queira ter inúmeros sites hospedados no GitHub usando apenas uma única conta, saiba que é possível. Nas configurações do repositório em que você está usando, há uma sessão ao final exclusiva para habilitar o GitHub Pages. Observe as imagens abaixo para saber o que deve ser feito.

Mais de uma página em uma mesma conta

Vá nas configurações do seu repositório em GitHub Pages. Nela, você pode definir que a "branch master" do seu repositório (a padrão) seja o local que você hospede os arquivos do site.

Escolha um tema para o seu site

Se você optou por criar um site a partir do README.md, saiba que há templates prontos para uso ofertados pelo GitHub.

Próximos Passos...

Na próxima parte do curso vamos aprender a usar mais recursos do GitHub, de forma que você possa ser contribuidor em projetos de terceiros ou apenas sugerir alterações aos mesmos.

Está gostando do conteúdo? Compartilhe com seus amigos para que eles possam aprender também! Ajude a tornar a educação gratuita mais plural e democrática.

cyber gif

Aprenda mais em:

Alguma dúvida? Entre em contato comigo: