DEV Community

Cover image for Subindo seu site no GitHub Pages sem sair do seu editor de código
Pachi 🥑 for GitHub

Posted on • Updated on

Subindo seu site no GitHub Pages sem sair do seu editor de código

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.

Screeshot da pagina de criação de novo repositório no Github

2. Crie o arquivo do seu site

Crie um arquivo index.html no seu repositório.

Screenshot de um repositório Github com o arquivo index.html

3. Instalando a extensão

Abra o VScode e instale a extensão “Deploy to GitHub Pages”

screenshot do market place de extenções do VScode

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:

  1. Usando Go to File, que está no menu Go

  2. Usando este atalho de teclado no Windows Ctrl+p ou Ctrl+e

  3. Usando este atalho de teclado no macOS Cmd ⌘+p

  4. 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.Screenshot da Barra de busca do Vscode

A extensão te dará opções de repositórios para subir sua página, então preste atenção para escolher o certo:

Screenshot das opções de repo da extensão

Depois que você escolher o repositório, vai aparecer um alerta pedindo permissão para logar no seu GitHub:

Screenshot do aviso

Espere a extensão fazer seu trabalho:

Screenshot do alerta

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)

Collapse
 
lelepg profile image
Letícia Pegoraro Garcez

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!

Collapse
 
mpfdev profile image
Matheus 🇧🇷

Não conhecia essa extensão, que barato!
Ainda estava recorrendo ao método de ir na settings, tal qual os maias.
Fantástico!

Collapse
 
pachicodes profile image
Pachi 🥑

agora estamos modernizados e não precisamos mais recorrer a metodos maias haha

Collapse
 
rafaelmb profile image
Rafael Mena Barreto

excelente tutorial, muito prático, parabéns!

Collapse
 
pachicodes profile image
Pachi 🥑

Agradeço muito as palavras positivas.