Nesse post pretendo explicar sobre os passos para criação deste blog. Desde compra do domínio até o deploy.
Domínio
Geralmente quando pensamos em começar um blog, pensamos nas ferramentas e nas plataformas primeiro. Porém eu queria ter uma experiência completa e comecei justamente pelo domínio.
Como o foco do blog é programação, pensei em escolher um domínio “.dev”. Fui até o domains.google e, para a minha surpresa, o domínio brunovinicius.dev estava a disposição por R$ 50,00 anuais. Prontamente comprei.
Hospedagem
Logo após a escolha do domínio, pensei onde eu poderia hospedar o site. Uma plataforma que ouço muito falar bem (e que agora posso confirmar) é a Netlify. Além de fornecer hospedagem, ela provê várias outras funcionalidades como: Deploy automático ligado ao seu repositório de código, DNS, HTTPs entra muuuitas outras coisas. Se você não a conhece, recomendo ir até o site deles para dar uma olhada.
E mais um ponto importante, eles tem uma conta gratuita (que é a que uso) que fornece tudo isso (com algumas limitações claro, mas nada que te impeça de construir uma aplicação pessoal).
DNS
Como o domínio foi comprado pelo domains.google, a propria ferramenta trata do DNS. Porém eu gostaria de deixar o meu site com HTTPS. Para minha grata surpresa a Netlify provê certificados HTTPS gratuitos, desde que o domínio seja gerenciado por eles. Seguindo a documentação da Netlify, peguei as informações dos servidores de DNS da Netilify e coloquei nas configurações do Google Domains.
Importante: Se você utilizar um servidor de DNS que não o do Google, ele não te permite continuar usando algumas ferramentas da plataforma, tal como emails personalizados do Google. Então bastante cuidado nessa etapa.
Gatsby
Depois da “infra” estar (quase) toda pronta, hora de escolher o que vamos usar para codar o blog. Como estou imerso em React, a escolha foi bastante simples. Podemos chamar o Gatsby de um framework para construção de sites e aplicações, porém creio que o Gatsby seja mais usado para sites. Dentre várias vantagens, Gatsby tem uma loja de plugins imensa e vários “starters-kit” para a construção rápida de aplicações. Tudo isso com a vantagem de construir o seu site em React, usando da componentização e de todas as bibliotecas do “ecossistema” React.
Template
Como eu queria começar de uma forma mais rápida (e no futuro incrementar o blog com um template próprio), eu escolhi o template, ou melhor dizendo starter-kit, gatsby-starter-lumen. O escolhi porque achei bem limpo o layout e que seria fácil de fazer pequenas alterações e colocar no ar. Além disso esse starter-kit já vem com uma pré-configuração para usar o CMS da Netlify (sim, até isso tem lá).
Um ponto importante, se você assim como eu, usa a branch principal como “main”, não se esqueça de alterar a branch no static/admin/config.yml para “main” ao invés de “master”. O erro que dá não é nada explicativo e tive de recorrer ao forum da Netlify para ajudar.
Github
Creio que todas as opções o Github seja a mais popular de todas. Repositórios privados, gratuito e váaaarias integrações com vários serviços, inclusive com a Netilify. Essa parte foi mais fácil de escolher que o nome do próprio domínio haha.
Deploy
Já falei aqui como achei a experiência da Netilify incrível? Não? Então bora falar. Basicamente tem duas formas de você configurar o deploy na plataforma: Via interface do site da Netilify ou via um arquivo na raiz do seu projeto chamado de netlify.toml. Como o starter-kit usa essa segunda opção, optei por seguir dessa forma, a configuração foi bem simples:
Com essa configuração, estamos dizendo a Netlify para: Publique o conteudo da pasta public, para construir essa pasta execute o comando gatsby build, em um ambiente que tenha Yarn na versão 1.3.2.
Meta tags para compartilhamento (Open Graph protocol)
Com o blog no ar, chegou o momento de compartilhar nas redes sociais! Sempre achei muito “mágico” e natural a forma que os posts no LinkedIn, Twitter e até compartilhamento de links no WhatsApp pegavam informações legais sobre um link, tais como: Título, descrição e imagem.
Foi justamente pesquisando para esse blog que eu descobri sobre algo chamado Open Graph Protocol. Uma iniciativa criada pelo inicialmente pelo Facebook, para que outros sites compartilhados tivessem o mesmo tratamento de links do próprio Facebook. Apesar de ter “protocolo” no nome, a configuração é feita basicamente como meta tags que possuem alguns atributos como og:image (para a imagem que aparecerá na miniatura do post na rede social), og:title (que será o título da publicação), og:description, dentre muitas outras. O site deles tem mais informações. Se você desejar ver como sua publicação aparecerá nas redes sociais, use ferramentas como https://socialsharepreview.com/ ou a ferramenta da rede social em que você deseja compartilhar (procure por social media debugging. É importante fazer isso antes de publica porque, geralmente, o crawler dessas redes sociais refazem o cache somente semanalmente.
Com tudo isso pronto, agora é só escrever, compartilhar na internet e acompanhar com sua ferramenta de Analytics favorita (no meu caso uso o Google Analytics mesmo).