Criando o Blog do Cantinho do Romeo no Hugo
18 Dec 2025 (updated: 18 Dec 2025 )
Como falei anteriormente, eu iria migrar o Cantinho do Romeo do Wordpress para o Hugo. Dito e feito. Aqui estou, documentando toda essa migração, que será mais trabalhosa do que a migração da Toca do Rapoelho, principalmente pelos desafios de um Blog um pouco mais complexo.
Criando o Blog Localmente
Para criar o Blog, bastou seguir os mesmos passos para a Toca do Rapoelho, ou seja, esse bloco de comandos:
hugo new site cantinhodoromeo --format yaml
cd cantinhodoromeo
git init
E já que eu tinha configurado o git quando subi a Toca do Rapoelho, eu não precisei desse passo para o Cantinho do Romeo. Assim, os arquivos do Blog estavam criados.
O que é preciso fazer?
Depois que o Blog foi criado, ainda há coisas que se precisam fazer, e é isso que faremos.
Mudando a Estrutura de Pastas
Uma das coisas que precisa ser feitas é mexer na estrutura de pastas. Essa é a estrutura inicial do Blog feito com o Hugo:
├── archetypes
│ └── default.md
├── assets
├── content
├── data
├── hugo.yaml
├── i18n
├── layouts
├── static
└── themes
Como eu falei, eu queria separar as Inspirações, os Desenhos e as Fotos/Prints do Processo, já que no Wordpress é tudo junto e misturado. E como fazer isso? Criar novas pastas na pasta static. E assim, a estrutura fica assim:
├── archetypes
│ └── default.md
├── assets
├── content
├── data
├── hugo.yaml
├── i18n
├── layouts
├── static
│ └── images
│ ├── cover
│ ├── desenhos
│ ├── ideias
│ ├── inspiracoes
│ └── poses
└── themes
E essas são pastas bem autoexplicativas. Outra coisa a se fazer, é mexer na pasta content. Assim, criei quatro pastas:
artes: Aqui ficam as artes do Cantinho. Sejam artes pessoais, comissões ou presentes;ideias: Aqui ficam alguns rascunhos de ideias e algumas inspirações. Quero usar essa pasta para isso;outros: Aqui ficam os posts que não são muito relacionados com os desenhos;poses: Aqui ficam os posts do Arquivo de Poses.
E claro que, mais tarde, tive que criar uma pasta especial para algumas das postagens anteriores: a galeria. Essa pasta é específica para desenhos antes de 2021, já que os de 2020 estão muito bagunçados e eu quero colocar desenhos desde Janeiro de 2017 no Blog, e essa pasta vem a calhar.
E com isso, a estrutura fica assim:
├── archetypes
│ └── default.md
├── assets
├── content
│ ├── galeria
│ └── posts
│ ├── artes
│ ├── ideias
│ ├── outros
│ └── poses
├── data
├── hugo.yaml
├── i18n
├── layouts
├── static
│ └── images
│ ├── desenhos
│ ├── inspiracoes
│ └── poses
└── themes
Aplicando o Tema
Assim como na Toca do Rapoelho, escolhi o tema Ficurinia. Para isso, adicionei o tema como um módulo no Hugo…
git submodule add https://gitlab.com/gabmus/hugo-ficurinia.git themes/ficurinia
E copiei quase toda a configuração do hugo.yaml da Toca do Rapoelho para o hugo.yaml do Cantinho do Romeo. E assim, ficou o Cantinho do Romeo:
Depois, copiei os logos necessários para a pasta /static/images/site, e converti todos com o comando mogrify -format webp *, e a pasta ficou assim:
Mudando o Caminho das Fontes do Tema
Com isso, foi a hora de mudar umas coisas na pasta do tema. Começando por criar uma pasta de fonts para poder deixar a estrutura mais organizada. E como modifiquei o local das fontes, tive que criar o arquivo /layouts/partials/head.html para mudar o caminho das fontes:
<link href="/symbols-nerd-font/symbols-nerd-font.css" rel="stylesheet" />
<link href="/jetbrains-mono/jetbrains-mono.css" rel="stylesheet" />
Para isso:
<link href="/fonts/symbols-nerd-font/symbols-nerd-font.css" rel="stylesheet" />
<link href="/fonts/jetbrains-mono/jetbrains-mono.css" rel="stylesheet" />
Mudando as cores do Tema
Depois, copiei mais dois arquivos: o /data/jumbotron.yml para criar o cabeçalho do site e o /data/colors.yml para modificar as cores. E assim ficou o arquivo das cores do Cantinho do Romeo:
default: light
auto_switch: false
dark:
bg: '#242629'
hl_bg: '#34363b'
fg: 'white'
dim_fg: '#bababa'
stroke: '#4f4f4f'
accent: '#79199b'
sidebar:
bg: '#34363b'
fg: 'white'
light:
bg: '#f2e8f5'
hl_bg: '#e4d1eb'
fg: '#24072e'
dim_fg: '#55126d'
stroke: '#af75c3'
accent: '#79199b'
sidebar:
bg: '#e6e6e6'
fg: '#18051f'
E como a Toca do Rapoelho tem o Âmbar como cor principal, o Cantinho do Romeo teria o Roxo como cor principal e com isso, o Cantinho do Romeo fica com o tema claro como padrão. Mas para não ficar “branco demais”, optei por colocar um lilás bem suave de fundo, e assim ficou o Cantinho do Romeo:
Corrigindo as Capas dos Posts
Se tinha uma coisa que me incomodava no tema, eram as capas dos posts. Para mim, elas eram “grandes demais”. Eu não sei, mas elas pareciam muito grandes, mesmo que eu usasse a mesma proporção das capas que eu uso no Wordpress.
Mas acabei encontrando uma forma de corrigir isso: Apenas ajustando o template HTML e mexendo um pouco no SCSS. No SCSS, eu adicionei isso aqui:
.fancycover {
width: 870px;
height: 400px;
overflow: hidden;
border-radius: 8px;
}
.fancycover img {
width: 100%;
}
E já no HTML, eu modifiquei isso:
{{ if .Params.Image }}
{{ if or (hasPrefix .Params.Image "/") (hasPrefix .Params.Image "http://") (hasPrefix .Params.Image "https://") }}
<img src="{{ .Params.Image }}" alt="{{ .Params.Alt }}" />
{{ end }}
</div>
{{ end }}
Para isso:
{{ if .Params.Image }}
<div class="fancycover">
{{ if or (hasPrefix .Params.Image "/") (hasPrefix .Params.Image "http://") (hasPrefix .Params.Image "https://") }}
<img src="{{ .Params.Image }}" alt="{{ .Params.Alt }}" />
{{ end }}
</div>
{{ end }}
O que fiz, foi apenas adicionar um <div class="fancycover", que foi aplicado as propriedades que defini no SCSS. E esse foi o resultado, que me agradou bastante.
Apesar de não ter ficado exatamente do jeito que eu queria, eu gostei mesmo assim. Para mim, ainda ficou bem agradável.
Ajustando Problemas na Capa
Claro, tive problemas com esse ajuste da capa, pois ela ficou “estourando” os limites da tela, quando fui editar um dos posts para o Cantinho do Romeo.
E depois de pensar um pouco, fui editar o SCSS. Comecei alterando o widht de 870px para 100% na seção .fancycover que eu tinha criado. Isso faria ele tomar 100% do espaço disponível. Mas isso fez com que a imagem não ocupasse toda a área reservada para ela.
Sendo assim, alterei outra parte do parte do SCSS, o .fancycover img, onde adicionei mais uma propriedade: height, em que coloquei em 100%. Porém, isso fez com que a imagem ficasse esticada.
Por fim, para resolver isso, tive que criar outra propriedade dentro do .fancycover img: object-fit, onde coloquei cover como valor.
E o código do SCSS para isso ficou assim:
.fancycover {
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 8px;
}
.fancycover img {
width: 100%;
height: 100%;
object-fit: cover;
}
Outros pequenos ajustes
Claro, fiz mais alguns pequenos ajustes no tema, como ativar o modo de Grade. Para mim, isso fez com que o Cantinho do Romeo feito no Hugo ficasse mais próximo da versão Wordpress.
 |
 |
|---|---|
| Há diferenças entre as duas versões? Óbvio. Mas eu gostei muito delas. Outra coisa que acabei fazendo: Adicionei uma “capa” para o Blog. |
Eu simplesmente adorei isso e acabei fazendo alguns ajustes nas cores do cabeçalho, como a cor da fonte quando coloca o cursor do mouse em cima dos itens do menu.
&:hover, &:focus {
color: white;
background-color: var(--default_accent);
}
Outro lugar que mudei as cores, foram dos itens do menu das Redes Sociais e da cor da fonte quando coloca o cursor do mouse em cima dos itens do menu, mas no Cabeçalho da página inicial.
.nerdlink:hover {
color: var(--default_accent) !important;
}
#main-nav a:hover {
color: white !important;
}
E assim ficou os Menus do Cantinho do Romeo depois dessas mudanças. Eu gostei muito de como ficou.
  |
  |
|---|
Mas acabei percebendo uma coisa: O texto da barra de pesquisa estava ficando branco quando passava o cursos em cima. Adicionei um color: var(--default_fg); na classe correspondente e assim, a Barra de Pesquisa ficou como deveria estar.
 |
 |
|---|
Um jeito de Redimensionar as Imagens
Tinha uma coisa que estava me incomodando muito no site feito com o Hugo: O tamanho das imagens. Elas estavam grandes demais.
Acabei resolvendo isso, mudando a forma de inserir essas imagens. Ao invés de usar o código Markdown…
… para um Shortcode interno do Hugo, que suporta tags HTML. E assim, esse problema foi resolvido:
Mudanças na Estrutura do Blog
E já que no Hugo eu teria mais flexibilidade para criar as Taxonomias, decidi mudar um pouco a estrutura do Cantinho. Atualmente a estrutura de Categorias é essa aqui:
├── Anúncios e Novidades
├── Artigos
├── As Artes do Cantinho
│ └── Adopts
│ └── Art Trades
│ └── Artes Pessoais
│ └── Comissões
│ └── Eventos
│ └── Fanarts e Presentes
│ └── Sorteio
├── Behind The Scenes
│ └── Arquivo de Poses
│ └── Estudos
│ └── Ideias e Inspirações
│ └── Processo Criativo
│ └── Trabalho em Progresso
│ └── Treinos
│ └── Tutoriais
└── Estilo da Arte
│ └── Animação
│ └── Digital
│ └── Tradicional
└── Links Úteis
└── Séries
│ └── As Artes vs o Artista
│ └── Melhores Artes do Ano
└── Um Apoio a Outros Artistas
E acho que consigo simplificar bastante as Categorias do Blog. Talvez, dando apenas uma única categoria por postagem. Assim, as Categorias se resumiriam em:
├── Apoiando Artistas
├── Art Trade
├── Arte vs Artista
├── Artes Pessoais
├── Artigos
├── Comissões
├── Eventos
├── FanArt e Presentes
├── Links Úteis
├── Melhores Artes
├── Notinhas
├── Treino
└── Tutoriais
E quanto às novas Taxonomias, por enquanto, irei criar apenas uma: a de Técnica, que foi feita para indicar qual é o meio em que aquele desenho foi feito, seja no Tradicional ou no Digital. Ou mesmo, se é uma animação.
Criando o Modelo de Postagem
Se tem uma das coisas que eu mais gostei no Hugo, é que eu posso criar um “Archetype”, que nada mais é do que um modelo para novos conteúdos. E uma coisa legal nisso, é que eu posso incluir conteúdos. Ou seja, já criar um post mais ou menos pronto, o que me facilita muito.
E para os posts de Artes do Cantinho do Romeo, criei esse Archetype:
{{- $artName := .File.ContentBaseName -}}
{{- $artID := substr .File.ContentBaseName 0 7 -}}
---
date: '{{ .Date }}'
title: '{{ replace .File.ContentBaseName "-" " " | title }}'
summary:
url: /posts/{{ $artName }}
categories:
- artes-pessoais
tecnica:
- tradicional
tags:
image: "/images/cover/{{ $artName }}.webp"
socialPost: "/images/desenhos/{{ $artName }}.webp"
---
## Comentários do Processo
 | 
|:-------------------------:|:-------------------------:|
 | 
|:-------------------------:|:-------------------------:|
 | 
|:-------------------------:|:-------------------------:|
## Comentários do DesenhoTudo começa com essa parte aqui, que define duas variáveis: O nome da Arte (artName) e o ID da Arte (artID).
{{- $artName := .File.ContentBaseName -}}
{{- $artID := substr .File.ContentBaseName 0 7 -}}
O Nome da Arte é obtido com o nome do arquivo. E só. Já o ID, o nome do arquivo, mas extraindo os primeiros caracteres que é sempre um número como 2025.100. O artName é usado nos campos de url, image e socialPost e no arquivo final da arte. Já o artID é usado nas fotos do Processo.
Adicionando as Redes Sociais
Depois foi a hora de fazer uma edição no hugo.yaml para poder adicionar as Redes Sociais. Como o tema tem isso por padrão, foi bem fácil. Só precisei adicionar essas linhas no arquivo:
menu:
icons:
- identifier: facebook
name: Facebook
url: https://facebook.com/cantinhodoromeo
weight: 10
- identifier: instagram
name: Instagram
url: https://instagram.com/cantinhodoromeo
weight: 20
- identifier: youtube
name: Youtube
url: https://www.youtube.com/@CantinhodoRomeo
weight: 30
E assim, as Redes Sociais do Cantinho do Romeo estavam adicionadas.
Mudando o OpenGraph
Outra coisa a se mudar: O OpenGraph, que nada mais é do que aquela prévia que aparece quando compartilhamos um site nas Redes Sociais. Para isso, eu tive que alterar três templates do tema: head_meta_opengraph.html, head_meta_seo.html e head_meta_twitter.html.
No head_meta_opengraph.html, alterei essa parte do código, que faz com que a capa padrão seja exibida. No arquivo original, é utilizado um dos logos para exibir a essa imagem, o que pra mim fica feio.
<meta property="og:url" content="{{ .Permalink }}" />
{{ $image := .Site.Params.icon512 | default "/img/icon.svg" }}
Com isso, decidi mudar para uma imagem guardada em /images/site, feita especificamente para isso. Então, mudei o trecho para:
<meta property="og:url" content="{{ .Permalink }}" />
{{ $image := .Site.Params.ogImage | default "/img/icon.svg" }}
Ou seja, ao invés de usar a variável icon512, o OpenGraph vai usar a ogImage. Outra mudança que fiz, foi usar o parâmetro summary ao invés do description para gerar as Descrições do OpenGraph. Eu não queria ter que usar duas variáveis parecidas no mesmo post.
{{ if .Params.description }}
<meta property="og:description" content="{{ .Params.description }}" />
{{ else }}
<meta property="og:description" content="{{ substr .Summary 0 160 }}" />
{{ end }}
Para isso, eu adicionei mais um if para poder fazer essa escolha.
{{ if .Params.summary }}
<meta property="og:description" content="{{ .Params.summary }}" />
{{ else if .Params.description }}
<meta property="og:description" content="{{ .Params.description }}" />
{{ else }}
<meta property="og:description" content="{{ substr .Summary 0 160 }}" />
{{ end }}
E assim como alterei a descrição no head_meta_opengraph.html, tive que fazer o mesmo no head_meta_seo.html. Onde a parte que gerava a descrição estava assim…
{{ if .Params.description }}
<meta name="description" content="{{ .Params.description }}" />
{{ else }}
<meta name="description" content="{{ substr .Summary 20 }}" />
{{ end }}
… e deixei assim, adicionando mais um if.
{{ if .Params.description }}
<meta name="description" content="{{ .Params.description }}" />
{{ else if .Params.summary }}
<meta name="description" content="{{ .Params.summary }}" />
{{ else }}
<meta name="description" content="{{ substr .Summary 20 }}" />
{{ end }}
E já no arquivo head_meta_twitter.html, tive que alterar três detalhes. Primeiro, a Imagem Padrão do OpenGraph, quando não tem nenhuma imagem definida, que estava assim…
{{ $image := .Site.Params.icon512 | default "/img/icon.svg" }}
… para isso:
{{ $image := .Site.Params.ogImage | default "/img/icon.svg" }}
Depois, a Descrição, que foi a mesma coisa que no head_meta_seo.html. E por fim, outra variável twitter:image, mas essa é a do site em geral. Que estava assim…
<meta name="twitter:image"
content='{{ .Site.Params.icon512 | default "/img/icon.svg" | absURL }}' />
… para ficar assim:
<meta name="twitter:image"
content='{{ .Site.Params.ogImage | default "/img/icon.svg" | absURL }}' />
E assim, finalizei essa parte.
Convertendo os Posts
Okay, o Blog está (quase) pronto. Mas como baixar todos os posts do Wordpress e converter mais de 900 posts para Markdown? Eu me perguntei isso, e acabei encontrando uma ferramenta pra isso e que me ajudou bastante, que é o wordpress-export-to-markdown, que funciona com o node.js.
Assim, tive que instalar o npm para executar o comando, que é esse comando gigantesco:
npx wordpress-export-to-markdown --post-folders=true --prefix-date=true --date-folders=year --save-images=attached --frontmatter-fields=date,title,excerpt:summary,slug:url,categories,tags,coverImage:image --include-time=true --input=cantinhodoromeo.WordPress.2025-10-04.xml
E o que esse comando faz?
--post-folders=true: Separa os posts e os arquivos dele por pastas;--prefix-date=true: Coloca um prefixo com a Data do Post. Isso me salvou muito, pois eu usava um modelo de nome mais simples;--date-folders=year: Separa os Posts por ano;--save-images=attached: Baixa todas as imagens que estão anexadas nos posts;--frontmatter-fields: Configura o Front Matter das Postagens, com os campos que eu utilizarei no Blog.date: Data da Postagem;title: Título da Postagem;excerpt:summary: Coloca o resumo da postagem do Wordpress. Como está com outro nome, renomeei deexcerptparasummary;slug:url: Coloca a parte final do Link do Wordpress. Aqui, decidi renomear paraurl, pois é o campo que uso no Hugo;categoriesetags: Autoexplicativo. São as Categorias e as Tags dos Posts;coverImage:image: É a imagem de Capa da Postagem. Aqui, renomeei para o campo que o tema usa para a postagem ter a capa.
include-time=true: Inclui a Hora na Postagem--input=cantinhodoromeo.WordPress.2025-10-04.xml: É o Arquivo de exportação do Wordress.
Essa ferramenta me ajudou para converter tudo para Markdown, porém, isso foi apenas o começo de todo o trabalho. Agora, é editar e organizar todas as postagens.
Palavras Finais
Apesar de ter mudado de ideia e ter começado um novo Blog no meio dessa migração, ainda continuarei essa migração do Cantinho do Romeo do Wordpress para o Hugo, mas com o objetivo de fazer o Cantinho do Romeo o meu arquivo das Artes que eu já fiz anteriormente.
Mas uma coisa é certa: Todo esse processo me fez aprender mais sobre o Hugo, HTML e CSS e simplesmente adorei isso! Para mim, é isso que mais importa em tudo isso.
E se tem algo que posso adiantar sobre o novo Blog é que ele é mais ousado do que o Cantinho do Romeo seria. E claro que estou documentando todo o processo do meu novo Blog, e muito do que está aqui, serviu como base para esse meu novo projeto.