Eu havia comentado no Post Anterior que a Toca do Rapoelho já foi um Blog em Wordpress e que estava abandonado. Pois então, decidi mostrar como eu migrei do Wordpress para o Hugo, um gerador de sites estáticos que eu até tinha ouvido falar, mas não hava experimentado de fato.

Porém, quando o Wordpress.com deu um gancho no Blog da Toca do Rapoelho fiquei tentado a mudar para um Wordpress na Hostinger. Como eu já era cliente da Hostinger, ficaria fácil para mim. Porém, o desânimo estava maior do que a vontade de realmente fazer esse Blog, e acabei deixando isso de lado.

Mas, quando foi lá pra junho abri o meu Substack, com o nome de “Toca do Rapoelho”, mas demorei um pouco para começar a postar nele, pois eu não sabia o que fazer. Até que pensei: E se eu documentar o que estou fazendo por lá? E assim eu fiz. Mas eu sentia falta de algo: Um Blog mais simples, para poder jogando as sementes para novas ideias.

Escolhendo o Hugo

Eu havia adquirido o domínio em que está esse Blog, mas eu não sabia o que fazer. Eu tentava voltar a escrever para a Toca do Rapoelho, porém, eu desanimava. Também não sabia o que fazer quanto a estrutura do Blog. Juntar o Cantinho do Romeo e a Toca do Rapoelho em apenas um Blog ou deixar tudo separado?

Eu sentia que o Wordpress oferecia muito mais do que eu realmente precisava. O que eu queria era apenas um local para eu poder expressar minhas ideias. Não precisava de tantas ferramentas para isso. Além disso, como eu gostaria de melhorar o tema Kitty, eu precisaria ter o Wordpress instalado.

E como eu uso o Arch, que se atualiza continuamente, manter um Wordpress funcionando em sua plenitude é a definição de sofrimento. Principalmente, porque o Wordpress precisa da pilha LAMP - Linux, Apache, MySQL e PHP - e quanto mais componentes, mais são as chances de acontecer algum problema.

Com isso, acabei buscando algo que fosse mais simples, e assim lembrei do Hugo e decidi dar uma chance a ele. Apenas precisei de um único comando…

sudo pacman -Syu hugo

… e o Hugo já estava instalado. Muito mais simples do que o Wordpress. Isso já me ganhou.

Fazendo os Testes com o Hugo

Depois fui ver como mexer com ele, fiz um Blog de Testes, onde eu explorei o Hugo, quebrei algumas vezes o site, e com isso, baixei o conteúdo do Cantinho do Romeo e da Toca do Rapoelho, para fazer mais testes. E posso dizer, que eu gostei muito de como ficou. O Cantinho do Romeo, por exemplo, ficou assim:

Eu simplesmente adorei, e nas postagens, a semelhança é bem grande.

E claro, que também comecei a escrever as postagens para o Blog do Cantinho do Romeo feito no Hugo, e gostei bastente. Realmente, escrever em Markdown é bem prático e ao salvar, o Hugo gera as novas páginas de acordo com as mudanças e as mudanças já são mostradas no navegador. E vou além: além de ser prático, o Markdown é muito mais leve do que o editor do Wordpress.

Claro que também automatizei a criação de Posts do Hugo para o Cantinho do Romeo, mas isso é uma história para outro dia.

Criando a Toca do Rapoelho no Hugo

Com isso, fui para a criação da Toca do Rapoelho no Hugo. E a criação do Blog no Hugo é extremamente simples. Primeiramente, um…

hugo new site rapoelho --format yaml

E assim, o Blog já estava criado, com todas as pastas do Hugo.

Como eu queria fazer testes com os temas, acabei criando um site de testes e quando eu estivesse terminado de mexer, eu iria transferir tudo para o Blog principal. Assim, fui buscar alguns temas e acabei encontrando uma lista com vários temas para o Hugo, e ao explorar a lista, encontrei um tema que eu adorei: Hugo Ficurinia.

Assim, instalei o tema e fui explorar ele e realmente ele tem muitas opções. E esse tema por padrão é assim:

E a Toca do Rapoelho com esse novo tema, começou mais ou menos assim e esse ponto eu já tinha colocado o Logo Âmbar do Cantinho do Romeo - e que foi usado por muito tempo como o Logo da Toca - no lugar do logo padrão do tema.

Depois, acabei descobrindo que tinha uma opção de Cabeçalho. Ativei essa opção e eu amei o resultado. Para mim, o Blog ficou realmente bem adorável.

Mas eu sentia que faltava uma coisa: Mudar as fontes. Eu até gostei das fontes que vinham por padrão, porém eu não achei que elas combinavam com a Toca do Rapoelho. Com isso, arregacei as mangas e comecei a ver isso, e eu tinha duas fontes em mente: Alphakind e Albert Sans.

Instalando as Fontes

A Alphakind é a minha fonte padrão que eu uso para absolutamente tudo, sendo desde a fonte do Logo do Cantinho do Cantinho do Romeo e indo até para as Badges e outras coisas. Já a Albert Sans, é a fonte que uso no Blog do Cantinho do Romeo. Eu acho que essa é uma fonte bem agradável. De primeira, a Alphakind foi a única que realmente funcionou no site, mas era porque eu tinha ela instalada.

Já a outra, não pegou de jeito nenhum. Assim, eu tive que ver o que fazer. E ao ver como era a fonte que já veio com o site, encontrei um arquivo .css e acabei isso para a Albert Sans…

/* albert-sans-regular - latin_latin-ext */
@font-face {
	font-display: swap;
    font-family: Albert Sans;
    font-style: normal;
	font-weight: 400;
    src: local("Albert Sans"), url(albert-sans.woff2) format('woff2');
}

… e para a Alphakind.

/* schibsted-grotesk-regular - latin */
@font-face {
    font-family: 'Alphakind';
    src: local("Alphakind"), 
		 url('alphakind.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

Mas isso não estava funcionando. Eu já estava quase desistindo e revertendo para a fonte padrão, até que me veio uma ideia: Por que não, olhar no GitLab do tema e ver se alguém teve o mesmo problema que eu? E de fato, teve alguém com o mesmo problema que eu e lá tinha a solução.

E assim eu fiz. Adicionei esse trecho ao arquivo layouts/partials/inject/head.html…

<!-- This code will be injected before closing the head tag -->
<link rel="stylesheet" href="/fonts/albert-sans/albert-sans.css">
<link rel="stylesheet" href="/fonts/alphakind/alphakind.css">
<link href="/fonts/symbols-nerd-font/symbols-nerd-font.css" rel="stylesheet" />
<link href="/fonts/jetbrains-mono/jetbrains-mono.css" rel="stylesheet" />

E assim, tudo funcionou! E esse foi o resultado:

E como podem reparar, coloquei a Symbols Nerd Font e a JetBrains Mono nesse arquivo, mas isso foi porque eu quis reorganizar os arquivos do tema. Do jeito que as fontes foram colocadas, elas ficavam na Raíz do site quando o site era gerado, e pra mim isso ficava muito bagunçado. E agora, os arquivos estão mais organizados.

Concluindo…

Posso dizer que realmente gostei muito dessa experiência. O Hugo é uma boa ferramenta para gerar sites, e gostei do quão leve são as páginas criadas pelo Hugo. Pudera, as páginas nada mais são do que um punhado de imagens, HTML e CSS.

Estou certo de que quero continuar com esse Blog e que eu quero migrar o Cantinho do Romeo para o Hugo. Talvez, eu aplique esse mesmo tema no Cantinho do Romeo, com as devidas personalizações. E claro, colocando o elementos com a cor Roxa, que é característica do Cantinho do Romeo desde que eu fiz o tema Kitty.

Porém, para o Canitnho do Romeo eu terei um belo trabalho. Afinal, tem mais de novecentas postagens por lá. Talvez, eu migre o Cantinho do Romeo em ondas, primeiro sendo os desenhos de 2025, que já estão organizados, e as postagens mais importantes e depois eu faça uma curadoria do que irá ou não para o novo site. Acho que isso seria uam boa solução.