Hospedando site com Vercel usando repositório do GitHub

Primeiro criar um repositório no Github. Em seguida pegar o link dele e clonar na maquina.

Em seguida entrar na pasta e abrir ela no VScode através do comando code . é necessário ter instalado o Node.js 10.3 no mínimo. Que é a menor versão compatível com o Next.js  10.

No terminal, agora, criar um arquivo package.json  usando o comando npm init -y para o npm aceitar todas as opções padrões. Com o arquivo criado, instale as dependências do Next.js através do comando npm install next depois de instalado deve refletir como esperado no arquivo packge.json. Tem mais duas dependências para serem instaladas com os seguintes comandos npm install react e a última dependecia à ser instalada é o npm install react-dom. todas essas dependêcias podem ser feitas com um só comando o npm install next react react-dom

Dentro do arquivo package.json edite a linha abaixo de "scripts" da seguinte forma: "dev": "next dev" agora sempre que quiser subir o servidor web localmente basta digitar o comando npm run dev ao rodar vai apresentar um erro. 

Crie uma pasta pages dentro dela crie uma arquivo idenx.js também pode ser ".ts" para usar TypeScript dentro do arquivo digite o seguinte código:
    
    function Home() {
    return <div>Home</div>
  }

  export default Home

Feito isso basta salvar, abrir o console e dar o mesmo comando novamente npm run dev e agora o servidor web deve estar pronto para ser acessado na porta 3000. Veja no navegador, sua página estática deve estar aparecendo com auto reload embutido.

Colocando o projeto no ar

Agora vamos jogar essa página no ar em produção em um endereço de verdade na web, a primeira coisa a ser feita é para o servidor de desenvolvimento.

Digite o comando git status depois git add -A ok. Feito isso vamos comentar na brach principal que representa a produção git commit -m 'primeira página' em seguida empurre para o GitHub git push origin main agora dê refresh no repositorio do GitHub e tudo deve estar lá.

Próximo passo é entrar no site https://vercel.com/ clicar em Sing Up na primeira tela que aparecer clique em Import Project e cole o link do repositório e clique no botão Deploy em seguida deve aparecer uma tela de comemoração e um botão de Visit Site.

PS: Esse texto foi elabora com base no vídeo do canal no YouTube de Felipe Dechamps

Comentários