A ideia de documentar o essencial à utilização de Jekyll para a criação de sites estáticos (sem base de dados), vem de vários vectores:

  • As dificuldades que senti no início da abordagem a este conceito;
  • A agilidade que trabalhar com Jekyll me permite;
  • As dificuldades que tenho encontrado na comunicação do conceito a outros designers.

A mente criativa treinada no contexto gráfico, terá mais facilidade de reconhecer e reutilizar padrões se estes se apresentarem visualmente e, as linguagens de formatação HTML e CSS, permitem estabelecer facilmente relações directas entre o que é escrito no código e o que é apresentado na página.

Mas é quando se torna necessário abstrair mais os conceitos que as dificuldades começam. Porque a relação entre o código e o resultado apresentado não é directa e é um pouco penoso pesquisar respostas quando estas assentam em pressupostos que desconhecemos ou não compreendemos bem.

Assim, o objectivo deste documento é ajudar a compreender alguns conceitos tidos como demasiado complexos por muitos criativos, desmistificar a utilização da linha de comandos a quem achava que nunca o iria conseguir (como eu!) e de uma maneira geral ajudar outros designers a utilizar Jekyll.

Porquê utilizar Jekyll

Um Web Designer que goste de codificar as soluções que desenha tem de lidar com todas as necessidades do projecto que, desde wireframes às maquetes funcionais, inclui uma panóplia de ferramentas para gerar todos os passos necessários à aprovação do layout, sendo que o mais comum é, uma vez o projecto aprovado, começar então o trabalho de escrever o markup e respectivo estilo.

Para reduzir o número de ferramentas necessárias e reaproveitar o trabalho de cada fase, comecei a construir wireframes e maquetes funcionais em HTML, de modo a que a passagem à fase seguinte assentasse no trabalho anterior.

Mas esta técnica incorria num outro problema: fazer alterações a elementos comuns a várias páginas (como o header, footer, etc) era simplesmente penoso e terreno fértil à ocorrência de erros.

Foi então que me apresentaram o Jekyll e a sua tecnologia mudou por completo a forma como trabalho: porque permite construir um site estático com total controle sobre o código compilado.

Também permite associar metadata às páginas de forma simples, ou seja, não preciso de uma base de dados para que a magia aconteça, e o sistema de templates e inclusão dos mesmos permite alterar apenas uma vez algo que se repete em todas as páginas.

E é aqui que a magia começa ;-)