Subindo seu site no GitHub Pages sem sair do seu editor de código
Tags: braziliandevs, tutorial, github, githubbrasil
Published: 2022-05-03 13:56:32

Minha colega de trabalho, [Rizèl Scarlett](https://dev.to/blackgirlbytes), criou uma extensão para o VScode que te permite subir seu site para o GitHub pages direto do editor.

A [Rizèl](https://dev.to/blackgirlbytes) 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](https://dev.to/acaverna/publicando-seu-site-no-github-pages-433b).

## 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](https://lh5.googleusercontent.com/TGw2dWajOs4lzLEVJua-I7ne6SMwjqN1fAUui7nbhqWeAUSZUxAJo_qIickZvynuCaXq5TZrcZ4-RePMAY3WpTo6QEVK9hEyab2YuxKJEfNxf0V0oifJb8RqiVKvVW28w0aYCy6G7pd3_HFH)

  
### 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](https://lh6.googleusercontent.com/8RB6h5Q2G7LaF9j4XLhq5WcuKM5AQ1NQQZgPdrfrfY6F-7riXmRpBGwbmm3fLp32ifdTXIJW7C54GTzUtCGQ6PxGrXrUdXzj7y9ETNsCRJg23Gm4AfKdGVBmIvirG6HlgWxOJZo3YdeeqnAt)

### 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](https://lh3.googleusercontent.com/StZaKq0jNwgHMHb-uARLsXHjpJCTl0EOEri6IDK-sMRVdvSYjIMEtjBVjIgiy-WsPrRNPfUKZeelzcdcgi5MiIkw6yv6ikq_pNDKgb_Fz3c4OoTi_USpsGMb1WsJUFjh4sXvaYPlPFadTMT2)

  

### 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](https://lh5.googleusercontent.com/33YMnH0stpaF2SIK7L1dFRuKp8orLzFHUywGyKsNWO-hvFYFwd6Ah1YsS5w5_AzGo0ruVEnqj-UBfXYqhFhBjWganuFtsUcXLDbrGYI1HwcJnQIZeHG7NUtZKUXIvw2A4EGVz0aQ4eIUAt4Z)
    

  

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](https://lh6.googleusercontent.com/NiyOU24cjVsxzVG6HOtDWy2Xlz1Rbs7ItHgk0zLGgbVsvd8dSZZwzYuIJ97SEXZvvKcbYSudVHelbhmGzWIFD21LZ0LzsMmyNo8dGQlaNevzs1hZuSCHcFaIoDGNoJOgyQN9EWQ)

  

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

![Screenshot do aviso](https://lh5.googleusercontent.com/RE3ql8KclB1o1suCNHsKwNS2-aSZjPeqvUlygrqP7E90XHMfkfnVPehs5Ld7AtC5q0RcfEo68fVkgnJvutrrYglqI_R1r0yGHCVfVS72K8LlGI-7gAG8zs4NSF4FlY-D9kVc6YMl6awqNaFo)

  

Espere a extensão fazer seu trabalho:
    

![Screenshot do alerta](https://lh3.googleusercontent.com/pFhVbFwUgw6oc21wKicCCEDKCYTcV4k5jRrr8uVvE_YzGYUQDA5HTLGCOHscP1__AKVa_kxvzg8XaKnbvCAXdcfSAEvQwQsjvEWShx_O1nqwhi9FYHtSPI0BkXSFTGICCQ-MT5ZX-wUEWrVY)

  

Agora click no link, e seu site estará na web! Esse é o site que eu criei: [https://pachicodes.github.io/pachi-page/](https://pachicodes.github.io/pachi-page/)
    

  
  
  
  

## Considerações Finais:

Esse artigo foi escrito com base em [um artigo em inglês da Rizel](https://dev.to/github/deploy-your-first-website-without-leaving-your-ide-2mpp).
Se você quiser saber como essa extensão foi feita, [ela explica nesse artigo](https://dev.to/github/how-i-built-it-the-anatomy-of-a-vs-code-extension-3p55), em inglês
Essa extensão é Open Source, [então você pode contribuir com ela ](https://github.com/blackgirlbytes/vscodeextension-deploy-to-gh-pages).

Agradeço a todes por lerem e [sigam a página oficial do GitHub Brasil no Twitter](https://twitter.com/githubbrasil) para ficarem por dentro de novidades !