Website Avatar

O que me motivou a criar um site pessoal e o que aprendi ao longo do caminho

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:

  1. Utilizar a API do Dev.to para buscar todos os meus artigos e exibi-los no meu site.

  2. 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.

  3. 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:

  1. Acessei o site do Google Domains.

  2. Verifiquei se o nome que eu queria usar estava disponível. Felizmente, estava e adicionei-o ao carrinho de compras.

  3. 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:

  1. Crie uma conta gratuita na Vercel e faça login.

  2. Clique no botão "Importar Projeto" na página inicial da Vercel.

  3. Escolha a opção "Importar Git Repository".

  4. Escolha o repositório do seu projeto no GitHub, GitLab ou Bitbucket, ou faça o upload de um arquivo ZIP do seu projeto.

  5. Escolha as configurações de build do seu projeto, como a linguagem de programação e a versão do ambiente.

  6. Espere até que a Vercel conclua o processo de construção do seu projeto.

  7. 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:

  1. Faça login no painel de controle do seu registrador de domínios e localize as configurações de DNS.

  2. 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.

  3. Vá para a página de configurações do projeto na Vercel e clique na guia "Domínios".

  4. Adicione o seu nome de domínio personalizado na seção "Adicionar domínio".

  5. Siga as instruções fornecidas pela Vercel para verificar a propriedade do seu domínio e configurar as configurações de DNS corretas.

  6. 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.