Toca do Rapoelho: O meu novo Blog que fiz no Hugo

Eu tenho um Blog no Wordpress, que é o Cantinho do Romeo, meu Blog de Desenhos, porém em queria fazer um Segundo Blog, afinal, queria falar de outras coisas que não fossem sobre os meus desenhos.

E com isso, acabei criando um Blog no Wordpress.com, mas acabei desanimando, justamente por achar que o Wordpress seria muito excessivo para um Blog tão despretensioso. E esse é o Blog que criei:

E quero contar bem por cima, um pouco do processo.

Primeira vez, num gerador de Site Estático

Como estava achando que o Wordpress era coisa demais pra mim, acabei encontrando o Hugo, um gerador de sites estáticos feito em Go e que usa o Markdown para formatar as postagens. Perfeito. E mexendo um pouco, consegui um resultado que me agradou muito.

Simplesmente adorei usar o Hugo. Ele é muito fácil de ser instalado, tem um webserver que roda no localhost:1313 que permite visualizar as alterações, e ele gera o site muito rápido, com tempos que podem chegar a milissegundos. E relatei o processo de criação do Blog aqui:

Publicando o Blog ao mundo

O Blog estava muito bonito na minha máquina local, mas faltava algo muito importante: Ele estar online. Eu já tinha o domínio, já tinha a hospedagem, só faltava enviar ele para estar na Internet. Com isso, acabei seguindo esse vídeo, que explica bem o processo do autor para postar num Blog que usa o Hugo:

E assim eu fiz. Criei um Repositório no Github e um Local, fiz as configurações necessárias para o Repositório Local se comunicar com o Github, e do Github, fiz as configurações para ele se comunicar com a minha hospedagem da Hostinger. E claro que eu também documentei isso no novo Blog:

Falando assim, parece um bicho de sete cabeças, mas foi muito mais simples do que eu imaginava. Com isso, acabei formando um fluxo bem legal: Escrevo as postagens em Markdown, executo um Script que gera o novo site, envia os arquivos como um Commit para o Github e do Github, a Hostinger puxa para a minha hospedagem e magicamente a postagem está no ar.

Conclusões

Achei o Hugo tão gostoso de mexer, que estou considerando migrar o meu Blog de Desenhos para o Hugo, embora que isso vá ser um desafio maior, por causa da quantidade de postagens. E também, por causa de algumas necessidades, como agendar as postagens; que não é algo que o Hugo faz nativamente, afinal não há um servidor como no Wordpress.

E bem provável que eu tenha que aprimorar essas habilidades:

  • Criar e/ou modificar alguns Shortcodes para o meu uso tanto na Toca do Rapoelho quanto no Cantinho do Romeo;
  • Aprender algumas tags que possam ser úteis no Markdown e que possam me ajudar;
  • Aprender mais sobre o Go, pois, aparentemente, o Hugo usa o Go nos Templates que ele usa para gerar as páginas;
  • Aprender algumas coisas do Github, como os Github Actions, que vi que pode ser usado para agendar algumas ações.

E foi assim que o meu Blog ficou em sua versão final:

E comparando com a versão que fiz no Wordpress.com, acho que esse Blog no Hugo está bem mais bonito.

Claro, tive que alterar algumas coisas nos Templates do tema que estou usando para fazer as coisas do jeito que eu quero, como no caso das imagens para fazer os cards do OpenGraph. E para ser sincero, o Hugo está me dando uma liberdade maior nesse meu Blog secundário.

14 curtidas

parabéns pelo trabalho.

2 curtidas

Cara, ficou realmente bem bonito, me diz, o Hugo mais numa vibe mais Astro, ou seja, vc coda de vdd, ou vai numa vibe mais Wordpress, menos code, mais coisa visual?
Eu uso bastante o Astro hj, basicamente só ele, e to gostando bastante, pois to acostumado com html, css, e quando preciso, JS.
Pelo q vi, no hugo se faz tudo em md. Isso é eficiente msm?

3 curtidas

Bem, várias coisas, o próprio tema que você escolhe que traz, como o cabeçalho que há na tela inicial do meu Blog, e por vezes, ou é no arquivo principal de configuração (o hugo.yaml) ou em algum arquivo separado na documentação do tema.

Mas você também pode alterar os templates que o Hugo usa para poder modificar alguns comportamentos, e aí é código mesmo. Por exemplo, tive que adicionar algumas linhas num dos templates para que as fontes que eu queria usar fossem carregadas.

E para escrever os posts, é Markdown. Aí depende do editor de Markdown que você usa.

3 curtidas

Entendi, o Astro tem ferramenta parecida com isso pra blog, markdown pros posts. Mas ent entendi, ele e bem menos “codável” q o astro… Gosto do Astro pois fassa tudo do 0, por isso vou continuar nele. Mas entendo o apelo do hugo, e bem mais simples pra quem nao meche mt com code… mas vlw!

2 curtidas

Ficou top demais!

Sucesso e que Deus o abençoe!

3 curtidas

Eu ainda a estou na “superfície” do Hugo, digamos assim. Mas pelo que sinto, usando ele, é que realmente, não é tão necessário mexer em código para o básico, principalmente se você já pega um tema mais completo.

Porém, se você quer se aprofundar, aí tem que mexer em código mesmo, modificando os templates e tal. Por exemplo: modifiquei o template que gera aqueles Cards do OpenGraph com a imagem de destaque e a descrição para compartilhar em outros locais.

E modifiquei três coisas nele:

  • Separei a imagem do card do OpenGraph da que seria usada nas capas dos posts site (embora eu não tenha feito uma para as capas dos posts). Justamente porque o tema comfigura as capas para serem com 250 px de altura e o OpenGraph recomenda uma que seja mais ou menos 1200x600.
  • Mudei o padrão do tema em usar o logo do site para gerar o card do OpenGraph para um personalizado;
  • Mudei a descrição do OpenGraph para usar a variável summary ao invés da description.

E essas coisas, tive que ir no código mesmo. E vejo que se você quiser criar seu próprio tema, vai ter que realmente mexer em código e implementar as coisas por si.

E também acho que provavelmente terei que mexer em código se eu for portar o meu Blog de desenhos para o Hugo. Pois, quero criar novas Taxonomias para organizar melhor o conteúdo e se eu usar e mesmo tema que estou usando na Toca, terei que fazer ele exibir essas Taxonomias.

Obrigado!

Obrigado.

3 curtidas

Realmente, ele é mais “beginner like” q o Astro. O astro tem temas pré-prontos tbm, mas nunca cheguei a usar. Agr msm, estou criando meu novo portifólio nesse exato momento, estou mexendo no css global agr. A estrutura dele é bem legal, por componentes… Dá uma olhada:

src
├── components
│   ├── About.astro
│   ├── Cards.astro
│   ├── Contact.astro
│   ├── Footer.astro
│   ├── Header.astro
│   └── Welcome.astro
├── layouts
│   └── Layout.astro
├── pages
│   └── index.astro
└── styles
    └── global.css

Geralmente, eu crie um global bem simples, com as importações, cores, etc, e se estiliza cada componente isoladamente, nesse estílo:

---

---

<!-- Hero -->
<section>
  <h1 id="home">Hi, my name is Henrique!</h1>
  <h2>
    Linux Enthusiast developer, focused on elegant and efficient solutions.
  </h2>
  <a href="#tools">View Stack</a>
</section>

<style>
  section {
    margin: 200px 300px 300px 300px;
    text-align: center;
    max-width: 1500px;
  }

  h1 {
    font-weight: bolder;
    font-size: 50px;
  }

  a {
    background-color: var(--text);
    color: var(--bg);
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
    border-radius: 10px;
    margin-top: 100px;
    margin-bottom: 100px;
    max-width: 200px;
    display: inline-block;
    transition: 0.3s ease-in-out;
  }

  a:hover {
    transform: translateY(-5px);
  }

  @media (max-width: 800px) {
    section {
      margin: 53px 80px 80px 80px;
    }

    h1 {
      font-size: 35px;
    }

    h2 {
      font-size: 20px;
    }

    a {
      margin-bottom: 250px;
    }

    a:hover {
      transform: translateY(0px);
    }
  }
</style>
3 curtidas

Parabéns! Ficou bem legal! :clap:

4 curtidas

Adorei o blog!
E a dica do Hugo.

2 curtidas

Bem interessante, realmente parece bem simples. A do meu Blog, está sendo essa aqui:

├── assets
├── atualizar-site
├── content
│   └── posts
├── data
│   ├── colors.yml
│   ├── footer_columns.yml
│   ├── jumbotron.yml
│   └── supported_icons.yml
├── hugo.yaml
├── i18n
│   └── pt.toml
├── layouts
│   └── partials
│       ├── head_meta_opengraph.html
│       ├── head_meta_seo.html
│       ├── head_meta_twitter.html
│       └── inject
│           └── head.html
├── public
├── resources
│   └── _gen
│       └── assets
│           └── scss
│               ├── style.scss_b4ac9c581169bbe215738ec274a3b4f2.content
│               └── style.scss_b4ac9c581169bbe215738ec274a3b4f2.json
├── static
│   ├── fonts
│   │   ├── albert-sans
│   │   │   ├── albert-sans.css
│   │   │   └── albert-sans.woff2
│   │   └── alphakind
│   │       ├── alphakind.css
│   │       └── alphakind.woff2
│   ├── google14f2fce2abbcf1f9.html
│   └── images
│       └── site
│           ├── android-chrome-192x192.webp
│           ├── android-chrome-512x512.webp
│           ├── apple-touch-icon.webp
│           ├── background.webp
│           ├── favicon-16x16.webp
│           ├── favicon-32x32.webp
│           ├── favicon.webp
│           ├── featured.webp
│           ├── logo.svg
│           └── logo.webp
└── themes
    └── hugo-ficurinia
        ├── archetypes
        │   └── default.md
        ├── assets
        │   ├── feed_style.xsl
        │   └── scss
        │       └── style.scss
        ├── content
        │   ├── manifest.md
        │   └── search.md
        ├── data
        │   ├── colors.yml
        │   └── supported_icons.yml
        ├── generate_icons.sh
        ├── i18n
        │   ├── de.toml
        │   ├── en.toml
        │   ├── es.toml
        │   ├── fr.toml
        │   ├── it.toml
        │   └── pt.toml
        ├── images
        │   ├── screenshot.png
        │   └── tn.png
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── baseof.json
        │   │   ├── list.html
        │   │   ├── manifest.json
        │   │   ├── rss.xml
        │   │   ├── search.html
        │   │   ├── search.json
        │   │   └── single.html
        │   ├── index.html
        │   ├── index.json
        │   ├── index.xml
        │   ├── partials
        │   │   ├── article_card.html
        │   │   ├── build_assets.html
        │   │   ├── cactus_chat.html
        │   │   ├── commento.html
        │   │   ├── date.html
        │   │   ├── featured_articles.html
        │   │   ├── footer_columns.html
        │   │   ├── footer.html
        │   │   ├── header.html
        │   │   ├── header_navigation.html
        │   │   ├── head.html
        │   │   ├── head_icons.html
        │   │   ├── head_meta_opengraph.html
        │   │   ├── head_meta_seo.html
        │   │   ├── head_meta_twitter.html
        │   │   ├── home_post_list.html
        │   │   ├── iconlink.html
        │   │   ├── inject
        │   │   │   ├── body.html
        │   │   │   ├── content-after.html
        │   │   │   ├── content-before.html
        │   │   │   ├── footer.html
        │   │   │   ├── header-after.html
        │   │   │   ├── header-before.html
        │   │   │   └── head.html
        │   │   ├── js_paginator.html
        │   │   ├── jumbotron.html
        │   │   ├── nerdlink.html
        │   │   ├── paginator.html
        │   │   ├── plausible.html
        │   │   ├── related_articles.html
        │   │   ├── searchbar.html
        │   │   ├── share_on_fediverse.html
        │   │   ├── showcase.html
        │   │   ├── simple_posts_list.html
        │   │   ├── single_post.html
        │   │   ├── toc.html
        │   │   └── umami.html
        │   └── shortcodes
        │       ├── imgwwidth.html
        │       └── video.html
        ├── LICENSE
        ├── README.md
        ├── static
        │   ├── fonts
        │   │   ├── jetbrains-mono
        │   │   │   ├── jetbrains-mono-bold-italic-latin-ext.woff2
        │   │   │   ├── jetbrains-mono-bold-italic-latin.woff2
        │   │   │   ├── jetbrains-mono-bold-latin-ext.woff2
        │   │   │   ├── jetbrains-mono-bold-latin.woff2
        │   │   │   ├── jetbrains-mono.css
        │   │   │   ├── jetbrains-mono-extra-bold-italic-latin-ext.woff2
        │   │   │   ├── jetbrains-mono-extra-bold-italic-latin.woff2
        │   │   │   ├── jetbrains-mono-extra-bold-latin-ext.woff2
        │   │   │   ├── jetbrains-mono-extra-bold-latin.woff2
        │   │   │   ├── jetbrains-mono-italic-latin-ext.woff2
        │   │   │   ├── jetbrains-mono-italic-latin.woff2
        │   │   │   ├── jetbrains-mono-light-italic-latin-ext.woff2
        │   │   │   ├── jetbrains-mono-light-italic-latin.woff2
        │   │   │   ├── jetbrains-mono-light-latin-ext.woff2
        │   │   │   ├── jetbrains-mono-light-latin.woff2
        │   │   │   ├── jetbrains-mono-medium-italic-latin-ext.woff2
        │   │   │   ├── jetbrains-mono-medium-italic-latin.woff2
        │   │   │   ├── jetbrains-mono-medium-latin-ext.woff2
        │   │   │   ├── jetbrains-mono-medium-latin.woff2
        │   │   │   ├── jetbrains-mono-regular-latin-ext.woff2
        │   │   │   └── jetbrains-mono-regular-latin.woff2
        │   │   └── symbols-nerd-font
        │   │       ├── symbols-nerd-font.css
        │   │       ├── symbols-nerd-font-mono.woff2
        │   │       └── symbols-nerd-font.woff2
        │   └── robots.txt
        └── theme.toml

Basicamente, a pasta themes/hugo-ficurinia tem todos os arquivos do tema, e eles podem ser sobrescritos nas pastas correspondentes do tema. Por exemplo: o arquivo responsável por colocar as tags do OpenGraph, é o themes/hugo-ficurinia/layouts/partials/head_meta_opengraph.html.

E se você não quiser modificar os arquivos do tema, pode criar um novo arquivo com o mesmo nome para colocar as mudanças que você deseja. No exemplo acima, seria o layouts/partials/head_meta_opengraph.html.

E os arquivos do Hugo que montam o site, são mais ou menos assim:

<meta property="og:site_name"
    content='{{ .Site.Title | default "Ficurinia" }}' />
{{ if .IsPage }}
    <meta property="og:title" content="{{ .Title }}" />
    <meta property="og:type" content="article" />
    
    <meta
        property="article:author" content="{{ .Site.Params.Author }}" />
    {{ if .Site.Params.fediverseAccount }}
    <meta
        name="fediverse:creator" content="{{ .Site.Params.fediverseAccount }}" />
    {{ end }}
    <meta
        property="article:published_time"
        content='{{ .Date.Format "2006-01-02T15:04:05Z-0700" }}' />
    {{ if .Params.tags }}
        {{ range sort .Params.tags }}
            <meta property="article:tag" content="{{ . }}" />
        {{ end }}
    {{ end }}
    <meta property="og:url" content="{{ .Permalink }}" />
    {{ $image := .Site.Params.ogImage | default "/img/icon.svg" }}
    {{ if .Params.ogImage }}
        {{ if or (hasPrefix .Params.ogImage "/") (hasPrefix .Params.ogImage "http://") (hasPrefix .Params.ogImage "https://") }}
            {{ $image = .Params.ogImage }}
        {{ else }}
            {{ $image = print .Permalink "/" .Params.ogImage }}
        {{ end }}
    {{ end }}
    <meta property="og:image"
        content="{{ $image | absURL }}" />
    {{ 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 }}
{{ else }}
    <meta property="og:title"
        content='{{ .Site.Title | default "Ficurinia" }}' />
    {{ if .Site.Params.description }}
        <meta property="og:description" content="{{ .Site.Params.description }}" />
    {{ end }}
    <meta property="og:type" content="blog" />
    <meta property="og:image"
        content='{{ .Site.Params.ogImage | default "/img/icon.svg" | absURL }}' />
{{ end }}
3 curtidas

Obrigado pelas dicas, @rapoelho

Já faz tempo, que às vezes penso (vagamente) em refazer meus antigos sites “estáticos”, e suas dicas sobre o Hugo acendeu uma luz. – Ontem, passei umas boas horas brincando de explorar as possibilidades do Hugo.

Cheguei a iniciar alguns blogs no Wordpress, faz alguns anos, mas acabei optando pelo Blogger – que, por sorte, até agora não me deu nenhum gancho (toc toc toc!). – Não considero “excessivo”. Pelo contrário, faltam recursos para qualquer coisa, fora do “basicão” (texto e imagens). No mais, é só digitar, publicar e ser feliz.

É por isso que me limito a “pensar vagamente” em migrar meus antigos sites “estáticos”, que têm umas 6 mil páginas. – Até para eliminar metade delas (quais??), daria muito trabalho. – Acho mais viável começar um novo site, e ir fazendo aos poucos, em “modo diversão”.

Aí, suas dicas sobre o Hugo acenderam aqui uma luz – e aproveitei para dar uma olhada no Astro e vários outros SSGs, que eu ainda não conhecia.

Não encontrei o Hugo nos repositórios do Mageia Cauldron (talvez eu precise habilitar mais algum “canal”).

Instalei o Hugo no Void Linux, em seguida no Debian Testing, e comecei as brincadeiras básicas iniciais. – Achei ótimo – mas como tenho o hábito de alternar entre várias distros, minha primeira experiência foi “centralizar” o blog experimental em 1 partição só, em vez de me dispersar em várias /home.

Acabei fazendo assim, no Arch:

  502  2025-10-29_20-57-26 hugo new site /run/media/flavio/Warehouse/Huguenot
  506  2025-10-29_21-00-21 ln -sf /run/media/flavio/Warehouse/Huguenot/ /home/flavio/
  507  2025-10-29_21-00-44 cd Huguenot
  509  2025-10-29_21-03-05 git init
  510  2025-10-29_21-06-26 git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
  511  2025-10-29_21-07-55 echo "theme = 'ananke'" >> hugo.toml

Primeiro, criei o blog (pasta local) na partição de dados (Warehouse):

Em seguida criei o link para ela na /home do Arch:

Antes, eu já tinha feito umas brincadeiras no Debian:

Agora, é ler, configurar 1 zilhão de coisinhas, e me divertir à vontade.

Pelo PKGs, verifiquei que o Hugo está nos repositórios oficiais o Arch Linux, do Debian Stable (MX Linux) e Testing, Fedora, openSUSE, Ubuntu 24.04 LTS (Kubuntu LTS, Mint), Void Linux – e em Flatpak, que ainda não uso:

Ficam faltando Mageia e PCLinuxOS.

1 curtida

Aproveitanto o post, vou fazer outro post pra isso tbm, mas, terminei meu portifólio todo em Astro:

Se quiserem dar uma olhada :grinning_face:

O Blogger é bem simplão, e para alguns isso já basta. É interessante para quem só quer escrever e não quer se preocupar com muita coisa. Mas os temas padrão do Blogger, não me agradam tanto.

Mas o bom do Blogger, é que ele tem muito mais espaço do que o Wordpress.com hospedado pela Automattic, que tem apenas 1 GB de espaço e se você quiser algo mais, ou você procura uma hospedagem com o Wordpress ou paga caro para a Automattic.

E se o Wordpress hospedado pela Automattic é limitado, as das outras oferecem tantas possibilidades, que para quem quer ter um Blog despretensioso, é coisa demais.

O meu desafio maior quanto às postagens, é organizar elas. Principalmente, porque em algumas coisas no meu Blog de desenhos, eu meio que “troquei o pneu com o carro andando”.

Como a forma de escrever as postagens, em que antes eu só exibia o resultado final e descrevia um pouco sobre o desenho, depois passei a mostrar apenas os prints do processo dos desenhos digitais e as fotos dos desenhos no papel, depois passei a comentar mais sobre o processo.

Assim como, a forma em que eu publicava. Antes, era em partes, tipo “Parte 01” para o desenho no papel e “Parte 02” para a Digitalização daquele desenho e depois passei a fazer a postagem numa tacada só (juntando o processo no Tradicional e o Digital).

E depois, a forma em que eu nomeava as postagens. Fazia títulos mais normais, depois passei a fazer algumas séries para não repetir os títulos, e por fim, colocar o ano e um número, além de um título.

Nem sabia que existia em Flatpak :eyes:

Gostei, ficou bem agradável.

2 curtidas

Uma dica usa tailwindcss para estilos menores e css para animações e layout de telas. Fica mais limpo e facil manutenção.

2 curtidas

Vlw pela dica mn, eu ja tentei usar ele, mas nao fui mt a forma de trabalho dele não, acho q misturar o conteúdo com o estilo, na mesma linha, não da mt certo, mas msm assim, vlw mn!

2 curtidas