Some Pixels en / pt

Migrando do Wordpress para o Jekyll

Jekyll

O Wordpress é incrível. É uma ótima plataforma para criar blogs e até sites mais complexos. O problema, é que para a maioria das pessoas... ele é um pouco exagerado, não é? Quando tudo o que você quer é escrever, ele tem opções demais para que você se preocupe, além de blogar.

Depois de pesquisar um pouco, encontrei o Octopress. Octopress é um excelente gerador de blogs estáticos, baseado no Jekyll, com tudo que você precisa para começar seu blog estático. Mas para o que eu preciso, até o Octopress é exagero. Então decidi pelo Jekyll mesmo. O Jekyll permite que você escreva seus posts em arquivos Markdown e gera seu blog em HTML puro. Sem distrações, é leve, customizável e fácil de deployar.

Como migrar os posts?

Para isso, usei o Exitwp, mas nada é tão fácil assim. Como usei alguns plugins no Wordpress, preferi configurar target_format: html no config.yaml e usar algumas regular expressions no body_replace para fazer a maior parte da conversão para Markdown. Você também pode configurar download_images: True e ele vai baixar todas as imagens para você.

Syntax highlighting

Jekyll tem suporte ao Pygments por padrão, o syntax highlighter mais famoso do mundo Python. Para usá-lo, basta instalar o Pygments e configurar pygments: true no _config.yml do seu blog. Também recomendo mudar o parser de Markdown para markdown: redcarpet. Assim você poderá usar GitHub Flavored Markdown (GFM) na sintaxe do seu código.

Tema

Quando você rodar jekyll new meu-blog, o Jekyll vai gerar um blog com o tema padrão. Então comecei removendo todo o CSS e migrando os arquivos para as tags HTML5. Depois incluí o normalize.css e escrevi meu próprio CSS. Não sou tão bom com design, mas tentei fazer o mais simples e legível possível.

O Jekyll também usa Liquid para os templates do blog, tornando as coisas mais fáceis ainda para programar as interações entre as páginas.

Thumbnails e Assets

Estou usando o plugin minimagick.rb com a instrução MiniMagick.processor = :gm para gerar os thumbnails automaticamente, usando GraphicsMagick. É só colocar o plugin na pasta _plugins e configurar:

mini_magick:
  thumbnail:
    source: images
    destination: thumbs
    commands:
      - resize: "600x5000>"
      - quality: 100

Também estou usando o Jekyll Asset Bundler para concatenar e comprimir todo o CSS e JS. E não esqueça de configurar:

asset_bundler:
  compress:
    js: yui
    css: yui
  base_path: bundles/

RSS

Para o Feed RSS, é só pegar um dos RSS templates e colocar na raiz do blog. E não se esqueça de colocar isso no header do seu HTML:

<link rel="alternate" type="application/rss+xml" title="Título do Blog" href="/feed.xml" />

Redirecionando os posts antigos

Se não quiser quebrar os links antigos do blog, crie um arquivo .htaccess para todos os 301 redirects (permanentes). Para fazer isso mais fácil, encontrei uma query que vai retornar todos os permalinks do seu Wordpress:

SELECT
    wpp.post_title,
    wpp.guid,
    wpp.post_date,
    CONCAT(wpo_su.option_value,
        REPLACE(
            REPLACE(
                REPLACE(
                    REPLACE(
                        REPLACE(wpo.option_value,'%year%',date_format(wpp.post_date,'%Y'))
                    ,'%monthnum%',date_format(wpp.post_date,'%m'))
                ,'%day%',date_format(wpp.post_date,'%d'))
            ,'%postname%',wpp.post_name )
        ,'%category%',wpc.slug )
    ) as permalink
FROM
    wp_posts wpp
    INNER JOIN wp_options wpo on wpo.option_name='permalink_structure' and wpo.blog_id=0
    INNER JOIN wp_options wpo_su on wpo_su.option_name='siteurl' and wpo_su.blog_id=wpo.blog_id
    INNER JOIN (
        select wtr.object_id ID, max(wpt.slug) slug
        from wp_term_relationships wtr
        inner join wp_term_taxonomy wtt on wtt.term_taxonomy_id=wtr.term_taxonomy_id and wtt.taxonomy='category'
        inner join wp_terms wpt on wpt.term_id=wtt.term_id
        group by  wtr.object_id
    ) wpc on wpc.ID=wpp.ID
WHERE
    wpp.post_type = 'post'
    AND wpp.post_status = 'publish'
ORDER BY
    wpp.post_date DESC

Agora é só escrever as regras de redirect assim:

redirect 301 /2013/11/your-post-permalink/ /new_blog/your-post-permalink

Conclusão

E é isso! A única outra coisa que tive que fazer, foi o suporte a múltiplos idiomas, mas isso é um pouco mais complexo. Vou escrever um post sobre depois. E não se esqueça de ler sobre como você pode fazer o deploy do blog. Essa página tem várias dicas sobre como tornar o processo mais fácil!