Lucchesi
topo

Como criar um blog grátis no GitHub usando o Jekyll #2

É hora de dar seus primeiros passos com o Jekyll.

Meu objetivo aqui é que você entenda o funcionamento básico do Jekyll e aprenda como integrá-lo a outras tecnologias para criar um blog profissional de forma gratuita.

Lembrando que este artigo é o segundo de uma série de três artigos.

Se você caiu aqui de paraquedas, leia antes a primeira parte.

Configurando o ambiente

Para os usuários de macOS ou GNU/Linux instalar o Jekyll é bem fácil.

Mas se você usa Windows, agora é uma ótima hora para, quem sabe, experimentar o Ubuntu…

Tem sempre umas artimanhas pro Windows, mas nada oficial.

Enfim, certique-se de ter o Ruby e o RubyGems instalados e execute no terminal:

gem install jekyll bundler

Criando a estrutura básica do blog

Clone o repositório que criamos na primeira parte:

cd <some dir>/
git clone https://github.com/<username>/<username>.github.io.git

Dentro da pasta do projeto, crie a estrutura básica do blog:

cd <some dir>/<username>.github.io/
jekyll new .

O comando acima usa um template minimalista padrão para gerar os arquivos.

Confira aí na sua máquina se você vê uma estrutura parecida com a minha:

χ alexandrelucchesi.github.io tree
.
├── about.md
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
└── _posts
    └── 2016-11-13-welcome-to-jekyll.markdown

1 directory, 6 files

O Jekyll usa várias convenções para facilitar a criação de posts e deixar o seu site mais organizado.

Abra os arquivos gerados e dê uma olhada no que tem neles. Não se preocupe se não entender alguma coisa.

Rodando o site localmente

Para rodar seu site é muito simples. Basta digitar:

bundle exec jekyll serve

Agora é só acessar o endereço http://localhost:4000 e…

Voilà! Temos um site!

Simples… Mas um site.

Observe que uma nova pasta chamada _site foi criada no diretório do projeto. Lembra quando eu expliquei lá no início que o Jekyll processa os nossos arquivos e gera um conjunto de páginas estáticas que compõem, efetivamente, o nosso site?

Então, é na pasta _site que esses arquivos ficam armazenados!

Faça um pequeno teste: interrompa o processo Jekyll (apertando Ctrl-C), remova a pasta _site e reexecute o comando para servir a aplicação.

Viu como essa pasta é gerada de novo?

Agora com o processo Jekyll executando, edite alguma coisa nos arquivos about.md e no post de exemplo (que está dentro da pasta _posts).

Perceba que uma nova versão desses arquivos é gerada automaticamente assim que eles são salvos e que basta atualizar o navegador para visualizar as alterações (sem a necessidade de reiniciar o servidor).

Esse mecanismo de hot-deploy agiliza bastante o desenvolvimento e a escrita de posts, mas ele não funciona para o arquivo _config.yml.

Experimente você mesmo… Modifique o _config.yml e você perceberá que é necessário reexecutar o processo Jekyll (não precisa excluir a pasta _site; aquilo foi só um teste) para que as modificações tenham efeito.

O arquivo _config.yml armazena configurações globais da aplicação e é alterado apenas esporadicamente. Assim, ter que reiniciar o servidor não é tão problemático nesse caso.

Instalando um novo tema

À princípio, nós podemos usar qualquer tema que seja compatível com o Jekyll 3.x.

Antes que você me pergunte qual é o melhor site para encontrar temas gratuitos para o Jekyll, aqui vai a resposta: o Google.

Para este tutorial, eu escolhi o Lanyon.

Para usá-lo basta clonar o repositório diretamente no seu projeto (sugiro que você remova todos os arquivos antigos antes) e editar os arquivos como nós fizemos anteriormente.

Uma opção mais prática é criar direto um fork do repositório do tema escolhido (claro, se o código estiver no GitHub), renomeá-lo para <username>.github.io e fazer as adaptações necessárias (adicionar um Gemfile, etc).

Escrevendo seu primeiro post

Você já deve ter sacado que os posts ficam na pasta _posts, né?

A única coisa que você precisa fazer para criar seus próprios posts é criar os arquivos na pasta _posts seguindo a convenção de nomes do Jekyll: YYYY-MM-dd-<nome do post>.<ext>..

A primeira parte — YYYY-MM-dd — é a data de publicação de post. O <nome do post> deve ser igual ao título do seu post em letra minúscula e separado por traços. Já <ext> é a extensão do arquivo, que pode ser md, html ou textile.

Além disso, é preciso ficar atento ao front matter, que é aquele cabeçalho separado por 3 tracinhos (---) que tem no início dos arquivos.

Dentre outras, o front matter serve para indicar para o Jekyll que aquele arquivo deve ser processado. Por exemplo, se você escrever um post usando Markdown (.md) e não adicionar um front matter (mesmo que vazio) o Jekyll não gerará o HTML.

Na verdade, o jeito mais fácil de criar um post é duplicar algum post já existente, alterar o conteúdo e fazer commit/push para o GitHub.

Por baixo dos panos, o GitHub Pages faz o build do seu site e, se nenhum erro ocorrer, o conteúdo que seria gerado na pasta _sites (em um build local) é servido através da URL <username>.github.io. Note que não é necessário versionar a pasta _sites.

É importante saber que todos os artigos na pasta _posts são publicados assim que você sobe o código para o GitHub. Então, se o seu post estiver incompleto ou você quiser publicá-lo em outro momento, a dica é adicionar a variável draft: true no front matter ou criar o post diretamente no diretório _drafts.

Como os posts na pasta _drafts ainda estão em desenvolvimento, eles não tem uma data de publicação, e o nome do arquivo deve seguir o formato <nome do post>.<ext>. Execute o Jekyll com o comando bundle exec jekyll serve --drafts para visualizar os posts localmente.

Eu recomendo que você crie todos os seus posts na pasta _drafts.

Somente quando eles estiverem 100% revisados e prontos para serem publicados é que você deve movê-los para a pasta _posts com o comando git mv. Dessa forma, você pode manter o seu conteúdo versionado e manter o seu blog mais organizado.

Pronto! Agora você já pode ir para a terceira e última parte do tutorial.