↓ Ir para o conteúdo principal
El Taller del Admin
  1. Artigos/

O Workshop de Administração - Migrando do Wordpress para o Hugo

Rubén Infante Docio
Autor
Rubén Infante Docio
Engenheiro de software
Tabela de conteúdos

Por anos eu tive este blog em mente, pensando: vamos ver se faço uma entrada sobre isso ou aquilo, o tempo passou e, quando reviso, percebo que não escrevi um único post há 8 anos.

Na era atual da IA, pode não fazer sentido manter um blog, mas gostaria de manter minhas habilidades de escrita e comunicar os projetos pessoais que realizo.

Este blog foi criado há 19 anos com o nome “Mis Cosas Geek”, usando “Geek” como um termo associado a uma pessoa fascinada por tecnologia, porém, nos últimos anos, o termo tem sido cada vez mais associado à cultura pop, videogames, quadrinhos, filmes e música cult, além de ficção científica e fantasia, e esse não é o objetivo deste blog, portanto, a partir de agora, queridos amantes do silício, este site será chamado de “Oficina do Administrador” e continuaremos falando sobre eletrônica, desenvolvimento e alguns temas novos como automação residencial e impressão 3D.

A nova Stack
#

Essa mudança de nome pode não ser a única novidade e, por isso, também foi migrada em nível tecnológico para gerar HTML estático; os motivos para essa mudança são: evitar manter um banco de dados e escrever em Markdown, além de melhorias em SEO, desempenho, acessibilidade e segurança (basicamente porque é HTML estático :D).

Escolha de um gerador de local estático
#

A escolha foi Hugo, nessa nova fase quero focar em escrever em vez de manter plugins, atualizações, SEO etc., mantendo o melhor desempenho possível. Hugo traz as seguintes vantagens em relação a tecnologias similares como Astro, Jekyll ou Next.js.

  • Não possui dependências
  • A curva de aprendizado é baixa.
  • Sua velocidade é muito alta.
  • É moderno, comparado acima de tudo a Jekyll
  • Simplicidade

O próximo passo é escolher um tema robusto, bem projetado, com funcionalidades integradas e que não seja sobrecarregado, após comparar múltiplos temas existentes Blowfish foi escolhido.

Exportação
#

Para a migração, a primeira coisa é extrair o conteúdo e arquivos do WordPress antigo usando uma das bibliotecas disponíveis no Github. Após comparar várias ferramentas como wordpress-export-to-markdown,markdown-exporter-for-wordpress e wp2hugo, esta última foi a clara vencedora devido às seguintes vantagens:

  • Comentários do trecho
  • Ele permite baixar não só as imagens e arquivos referenciados, mas também todos os existentes no WordPress
  • Transforme corretamente o HTML do WordPress incluindo blocos de código
  • Permite ajustar a estrutura dos arquivos e pastas no novo blog
  • Mantém slugs em WordPress e GUID

O Fluxo de Implantação
#

Em termos de implantação, embora na minha vida profissional eu tenha usado Jenkins, templates CI/CD do Gitlab e Azure DevOps, nunca tinha usado o Github Actions e a experiência tem sido maravilhosa.

Para a “hospedagem” do site, Cloudflare Workers foi usado que permite implantações gratuitas mesmo em repositórios privados, requisições ilimitadas, 20.000 arquivos, 25Mb por arquivo, redirecionamentos reais 301 (para manter redirecionamentos dos antigos feeds RSS do WordPress), 404 páginas por idioma, entre outros.

Está tudo em código: .github/workflows/publish.yml (Ação “Publicar”) e Cloudflare wrangler.jsonc (Trabalhador).

Cada push um main lança a Ação, que executa duas funções seguidas:

1. Tradução
#

Gostaria que o blog alcançasse mais pessoas, para isso escolhi as línguas mais faladas do mundo e as postagens serão automaticamente traduzidas para elas:

  1. Espanhol
  2. Inglês
  3. Mandarim
  4. Hindi
  5. Espanhol
  6. Francês
  7. Árabe
  8. Bengali
  9. Português
  10. Russo

Para isso, uso translate.py que traduz postagens novas ou modificadas usando Microsoft Translator gratuitamente e envia as traduções para o repositório. Se não houver nada, o script termina em segundos sem pagar nenhuma taxa. - Se a tradução falhar ou a cota acabar: ele é exibido de qualquer forma, então o post em espanhol é publicado de qualquer forma. - Você pode retomar traduções pendentes ou redistribuir manualmente: Ações → Publicar → Executar o fluxo de trabalho. - Segredos do GitHub: AZURE_TRANSLATOR_KEY, AZURE_TRANSLATOR_REGION, CLOUDFLARE_API_TOKEN “Editar modelo de Trabalhadores Cloudflare”, zona talleradmin.com) e CLOUDFLARE_ACCOUNT_ID.

2. A implantação
#

Construa com Hugo (a versão mais recente disponível com suporte a Blowfish) e implante com wrangler.jsonc no Worker da Cloudflare.

O Boletim Informativo
#

Não tenho certeza se as newsletters ainda estão vivas ou morrendo, então criei uma com [Brevo](Para Newsletter) para testar. Fiquei surpreso que um recurso que há 20 anos oferecia centenas de sites gratuitamente para webmasters agora seja um serviço pago ultralimitado. Ainda assim, pelo que pude pesquisar, Claude e eu Brevo parecem oferecer o melhor plano gratuito com automação RSS.

Outros tópicos revisados e migrados
#

  • Acessibilidade

  • Adsense

  • Google Search Console: migre o blog, já que o domínio também mudou rubeninfante.com para talleradmin.com

  • Links de Afiliados Aliexpress e Amazon

  • Otimizar imagens

    sudo apt install optipng jpegoptim
find static/wp-content -iname '_.png' -print0 | xargs -0 -P"$(nproc)" -n4 optipng -o2 -strip all -quiet
find static/wp-content -iname '_.jp\*g' -print0 | xargs -0 jpegoptim --strip-all --all-progressive -q

  • Resenha robots.txt

  • Revisão dos acentos em categorias e tags

  • No meu caso, limpei tags e categorias usando o arquivo static/_redirects

  • Limpar arquivos não utilizados

  • Adicionei imagens em cada página e uma genérica para quando não há static/img/social-default.jpg e assets/img/background.jpg

  • Revise os plugins do WordPress antes da migração e desative todos, exceto os essenciais.

  • Modificar e criar redirecionamentos de rubeninfante.com para talleradmin.com

No trabalho diário
#

Comandos
#

  • Criar um novo item

    hugo new posts/mi-nuevo-articulo/index.md
    • Se uma imagem na pasta mi-nuevo-articulo for chamada de feature.[jpg,png,webp] ela será usada como imagem principal, cabeçalho e rede social

  • Verifique se há links quebrados

    • Crie o arquivo lychee.toml na raiz do site com conteúdo

        # lychee.toml — enlaces que no se comprueban (expresiones regulares)
  exclude = [
    "#nolychee$",   # la marca de evitar enlaces
    "https://web.archive.org/web/*",
    "reddit.com/submit",
    "facebook.com/sharer",
    "linkedin.com/shareArticle"
  ]
  exclude_path = ["^public/(en|zh-cn|hi|fr|ar|bn|pt-br|ru)/"]

    • Execute o comando:

        hugo --gc --cleanDestinationDir
  lychee --root-dir "$PWD/public" 'public/**/*.html' --format markdown --output informe.md

    • Resenha informe.md

      • Adicione https://web.archive.org/web/ao início da URL se o link não existir mais
      • Adicione #nolychee ao final de um link ou ao arquivo lychee.toml se a detecção estiver incorreta devido a antibots ou outro motivo

Para atualizar o tema
#

  • Atualize o tema

      cd themes/blowfish
  OLD=$(git rev-parse HEAD)                                  # para comparar después
  git fetch --depth 1 origin main && git checkout -B main origin/main

  • Revise os arquivos que sobrescreveu sobre o assunto

      cd ../..
  for f in $(cd layouts && find . -type f); do git -C themes/blowfish diff --quiet $OLD HEAD -- "layouts/${f#./}" 2>/dev/null || echo "Revisar: layouts/${f#./}"; done

Imagens
#

É importante saber as rotas pelas quais armazenar as imagens do Blog:

  • assets para imagens que o tema usa e pode otimizar: o fundo (defaultBackgroundImage), a imagem em destaque padrão (defaultFeaturedImage) e sua foto do autor. Por isso background.jpg está certo aí: o tema encolhe e os 3,4 MB não são servidos.

  • static para os quais você precisa de uma URL fixa e inalterada: favicons, ads.txt, PDFs, arquivos para baixar ou imagens para as quais você faz links de fora. Como exemplo, social-default.jpg coloquei isso porque o WhatsApp e o X pedem uma URL estável.

  • Imágenes de un post concreto: Na pasta do próprio post (pacote de páginas).

  • NOTA No hugo.toml eu configuro static também como assets. Por isso, imagens estáticas também são otimizadas quando o tema as usa como capa. É uma correção para a migração do WordPress.

      [[module.mounts]]
    source = "static"
    target = "assets"

Adicionar uma linguagem
#

  • Arquivos a serem modificados/adicionados

      config/_default/languages.xx.toml
  config/_default/menus.xx.toml
  i18n/xx.toml (Sólo en el caso del que el tema no incluya el idioma)

  • Modificar /config/_default/params.toml

      newsletter.formAction]
    es = "https://..."
    xx = "https://..."