Minha colega de trabalho, Rizèl Scarlett, criou uma extensão para o VScode que te permite subir seu site para o GitHub pages direto do editor.
A Rizèl sempre quis criar uma extensão, e com em colaboração com o time do VScode para criar essa extensão que permite que você rapidamente suba sites estáticos (em Jekyll ou HTML) para o GitHub pages com apenas alguns cliques.
Se você quer saber mais sobre o que é GitHub pages, recomendo ler esse artigo.
Passo-a-Passo
1. Crie o repositório
Primeiramente, você precisa criar um repositório no GitHub para o seu site.
Nesse tutorial eu vou trabalhar com meu site pessoal, então meu repo vai ser chamar pachi-page.
2. Crie o arquivo do seu site
Crie um arquivo index.html no seu repositório.
3. Instalando a extensão
Abra o VScode e instale a extensão “Deploy to GitHub Pages”
4. Clone seu repositório, abra ele no VScode e code o resto do seu site.
Não esqueça de dar push no seu site antes de continuar (eu esqueci, ops).
5. Fazendo o deploy do seu site
Com seu site pronto, dentro do VScode, abra a barra de pesquisa para procurar novos arquivos.
Você pode fazer isso através dos seguintes métodos:
Usando Go to File, que está no menu Go
Usando este atalho de teclado no Windows Ctrl+p ou Ctrl+e
Usando este atalho de teclado no macOS Cmd ⌘+p
Usando este atalho de teclado no Linux Ctrl+p ou Ctrl+e
Dentro da barra de busca, digite > , e clique em Deploy to Github Pages.
A extensão te dará opções de repositórios para subir sua página, então preste atenção para escolher o certo:
Depois que você escolher o repositório, vai aparecer um alerta pedindo permissão para logar no seu GitHub:
Espere a extensão fazer seu trabalho:
Agora click no link, e seu site estará na web! Esse é o site que eu criei: https://pachicodes.github.io/pachi-page/
Considerações Finais:
Esse artigo foi escrito com base em um artigo em inglês da Rizel.
Se você quiser saber como essa extensão foi feita, ela explica nesse artigo, em inglês
Essa extensão é Open Source, então você pode contribuir com ela .
Agradeço a todes por lerem e sigam a página oficial do GitHub Brasil no Twitter para ficarem por dentro de novidades !
Top comments (5)
Não conhecia essa extensão, que barato!
Ainda estava recorrendo ao método de ir na settings, tal qual os maias.
Fantástico!
agora estamos modernizados e não precisamos mais recorrer a metodos maias haha
excelente tutorial, muito prático, parabéns!
Agradeço muito as palavras positivas.
Que ótimo conhecer essa extensão. O primeiro deploy que eu fiz usando o Github Pages foi meio sofrido e uma ferramenta como essa teria facilitado bastante o processo hehe.
Já vou deixar minha estrelinha no repositório!