Criando seu primeiro site com github pages

Uma das minhas experiências favoritas foi a de trabalhar no meu próprio site, como alguém particularmente crítico eu nunca consegui encontrar um template que me agradasse, então resolvi fazer um eu mesmo, seguindo exemplos que eu via na internet e desenhando no papel e tudo mais. Bom, nesse post nós não vamos entrar profundamente nesse processo, eu irei abrir as portas para onde sua imaginação possa te levar

O que você precisa?

• Ter uma conta no Github
• Ter um editor de texto, de preferência o VSCode

Dicas:

Para uma primeira versão, eu irei utilizar uma versão simplificada deste template, você pode usar qualquer outro template, pois na verdade nós só precisaremos de pouca coisa.

Criando o repositório

1. Vá na sua página inicial do Github e procure por esse botão de "Criar repositório"

2. Em seguida coloque o nome do repositório seguindo o seguinte padrão: seu-nome-de-usuário.github.io

Também marque a opção de criar um arquivo README.

Quando você cria um repositório com esse nome você está criando um repositório especial no Github que irá ser seu site com Github Pages.

3. Agora com o repositório criado pegue a url dele

Não se esqueça de clicar na aba SSH, caso esse aviso em amarelo apareça, você precisará criar uma chave, clique no link que o Github te indicará e siga o tutorial.

4. No VSCode digite ctrl+shift+p para abrir a palheta de comandos e digite Git: Clone

Dê enter e cole a URL que você copiou no passo anterior.

Quando o VSCode terminar de clonar seu repositório, abra-o em uma nova janela, e você deve ver algo desse gênero.

Preenchendo seu site

1. Crie um arquivo index.html, depois crie uma pasta chamada assets contendo esses outras pastas

Essas pastas não são obrigatórias, porém são uma boa prática.

Caso você não tenha nada ainda nessas pastas, crie um arquivo chamado .gitkeep dentro de cada uma delas, isso indicará pro Git que você quer adicionar essas pastas mesmo vazias.

2. Coloque no seu index.html o conteúdo que você quiser, no meu caso será o template que eu escolhi

3. Adicione suas modificações no git (eu particularmente uso o próprio vscode para isso)

4. Chame a palheta de comandos novamente com ctrl+shift+p e digite Git: Push

Dê enter e todas suas modificações devem agora estar no Github

5. Pronto!

Agora é só acessar no seu navegador a url que você nomeou o repositório, no meu caso: https://teste-joaomarcuslf.github.io/.

Concluindo

É só isso, e seu site já está no ar, sempre que você fizer uma modificação, só dê push e o Github irá automaticamente atualizar esse url. Caso você precise de algo a mais, talvez valha a pena você pesquisar sobre Jekyll, mas isso fica para um próximo post.

Vejo você no próximo!! Byeeee~