Antes de começares o processo de publicação do teu site estático, precisas de uma conta na Vercel — a plataforma responsável por alojar e disponibilizar o teu projeto na web. A criação da conta é simples e pode ser feita em poucos passos.
Primeiro, acede a https://vercel.com e clica em “Sign Up”. Vais ser convidado a escolher um método de autenticação: podes criar uma conta com email ou, mais comum e prático, através da integração com GitHub, GitLab ou Bitbucket.
Recomenda-se que uses GitHub, pois a integração com os repositórios será útil no passo seguinte. Após autorizares o acesso aos teus repositórios, a tua conta estará pronta a usar. A Vercel oferece um plano gratuito com funcionalidades suficientes para a maioria dos projetos pessoais e de pequena escala.
Com a conta criada, podes então preparar o teu projeto local. Este pode ser um conjunto de ficheiros HTML e CSS ou Javascript. Certifica-te de que o projeto está funcional e pronto para ser colocado online. Podes ter também projectos com react ou next.js, mas sinceramente nunca experimentei apenas publiquei websites simples.
O passo seguinte é garantir que o projeto está sob controlo de versões com Git. No terminal, inicializa o repositório com git init, adiciona os ficheiros com git add ., faz o primeiro commit e cria um repositório remoto no GitHub. Liga o teu repositório local ao remoto com git remote add origin <URL> e faz git push para a branch principal. Neste post explico um pouco melhor ao pormenor como criar um repositório no Github. É algo simples e feito em meia dúzia de passos.
Agora que o projeto está no GitHub, voltas ao dashboard da Vercel e escolhe a opção “Add New Project”. Vais ver a lista de repositórios disponíveis — escolhe aquele onde colocaste o teu projeto e clica em “Import”.
Poderá ser preciso dar permissão para a Vercel conseguir ter acesso ao repositório que pretendes publicar. Recomomendo dar acesso apenas aos projectos que pretendes publicar.
A Vercel tentará identificar automaticamente o tipo de framework usado e propor as configurações adequadas. Caso necessário, podes ajustar o comando de build (por exemplo, npm run build) e o diretório de saída (dist, build ou .next, dependendo do caso).
Após confirmares tudo, o processo de compilação e publicação inicia-se automaticamente. No fim, a Vercel apresenta-te um endereço público — geralmente com o formato https://nome-do-projeto.vercel.app — onde podes aceder ao site publicado. Cada vez que fizeres alterações e as enviares para o GitHub, a Vercel voltará a construir e atualizar o site de forma automática.
Se quiseres associar um domínio próprio, podes fazê-lo nas definições do projeto. Tens duas opções:
- Primeira, compras diretamente o dominio so site, que há-de facilitar um pouco o processo de adicionar um novo dominio;
- segunda, compras um dominio onde preferires (Existem imensos sites onde podes commprar o dominio).
Honestamente, com um pesquisa rápida, no próprio site, podes ter alguma sorte e ter um dominio a um bom preço, mas parece-me, no geral, um pouco mais caro do que o habitual. Eu recomendaria comprar noutro sitio, apesar de ter de fazer mais uns passos. se optaste pela segunda opção vai ser necessário atualizar os registos DNS no teu provedor. À partida é só seguir os passos indicados na confiração do website na vercel. A Vercel trata da emissão do certificado SSL, garantindo que o site fica disponível com ligação segura (HTTPS) sem que tenhas de configurar nada manualmente.
Desta forma ficas um com site online em alguns simples passos. O melhor de tudo é que tens o alojamento gratuito e o site fica logo disponível para partilharem com quem quiseres e em qualquer lugar.