Se você acabou de criar a sua primeira página web utilizando HTML e CSS deve estar se perguntando, como faço para publicar isso para que o mundo possa ver e ter meu primeiro website online? Nesse blogpost o professor Otacilio Maia vai explicar o passo a passo de como hospedar gratuitamente um website utilizando o GitHub Pages.

Git o quê?

Se você ainda não sabe o que é o Git e o GitHub, saiba que você está prestes a aprender uma das ferramentas mais poderosas e fundamentais na carreira de uma pessoa desenvolvedora de software, e para dominar esta ferramenta te recomendamos o curso profissional de Git e GitHub (https://platzi.com.br/cursos/git-github/).

Mas mesmo que você não conheça ou saiba utilizar Git e GitHub com este tutorial será possível prosseguir e hospedar sua primeira página, afinal utilizaremos apenas a interface web do GitHub. Basicamente o que você precisa saber é que:

• Git é uma ferramenta incrível de versionamento de códigos e arquivos de texto, que permite com que você mantenha um histórico de alterações no seu código, gerenciando o desenvolvimento em equipe e permitindo o resgate de versões anteriores

• GitHub é uma plataforma que permite hospedagem e compartilhamento de códigos e arquivos de texto utilizando git, além de ser uma rede social para desenvolvedores.

• GitHub Pages é uma ferramenta do GitHub que permite hospedar páginas estáticas, ou seja, páginas que não se conectam diretamente com um banco de dados para gerar seu conteúdo de forma dinâmica.

Com a teoria em mãos, vamos à prática

Crie sua conta no GitHub

A primeira coisa que iremos precisar é de uma conta no https://github.com/ que pode ser feito da maneira gratuita, ao criar a conta tenha em mente o nome de usuário que você escolheu para a sua conta, este nome de usuário irá aparecer no canto superior esquerdo da página. No meu caso, o nome de usuário da conta que é “OtacilioN”:

Criando repositório

Na imagem anterior, podemos ver abaixo do nome do usuário o campo “Repositories”. Clique no botão verde escrito “new” e, no campo “repository name”, preencha com

.github.io, substituindo

pelo seu nome de usuário criado para a conta, por exemplo:
OtacilioN.github.io.

Preencha uma descrição (description) para seu site e clique em “Add a README file”, como no exemplo abaixo:

Então clique em “Create Repository”, assim criamos o nosso repositório no GitHub, que será responsável por hospedar os arquivos do website.

Faça upload dos arquivos

Falta apenas realizar o upload destes arquivos, neste momento temos dois cenários possíveis para isto:

1. Realizar o versionamento do projeto com git utilizando este repositório criado, criar os commits e enviar para o branch main remoto utilizando o comando git push ou através de Pull Requests. Esta é a maneira mais profissional mas requer um conhecimento de git.

2. É possível realizar o upload direto dos arquivos através da página web, este fluxo funciona caso você não conheça git, mas perderá todo o poder de versionamento que seria possível com o domínio da ferramenta, para permitir que mesmo que você não conheça git, possa hospedar o website, seguiremos com este fluxo.

Neste momento temos um botão na barra superior do repositório escrito “Add File”, ao clicar selecionaremos a opção “Upload files”:

Na tela de “Upload files” podemos arrastar os arquivos do nosso projeto, como o index.html, styles.css e assets para a janela do GitHub, ou clicar no botão “choose your files” e selecionar os arquivos no computador, obtendo o seguinte resultado:

Faça commit

Após o upload dos arquivos, será possível clicar no botão “Commit Changes”, então assim subimos o arquivo ao repositório, e sua página deverá estar disponível em https://

.github.io em poucos minutos. Por exemplo, a minha está em
https://OtacilioN.github.io/

Está pronto!

O GitHub detecta que ao criar um repositório com o nome

.github.io este repositório será configurado para utilizar o
GitHub Pages para a hospedagem de seu website. O próprio GitHub pages disponibiliza o domínio “
github.io” de maneira gratuita ao usuário e disponibiliza o seu website de maneira segura através do https. Para saber mais sobre o GitHub Pages acesse a
documentação oficial.

Parabéns, nesse momento seu website está disponível para o mundo todo, e inclusive, após algum tempo poderá ser indexado por buscadores como o Google se boas práticas de adicionar meta tags corretas, semântica e acessibilidade foram seguidas durante o desenvolvimento.

Para entender os fundamentos do desenvolvimento web, criar suas primeiras páginas e projetos, e finalmente começar sua carreira desenvolvendo para a web, aprenda com o nosso Curso de HTML e CSS.