DEV Community

loading...

Publicando no github.io com Vue.JS

ardc_overflow profile image Rodolpho Alves Originally published at Medium on ・3 min read

Resultado final da minha empreitada. Disponível em https://rodolphocastro.github.io/#/

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.

Código fonte e visual da versão antiga do site (desenvolvida em 2015)

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/ 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)

Inicializando nosso site

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/:

Scaffold padrão do Vue.js

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:

Executando a build e o resultado, na pasta “dist”

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:

deploy.ps1 em ação!

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/#/ para ver o resultado ou 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!

Discussion

pic
Editor guide