Criar um site pessoal nunca foi algo que esteve no topo da minha lista de prioridades, mas com o tempo, percebi que essa experiência poderia me ajudar a desenvolver minhas habilidades e me conectar com pessoas que compartilham dos mesmos interesses.
Neste post, gostaria de compartilhar com vocês a minha trajetória e tudo o que aprendi ao longo do caminho.
Antes que eu me esqueça, gostaria de convidá-los a acessar o meu site.
Por que comecei a escrever?
Quando aprendo algo novo, eu quero escrever sobre isso. E ao escrever, eu acabo fixando ainda mais aquele aprendizado. Então, o ato de escrever se torna uma etapa importante no meu processo.
Mas a síndrome do impostor fez um ótimo trabalho me segurando.
Existem vários posts excelentes sobre o mesmo tópico que eu quero escrever. Será que alguém irá ler o meu post? O que as pessoas pensarão sobre ele? E se não despertar o interesse de ninguém além de mim?
Esses pensamentos ficaram na minha cabeça por um longo tempo, o que me fez adiar alguns projetos e ideias.
Após refletir bastante, decidi expor minhas ideias e compartilhar minhas anotações. Essa decisão foi inspirada pelo conceito de Learn In Public, que prega a ideia de que compartilhar seu processo de aprendizado, mesmo que não seja perfeito ou completo, é uma ótima forma de aprender mais e se conectar com outras pessoas. O objetivo é tornar o processo de aprendizagem mais transparente e colaborativo, ao invés de mantê-lo escondido.
Tecnologias
- TypeScript e Next.js
Não tento esconder o fato de que amo o Next.js, já que é tão simples de usar. Por isso, pareceu natural iniciar meu projeto utilizando TypeScript e Next.js, uma vez que essas tecnologias se complementam.
Além disso, a possibilidade de fazer o deploy de forma simples e gratuita na Vercel foi um grande atrativo.
- Tailwind CSS
Ultimamente, tenho visto muito conteúdo sobre o Tailwind CSS. Assim, seguindo a ideia de utilizar meu portfólio como um laboratório, decidi utilizá-lo para conhecer e aprender uma nova tecnologia.
- Remark
O Remark é um analisador de Markdown e seus plugins, como o remark-html, convertem o Markdown retornado pela API do Dev.to em HTML. Outros plugins que uso permitem recursos como destaque de código, compatibilidade com o Markdown do GitHub e remoção de metadados do HTML exibido.
Usando o Dev.to como um CMS
Há alguns meses, comecei a postar no Dev.to e me apaixonei pela plataforma, pelo editor e pela capacidade de redigir e publicar um artigo, tornando-o disponível para milhares de usuários do Dev.to.
Durante a criação do meu portfólio, decidi que queria exibir esses artigos no meu próprio site. Depois de pesquisar diferentes maneiras de fazer isso, concluí que usar a API do Dev.to para criar a seção de blog do meu site seria a solução perfeita.
Decidi que os artigos só apareceriam no meu site se eu adicionasse um URL canônico ao artigo no Dev.to - o que significa que meu site seria visto como a fonte do artigo, mesmo que ele tenha sido escrito originalmente no Dev.to.
Para isso, criei a seguinte lista de requisitos:
Utilizar a API do Dev.to para buscar todos os meus artigos e exibi-los no meu site.
Buscar e renderizar cada artigo no tempo de construção para garantir que o site seja rápido e tenha um bom SEO para as páginas dinâmicas. O uso de páginas dinâmicas tornaria o carregamento do site mais lento, pois consultaria a API Dev.to no lado do cliente.
Definir uma URL canônica para cada artigo no Dev.to e utilizar a mesma URL para o artigo no meu site. Eu gostaria de continuar a usar o editor do Dev.to para escrever e gerenciar meus artigos, portanto, eles só devem aparecer em meu site após a adição de uma URL canônica.
No momento, estou escrevendo algo mais detalhado que descreve com mais detalhes como meu site utiliza o Dev.to como um CMS, fique atento (e me siga no Dev.to para ser notificado quando eu o lançar)!
Domínio
Eu não tinha a mínima ideia de como adquirir um domínio personalizado, mas sabia que era possível. Então, fiz o que todo desenvolvedor faz de melhor: pesquisei no Google e descobri que é bem fácil!
Aqui estão os passos básicos que segui para comprar o meu primeiro domínio:
Acessei o site do Google Domains.
Verifiquei se o nome que eu queria usar estava disponível. Felizmente, estava e adicionei-o ao carrinho de compras.
Por fim, segui as etapas para finalizar a compra, inserindo as informações de pagamento.
Deploy na Vercel
A Vercel é uma plataforma de hospedagem na nuvem que possibilita aos desenvolvedores publicarem seus projetos na Internet de maneira rápida e fácil. Em resumo, ela oferece diversos recursos para otimizar a velocidade e o desempenho do seu projeto, e para realizar o deploy, basta seguir os passos abaixo:
Crie uma conta gratuita na Vercel e faça login.
Clique no botão "Importar Projeto" na página inicial da Vercel.
Escolha a opção "Importar Git Repository".
Escolha o repositório do seu projeto no GitHub, GitLab ou Bitbucket, ou faça o upload de um arquivo ZIP do seu projeto.
Escolha as configurações de build do seu projeto, como a linguagem de programação e a versão do ambiente.
Espere até que a Vercel conclua o processo de construção do seu projeto.
Escolha um nome para o seu projeto na Vercel, clique em "Deploy" e aguarde até que o Deploy seja concluído, depois, é só verificar se o seu projeto está funcionando corretamente visitando o URL fornecido pela Vercel.
Passo a passo para adicionar um domínio personalizado ao seu projeto na Vercel:
Faça login no painel de controle do seu registrador de domínios e localize as configurações de DNS.
Adicione um novo registro DNS do tipo "CNAME" ou "ALIAS" para apontar o seu nome de domínio personalizado para o endereço do seu projeto na Vercel.
Vá para a página de configurações do projeto na Vercel e clique na guia "Domínios".
Adicione o seu nome de domínio personalizado na seção "Adicionar domínio".
Siga as instruções fornecidas pela Vercel para verificar a propriedade do seu domínio e configurar as configurações de DNS corretas.
Aguarde até que as mudanças nas configurações de DNS sejam propagadas (pode levar algumas horas) e verifique se o seu projeto está funcionando corretamente no seu nome de domínio personalizado.
Seu projeto agora está publicado e configurado com seu domínio personalizado, pronto para ser acessado por qualquer pessoa.
Lembre-se de que criar um portfólio não é apenas sobre design e tecnologia, mas também sobre destacar suas habilidades e experiências profissionais, podendo ser uma ferramenta valiosa para avançar na carreira de programador.
Top comments (0)