Você fez aquele site maneiro, que te encheu de orgulho, e gostaria de colocar ele online pra mostrar pra família e amigos, mas não sabe como fazer isso? Chega mais!
Colocar seu projeto no ar (ou fazer o deploy, como costumamos falar) pode ser algo muito simples e existem diversas ferramentas online onde você pode publicar gratuitamente o seu site, como Github Pages e Vercel. E é sobre esse último que vamos falar hoje!
Direto ao ponto:
O que é a Vercel?
Colocando o projeto no ar
Selecionando o projeto para deploy
Configurando o projeto
Mudando a URL do seu site publicado
Conclusão
O que é a Vercel?
Segundo o próprio site, a Vercel é uma plataforma de nuvem "para desenvolvedores front-end, proporcionando velocidade e confiança que inovadores precisam para criar no momento da inspiração."
A Vercel possibilita que publiquemos nossas aplicações front-end e, por ser a empresa que mantém a estrutura de desenvolvimento web Next.js, podemos concluir que ela também é a ferramenta ideal para publicações de projetos com frameworks ou bibliotecas front-end (como React ou Vue, por exemplo).
Colocando o projeto no ar
Passo 1 - Criando sua conta
Para criar uma conta na Vercel, o ideal é que você já tenha uma conta em algum provedor Git, como o Github, Gitlab ou BitBucket. Quando você cria sua conta na Vercel usando algum provedor Git, você automaticamente vincula as duas contas, o que facilita o processo!
- Acesse https://vercel.com/ e, no canto superior direito, clique em Sign Up;
- Em Create Your Vercel Account, selecione a opção Hobby, insira um nome de usuário no input e clique em Continue;
- Em Let's connect yout Git provider, selecione o seu provedor Git na lista (no meu caso, foi o Github).
Passo 2 - Selecionando o projeto para deploy
Após fazer o SignUp / Login, você verá uma tela com uma barra de pesquisa e, do lado direito, um botão Add New.... Clique nesse botão e selecione a opção Project. Você será redirecionado para outra página:
Em Import Git Repository você vai ver uma lista dos seus repositórios mais recentes. Aqui também é possível adicionar uma nova conta do Github, adicionar um novo provedor Git ou até mesmo procurar algum repositório que não esteja dentre os mais recentes.
Escolha o projeto que deseja publicar e clique em Import. Você será redirecionado para outra página:
Passo 3 - Configurando o projeto
Aqui é onde você configura o deploy da sua página. Mas calma lá! Se você desenvolveu seu projeto com HTML, CSS e JS, não é necessário configurar absolutamente nada! Até mesmo se você desenvolveu utilizando algum framework ou biblioteca, como React, Vue ou Angular, a Vercel automaticamente detecta qual tecnologia você utilizou e já deixa tudo pré-configurado.
Nessa nova tela, em Configure Project, tudo que você deve fazer é clicar em Deploy. O processo de publicação deve demorar apenas alguns segundos e seu site finalmente será publicado. Simples assim!
Lembre-se: Se estiver fazendo um projeto sem frameworks, mantenha o seu arquivo HTML principal (o
index.html) na pasta raiz do seu projeto.
Mudando a URL do seu site publicado
Quando a Vercel publica seu site, ela acaba usando essa estrutura para gerar o endereço do seu site:
NOME_DO_REPOSITÓRIO + VERCEL.APP
Porém, se já houver algum projeto publicado com o mesmo nome, ela vai adicionar palavras aleatórias para diferenciá-los, podendo deixar o endereço do seu site um pouco longo ou bagunçado.
A boa notícia é que é possível editar esse endereço gerado pela Vercel! Para isso, após a publicação do seu site, logo ao lado, você verá a opção Add Domain. Clique nela para ir para a página de edição da URL.
Em Domains, clique no botão Edit ao lado da URL da sua página. No formulário que aparece, no campo Domain, edite a URL como desejar, mantendo o final como vercel.app, e clique em Save. Prontinho, o endereço do seu site já está atualizado e agora é só compartilhar com o mundo a sua criação!
Conclusão
A Vercel é uma plataforma muito prática e rápida para publicar seus projetos front-end. Depois de criar a conta, seus projetos recentes estarão sempre disponíveis na lista de repositórios para que você possa publicá-los. Como foi possível ver, a página fica prontamente disponível após o processo de deploy, o que nem sempre acontece quando utilizamos o Github Pages, que pode demorar de segundos até alguns minutos para colocar sua página no ar.
Uma outra vantagem da Vercel é que ela automaticamente vincula a sua página publicada com o seu repositório, inserindo o link da sua página no About do seu projeto:
Além disso, é uma ferramenta super prática e com possibilidade de configurações customizadas para projetos mais avançados utilizando React, Vue, Angular, Next, entre outros frameworks que você com certeza vai aprender no futuro ou já utiliza no seu dia-a-dia!
Espero ter ajudado a conhecer um pouco sobre essa ferramenta incrível. Um xêro pra vocês!
Nota: Caso queira saber como fazer diretamente no Github, recomendo esse artigo da Alura, que vai te dar todas as orientações!
Como colocar seu projeto no ar com o Github Pages? | Alura
Neste artigo,mostrarei como colocar o seu projeto no ar com o Github Pages. Você também vai entender o que é hospedagem e receberá dicas incríveis sobre o Github.
alura.com.br
Top comments (4)
Obrigaaada! Não conhecia o vercel, conheci através do @nickgabe e agora graças ao teu artigo vou migrar 😅
Que bom, Vitória, fico muito feliz que tenha gostado do artigo e espero que tenha ótimas experiências com a Vercel! Esse artigo trás só o básico do deploy deles, mas a Vercel também é bem configurável pra projetos mais complexos ^^
eu ja conhecia o vercel e ja consegui upar dois projetos lá mas ultimamente só aparece o famoso 404 not found mas o projeto ta funcionando direitinho não sei resolver esse problema ;((
Vixe, pode ser várias coisas... Às vezes, dependendo do projeto (se for projeto em React ou outro framework, por exemplo) pode ser preciso adicionar um arquivo de configurações
vercel.jsonna raiz do seu projeto. Se for um projeto em HTML básico, pode ser que seuindex.htmlnão esteja na raiz do projeto, aí dá esse 404 também...