#🛠️ A pilha de custo zero: Next.js, Vercel e GitHub
Esta trifeta é uma combinação poderosa para construir e implantar uma presença profissional na web com um custo mínimo ou zero. Ele aproveita tecnologia de classe mundial para garantir que seu site seja rápido, seguro e fácil de manter.
| Componente | Função | Custo | Por que é a melhor escolha | | :--- | :--- | :--- | :--- | | Próximo.js | A Estrutura (O código) | Grátis (código aberto) | Alto desempenho, excelente SEO e fácil otimização de imagem. Mantido pela Vercel. | | Vercel | O Host (O servidor) | Grátis (Plano Hobby) | Implantação sem configuração para Next.js, CDN global para velocidade e SSL automático. | | GitHub | A Fonte (O armazenamento) | Grátis (repositórios públicos/privados) | Armazena seu código com segurança e aciona automaticamente implantações no Vercel a cada alteração. |
#🚀 Etapa 1: Configure seu projeto no GitHub (gratuito)
O código do seu site precisa de um local, e esse é o GitHub. Esta plataforma armazena seu código com segurança e gerencia o histórico de versões do seu projeto.
- Crie uma conta GitHub: Se você não tiver uma, cadastre-se.
- Inicie seu projeto: Você tem duas opções principais:
- Opção A (recomendada para artistas): Use um modelo. Pesquise "modelo de portfólio Next.js GitHub" (ou "modelo Vercel"). Muitos desenvolvedores talentosos oferecem bases de código lindas e gratuitas. Simplesmente "Fork" ou "Use este modelo" para criar uma cópia em seu próprio repositório. Isso economiza semanas de codificação.
- Opção B (para desenvolvedores): Comece do zero. Execute
npx create-next-app@latestlocalmente e siga as instruções. Em seguida, envie seu código local para um repositório GitHub novo e vazio.
- Clone localmente: Use seu método preferido (VS Code, Git CLI) para baixar o repositório em seu computador.
Próxima etapa: Seu código agora está armazenado com segurança e com versão controlada.
#💻 Etapa 2: construir e personalizar com Next.js (grátis)
É aqui que você dá vida ao seu portfólio. Next.js é uma estrutura React que torna simples a construção de sites modernos e rápidos.
#Personalize o conteúdo:
Abra o projeto em seu editor de código. Você editará arquivos principalmente para:
- Adicione seu próprio texto na página Sobre (
/pages/about.jsou/app/about/page.js). - Substitua as imagens de espaço reservado pela sua arte (geralmente na pasta
/public). - Ajuste os links de navegação.
#Adicione sua arte (a chave):
- Organize suas melhores peças em pastas.
- Use o componente Next.js
<Image>. Isso é crucial! Ele otimiza automaticamente seus grandes arquivos de arte, redimensionando-os e exibindo-os em formatos modernos (como WebP) para que seu site carregue rapidamente em qualquer dispositivo.
#Controle de versão:
- Comprometa suas alterações: Depois de fazer suas personalizações, confirme as alterações com uma mensagem significativa (por exemplo,
git commit -m "Adicionei minhas primeiras cinco peças de arte"). - Push to GitHub: Faça upload de suas alterações de volta para seu repositório GitHub (
git push origin main).
Próxima etapa: Seu código final está pronto para implantação.
#☁️ Etapa 3: Implantar com Vercel (hospedagem gratuita)
Vercel é o criador do Next.js, portanto sua hospedagem está perfeitamente otimizada. Seu Plano Hobby é gratuito para sempre e inclui tudo que um portfólio precisa.
- Cadastre-se no Vercel: Acesse Vercel e cadastre-se usando sua conta GitHub. Esta é a chave para a conexão gratuita e automatizada.
- Importe seu projeto:
- No painel do Vercel, clique em "Adicionar Novo" > "Projeto."
- Selecione seu repositório GitHub na lista.
- Vercel detectará automaticamente que é um projeto Next.js. Normalmente, você pode simplesmente clicar em "Implantar".
- Seu URL gratuito está ativo! O Vercel implanta instantaneamente seu site em um URL gratuito (por exemplo,
meu-artista-site.vercel.app). - Atualizações Automagic: De agora em diante, sempre que você enviar um novo código para sua ramificação principal no GitHub, o Vercel reconstruirá e implantará automaticamente seu site em minutos. Esta é a magia da implantação contínua (CI/CD).
Próximo passo: Seu portfólio agora está disponível na internet, 100% gratuito.
---## 🌐 Etapa 4: Compre e conecte seu domínio personalizado (o único custo)
A etapa final é conectar seu nome de domínio profissional, como https://www.seunome.com. Esta é a única parte que custa dinheiro (normalmente entre US$ 10 e US$ 20 por ano).
- Compre seu domínio: Compre seu nome de domínio de qualquer registrador (Namecheap, GoDaddy, Google Domains ou até mesmo diretamente através do Vercel).
- Conecte-se no Vercel:
- Nas configurações do seu projeto Vercel, navegue até "Domínios."
- Insira o nome de domínio adquirido.
- Vercel fornecerá um conjunto simples de instruções (geralmente um registro A ou registro CNAME) para adicionar às configurações de DNS do seu registrador de domínio.
- Aguarde e confirme: Depois de atualizar suas configurações de DNS, o Vercel verificará a conexão do domínio, geralmente em menos de uma hora.
#🎉 Parabéns!
Seu portfólio de artista profissional agora está ativo em seu domínio personalizado, executado em uma infraestrutura de classe mundial por um custo mínimo. Você tem controle total sobre o código, atualizações automáticas e um site extremamente rápido para mostrar seu trabalho – tudo pelo preço do seu domínio.