Publicando no github.io com Vue.JS
Tags: githubpages, vue, webpack, github
Published: 2020-06-24 23:57:01

---
title: Publicando no github.io com Vue.JS
published: true
date: 2020-03-23 00:46:53 UTC
tags: githubpages,vue,webpack,github
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*XaVxXpwczhQchHSaHY4h-g.png)<figcaption>Resultado final da minha empreitada. Disponível em <a href="https://rodolphocastro.github.io/#/">https://rodolphocastro.github.io/#/</a></figcaption>

Em meio à epidemia do Coronavírus fiquei em uma situação bem atípica para os últimos anos: Um final de semana inteiro em casa, sem sair, sem correr, sem malhar.

Decidi tornar isso algo produtivo e fazer todas aquelas coisinhas que estavam no meu “_backlog_” mental e sempre esquecia. Uma delas era refazer meu antigo site pessoal que fiz originalmente em 2015 e se resumia a um index.html com bootstrap embutido e alguns textos fixos.

![](https://cdn-images-1.medium.com/max/272/1*RQ3WFyjaKfFZ-dA0WZQwdA.png)

![](https://cdn-images-1.medium.com/max/1024/1*0OPfq4wqywbVdQM7SeVn0w.gif)<figcaption>Código fonte e visual da versão antiga do site (desenvolvida em 2015)</figcaption>

Para tornar a empreitada mais interessante decidi por utilizar o **Vue.JS** como base para permitir uma maior interação com o meu site, além de permitir que (futuramente) consulte APIs como a do **Cell CMS** para buscar conteúdo dinâmicamente!

Porém, para quem já utilizou o github.io sabe, a ideia é que os sites disponibilizados sejam estáticos ou sejam gerados por algumas das linguages suportadas (como **Ruby** , utilizando o **Jekyll** , ou  **Go** ).

Neste artigo vou mostrar como podemos **publicar um site** gerado através do **Vue CLI** na estrutura do **GitHub Pages.** _Se você já for familiar com criar projetos através do Vue CLI pule até o fim do artigo, onde está a explicação de como fazer a publicação!_

**Criando o site**

Para simplificar o tutorial vou assumir que você já tenha criado seu repositório do github.io . Caso não tenha, acesse [https://pages.github.com/](https://pages.github.com/) e mande bala!

Primeiro passo será utilizar o @vue/cli para criar nosso site. Abra seu terminal e utilize os comandos e acompanhe pelo gif:

1. vue create my-github-page _(substituindo pelo nome que vc quiser para seu projeto)_
2. Escolha quaisquer features (_no meu caso escolhi Typescript, Vuex e Vue-Router_)

![](https://cdn-images-1.medium.com/max/1024/1*bkAjxdCmymTh8zL_pz08_w.gif)<figcaption>Inicializando nosso site</figcaption>

Após seguir estes passos, execute seu site através do npm serve ou yarn serve, conforme package manager de sua preferência. Você terá o seguinte resultado em seu [http://localhost:8080/:](http://localhost:8080/:)

![](https://cdn-images-1.medium.com/max/1024/1*GLDdOYkD4cn-jmu-mdGhLw.png)<figcaption>Scaffold padrão do Vue.js</figcaption>

Neste ponto você deverá alterar o site conforme sua necessidade. A única restrição é que o site não poderá ser **Server Rendered** (nada de usar o _Nuxt_, por exemplo!).

**Publicando o Site**

Satisfeito com as alterações que você fez em seu site? Hora de publica-lo! Abra seu terminal e digite npm build ou yarn build para gerar os arquivos para publicação:

![](https://cdn-images-1.medium.com/max/1024/1*2Ml-VUFOzmFG2_tpyoLxzQ.png)

![](https://cdn-images-1.medium.com/max/307/1*CzZ9NIowTrPZxrYcIQqYuQ.png)<figcaption>Executando a build e o resultado, na pasta “dist”</figcaption>

A pasta dist será gerada. Nela estarão os **arquivos para publicação**. O procedimento agora é copiar estes arquivos para o nosso “Servidor”. Porém **no GitHub pages temos algumas regras** diferenciadas para **publicar arquivos** :

1. **O site** a ser apresentado **deverá estar** no branch **master** do repositório
2. **Todo o conteúdo** necessário **deverá estar na raiz** do repositório

Ou seja: Precisamos, de alguma maneira, copiar os arquivos e pastas dentro da pasta dist para a raiz do repositório. Para fazer isso manualmente podemos:

1. Acessar **:** a pasta  **Dist**
2. Para cada elemento: **Move-lo** um nível acima
3. Realizar: **commit** destes arquivos no  **master**

Estes passos **podem ser feitos** facilmente **através de scripts**. Como sou um fã de **powershell** escrevi um script que realiza a build e os passos listados:

{% gist https://gist.github.com/rodolphocastro/3890ace7254e4f42e928194fab355a06 %}

![](https://cdn-images-1.medium.com/max/1024/1*t7bR4tHs9fJwkMJz2YOdbg.gif)<figcaption>deploy.ps1 em ação!</figcaption>

Agora é só realizar commit dos arquivos copiados para o **master** e fazer **push** para publicar seu site!

Caso tenha interesse em ver um site finalizado e que utiliza o que apresentei aqui acesse [https://rodolphocastro.github.io/#/](https://rodolphocastro.github.io/#/) para ver o resultado ou [https://github.com/rodolphocastro/rodolphocastro.github.io](https://github.com/rodolphocastro/rodolphocastro.github.io) para ver o código fonte!

Obrigado por ler este artigo, abraços e até o próximo!