DEV Community

Cover image for Subindo seu site no GitHub Pages sem sair do seu editor de código
Pachi 🪐 (she/her/ela) for GitHub

Posted 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 !

Discussion (4)

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 🪐 (she/her/ela) Author

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 🪐 (she/her/ela) Author

Agradeço muito as palavras positivas.