Blogando como Hacker

28 January 2013

Muitos blogs hoje estão usando o Jekkyl ao invés do Wordpress, e muita gente que nem tinha Wordpress já começa pelo Jekyll.

Quando digo muita gente aqui, me refiro basicamente a programadores. O Wordpress com seus milhões de plugins não é mais bem visto devido a ser pesado, cheio de funcionalidades que ninguém usa, gera um resultado lento e não otimizado. O post Blogging like a Hacker do Tom Preston-Werner, apresenta uma forma bem legal de blogar, onde todo o suporte fica por conta do Github. Acho que ter um blog mais leve, bonito e simples só ajuda na vontade de escrever mais posts. Então, aqui vai a minha migração do Wordpress para o Jekyll.

Jekyll
O Jekyll é basicamente um gerador de páginas estáticas, que é tudo o que você precisa pra ter um blog. Alguns diretórios são compreendidos pelo Jekyll, como _posts e _layouts, que vai considerar seus templates e arquivos de posts para gerar o conteúdo estático. Ele usa ouma library pra renderizar templates chamada Liquid, que te ajuda com uma série de coisas no HTML, como por exemplo, fazer um loop nos seus posts.

No meu Github você pode conferir como organizei meus arquivos. Inicialmente, tenho 4 diretórios importante: _layouts, _layouts, _attachments, _posts, _plugins. Esses diretórios são explicativos por si só, porém o diretório _plugins no meu caso serve para configurar o Bundler e permitir que eu utilize o Gemfile para gerenciar as depêndencias.

Outro arquivo importante é o _config.yml. No meu caso configurei o diretório de css, imagens, o tipo de compressão dos css e a opção para não gerar cache.

Outro ponto legal de usar Jekyll é fazer tudo pelo git. Você tem todo seu blog em um diretório e trabalha como um projeto normal, fazendo commit, push, etc, bem diferente do Wordpress. Aliás, por falar em Wordpress, o Jekyll tem diversas tasks para Blog Migrations que podem ser usadas por quem já tinha blog antes do Jekyll aparecer. Usei a task para Wordpress, que gerou todos os meus posts em HTML. Provavelmente eu migre tudo para Markdown em algum momento, mas por hora, resolveu meu problema.

O que pode ser um pouco mais complicado são os comentários. Como Jekyll é estático, você tem que achar uma outra opção. Eu estou usando o DISQUS.

Para gerar o feed rss, estou usando esse template.

Github pages
Quando estava reconstruindo o blog usando Jekyll achava que iria hospedar no Heroku. Mas depois conheci o Github Pages. Eu nunca tinha usado esse serviço do Github que hospeda conteúdo estático e achei a melhor opção. A cada push no repositório ele já detecta que tem alterações, refaz o conteúdo estático e faz o deploy. E como o Jekyll foi criado pelo próprio pessoal do Github, tem um FAQ bem completo pra tirar as dúvidas.

Uma coisa que fui entender depois é que ele gera o conteúno no chamado safe mode que faz com que os plugins não rodem lá, ou seja, você precisar deixar tudo preparado local. O comando que o jekyll roda lá é: jekyll --pygments --no-lsi --safe e você pode ler mais sobre aqui. Tem mais uma série de coisas pra fazer, como configurar um arquivo CNAME para apontar para a url do blog, que pode ser achado aqui.

Blog Typography
O Jekyll te da toda a engine para blogar, mas não tem nenhum template bonito e preparado para leitura. Eu utilizei as dicas de um site chamado Interactive Guide to Blog Typografy para chegar na configuração atual desse blog.

O que ele ensina são padrões de layout, medidas importantes, espaçamento entre o texto, hierarquia visual, títulos, fontes e coisas do tipo, vale a pena conferir.

Responsive Web Design
Nesse blog usei Sass(SCSS), Compass e Susy. No começo optei por fazer Responsive apenas utilizando media querys, mas depois de fazer alguns tentes com alguns framewors de grids responsive acabei gostando de como o Susy faz os cálculos por colunas. Pra isso configuro os breakpoints que julgo interessantes, desenvolvo primeiro para mobile, e complemento para desktop para funcionar para qualquer dispositivo.



Otimizações e Design
Não sou um maníaco por otimizações, e muitas vezes prefiro algo bonito do que super rápido. Tentei usar o bom senso aqui. No início o design tinha alguns elementos que tornaram o site pesado, mas no Photoshop estava bonito. Usei o layout que criei no Photoshop como base, e fui fazendo escolhas de otimização. Um exemplo é o background, que optei por branco para facilitar a leitura e não carregar imagem. Porém um site branco tem tudo para ser feio se você não tomar cuidado.

Fiz uma série de experiencias com imagens, cores, fotos, fotos, etc. Incrível como é difícil chegar na simplicidade e ter um bom design, por isso admiro os sites minimalistas que de fato são bonitos. Optei por deixar 6 imagens de destaque dos últimos posts, o que consome cerca de mais 30k. É uma escolha minha. Tratei essas imagens e otimizei-as pra dar uma graça a mais pro blog.

As imagens geradas são um sprite, de uma forma bem legal que aprendi usando o Compass, você pode conferir como fiz no fonte no Github. Outros ícones no site, como os ícones das redes sociais no bottom são css.

Duas coisas importantes que tentei foi manter nota maior que 90 no Google Page Speed e A no YSLOW. Tem coisas ainda pra otimizar, mas pro tempo que gastei no blog estou satisfeito. O resultado no Google page speed por exemplo é: The page Anderson Leite | Blog got an overall PageSpeed Score of 96 (out of 100).

Próximos passos
Tem bastante coisa no blog que ainda pode ser otimizada, bastante coisa de responsive que ainda pode ser aplicada, como imagens e textos que se adaptam, não usar display none pra esconder as imagens no mobile, etc, e essa é uma coisa bem legal de blogar com Jekyll, você tem o controle e pode testar um monte de coisas pra ir melhorando o projeto.
comments powered by Disqus