Criando um blog estático com Jekyll

[z0pe 8]

Estou utilizando o jekyll para criar meu blog acadêmico(ainda em construção por falta de tempo), veja-o

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Não vou ficar entrando em uma discussão sobre porquê utilizar jekyll e não wordpress, procurem no todo poderoso google.

 

Mas deixando aqui minhas considerações e porquê escolhi o jekyll para criar meu blog acadêmico:

1 - Fácil entendimento de código. (Quem veio da plataforma Ghost Blog vai se apaixonar pelo jekyll)

2 - Fácil criação de código, indo desde de Markdown, Liquid até o simples HTML

3 - Organização. Pode até parecer que por ser um gerador de site estático o código fica desorganizado. Mas não.

4 - HOSPEDAGEM DE GRAÇA NO GITHUB :amor:

 

Para mais informações, acessem o site do jekyll

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Vamos lá.

Programas necessários:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Linux, Unix ou Mac OS

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

(Por conta do suporte ao CoffeeScript

 

Instalando Ruby(Linux)

 

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

 

 

 

Instalando RubyGems(Linux)

 

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

 

Instalando NodeJS(Linux)

 

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

 

Instalando JEKYLL(Linux)

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Agora que você já dedicou horas da sua vida pra instalar as coisas necessárias, vamos a parte mais divertida: Criar um site

 

Quem já usou Rails aqui sabe do tesão que é usar Rails new qualquernome

Pois bem, o jekyll também fornece essa fácil criação de um novo projeto, vamos usar o comando Jekyll new

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Vamos rodar nossa aplicação? SIM, CAPITÃO

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

A saída deve ser essa:

 

 

Vamos acessar o nosso localhost com a porta 4000 e ver o que o jekyll gerou? SIM, CAPITÃO

 

 

Perceba que, por padrão, o jekyll já gera uma página padrão e um post (Welcome to Jekyll)

Capitão, onde eu altero esse arquivo padrão?

Primeiro vamos entender a estrutura dos arquivos do jekyll

 

 

Onde _includes reúne todos os arquivos que poderão ser inclusos depois(explicação mais para baixo)

 

_layouts reúne todos os arquivos que servirão como os padrões de cada página.

 

A pasta _site é onde fica todo o código gerado pelo jekyll.

 

Vamos entender os includes e os layouts? SIM, CAPITÃO

 

Abrindo o arquivo default.html da pasta _layout temos o seguinte código:

 

Perceba que o layout default.html faz 3 usos da função {{ include }}

Essa função é responsável por juntar o código de um arquivo da pasta _include.

O que facilita na hora de reutilizar código, sem precisar ficar escrevendo um monte de linhas o tempo todo.

 

Vamos abrir o arquivo index.html e ver o que há nele:

 

OPA, MARUJOS, percebam nas 3 primeiras linhas a chamada ao layout default(default.html). Se voltarmos a visualização vamos ver tudo que o default faz por padrão no nosso site.

 

Mas capitão, meu index.html não tem todos esses códigos que mostram na exibição do meu site, como isso acontece?

Lembra da declaração de qual layout usar? E que cada layout tem suas próprias includes? então, o layout transporta todos os códigos que suas includes tiverem, para que você possa reutilizar código. Veja uma representação melhor disso tudo:

 

 

E aqui uma outra forma de representar o que acontece:

 

Que tal agora deixar isso um pouco mais legal?

O título do tópico não mente, o que nós vamos criar aqui é um BLOG. Então vamos lá.

 

Se clicar no link para o post Welcome to Jekyll! no seu localhost, vai ver que ele te leva para uma postagem.

As postagens ficam na pasta _posts e aí que começa a parte complicada(nem tudo são flores).

Para criar um arquivo de postagem é necessário seguir alguns padrões para que o jekyll gere da maneira correta o seu post.

O arquivo deve ter o nome da seguinte maneira: ANO-MÊS-DIA-NOME-DA-POSTAGEM.EXTENSÃO

Ex: 2015-05-20-Esse-topico-ta-grande.markdown

 

Vamos criar um novo post? SIM, CAPITÃO

 

Crie um arquivo chamado 2015-08-17-Ola-Internet.markdown

 

Agora abra o seu localhost e veja que o jekyll já gerou o seu post

 

 

OOOOH, CAPITÃO, isso já criou uma nova postagem?

Não, ainda falta adicionar algum conteúdo ao arquivo do post

 

Vamos criar algo simples como exibir Olá, forum

 

 

Não entendeu o layout: post? Volta mais um pouco o tópico para entender.

 

Vamos ver o que o navegador vai renderizar? SIM, CAPITÃO

 

 

Vamos analisar o que aconteceu.

 

1 - O link da postagem é separado pela data. Ou sejase eu tiver mais de um arquivo com a data x, todos esses arquivos com a data x estarão da pasta que corresponde àquela data. Isso faz parte da organização do jekyll

 

2 - Você vai perceber que ele incluiu um título na página e uns links, isso tudo veio dos includes e layouts que já foram padronizados e que você pode alterar sempre que quiser.

 

3 - Renderizou também, o título da postagem, a data e o conteúdo. Tudo isso vem do layout post

 

4 - Ele criou todo um footer já definido na include footer.html

 

Reutilização de código! Hell yeah!

 

Mas então, capitão, sempre que eu quiser criar um novo post eu devo escrever o meu código(mesmo sendo pouca coisa)?

Infelizmente, meu jovem marujo, sim. Mas isso vai depender do seu nível de curiosidade. Sempre haverão soluções para seus problemas na internet. Como plugins para o jekyll que automatizam algumas tarefas, algum editor de texto avançado(como o da web cheats), etc..

 

 

Bom, marinheiros, acredito que eu tenha dado uma boa introdução ao jekyll e que com isso dá pra se ter uma noção do que se pode fazer com esse poderoso gerador de páginas estáticas.

Em algum post futuro eu falo um pouco mais sobre Liquid e como hospedar no github.

 

Utilizem da curiosidade para pesquisar a respeito da ferramenta, deem uma googlada.

[@rnxn 353]

O bom dele é a flexibilidade.

O problema é que, como a maioria dos usuários utilizam Windows... vão ter um certo trabalho para configurar e rodar o Jekyll. Mas nada que um pouco de paciência e o Sr. Google não resolvam.