Todo mundo sabe que programadores de verdade escrevem seus posts em Markdown, versionam todo o conteúdo usando o Git e, claro, hospedam seus blogs no próprio GitHub, certo?

Brincadeiras à parte, neste artigo eu ensino como você pode criar gratuitamente um site ou blog profissional, como este que você está lendo, usando o Jekyll, o GitHub Pages e a CloudFlare.

Continue lendo e você aprenderá a:

  • Criar um site ou blog usando o Jekyll e o GitHub Pages
  • Acessá-lo através de um domínio personalizado como meublog.com.br
  • Torná-lo mais seguro habilitando o HTTPS com a CloudFlare

Então, se você é do time que já fica com preguiça só de imaginar toda aquela trabalheira para instalar, configurar e caçar todos os plugins necessários para o Wordpress, pegue sua xícara de café e senta a bunda na cadeira porque este artigo é pra você!

Vá Direto ao Assunto…

Uma Breve História sobre a Web

No princípio era a Web. E a Web era HTML.

Mas tudo era meio parado; um pouco estático demais, eu diria.

Faltava dinamicidade (pelo menos era o que pensavam).

Daí inventaram coisas como o PHP e, de repente, usando um servidor Web para gerar dinamicamente as páginas para cada request, foi possível ver um “Olá, Alexandre!” ao entrar nos sites.

Já pensou entrar num site e ver uma mensagem de boas vindas em seu nome? Ou perguntar qual é o seu IP e o sistema responder? E poder comentar as notícias nos sites de fofoca?

A Web dinâmica foi uma verdadeira revolução. Novas possibilidades surgiram, como blogs, lojas virtuais, webmails e a maior parte do que encontramos hoje na Internet.

Mas você já deve ter ouvido falar que a história se repete, né?

Pois é! O que já foi a melhor opção em tempos passados frequentemente volta a ser a melhor opção em tempos presentes/futuros, e na computação não poderia ser diferente.

Acontece que surgiram novas formas (mais portáveis e escaláveis) de se adicionar dinamicidade às aplicações Web que não envolvem a montagem das páginas no servidor…

Agora nós vivemos a era da Arquitetura Orientada a Serviços. Coisas como REST(ful) Web Services, JSON e Javascript/AJAX nunca estiveram tão na moda. Além disso, integrar diferentes serviços ao seu site nunca esteve tão fácil.

Pode ter certeza que já existe um serviço para praticamente toda funcionalidade que você vislumbrar colocar em seu site:

  • Quer uma seção de comentários? Use o Disqus ou o Facebook Comments.
  • Quer autenticação e autorização? Com o Auth0 o login já está pronto.
  • Quer um formulário de contato? Dê uma olhadinha no Formspree
  • Quer estatísticas de uso do seu site? O Google Analytics é o mais famoso.
  • Quer um campo de busca? O lunr.js é o caminho mais simples!

A grande vantagem desse tipo de solução é que você ganha não só em produtividade, mas também em robustez:

  • Você aumenta a produtividade porque a maioria (senão todas) essas funcionalidades podem ser implementadas apenas inserindo fragmentos de código prontos nas suas páginas estáticas.
  • Você aumenta a robustez porque você se isenta da responsabilidade de implementar funcionalidades complexas/críticas delegando-as para empresas especializadas.

Ah, tudo isso sem contar que a grande maioria desses serviços contemplam planos gratuitos extremamente razoáveis, que com certeza atenderão as suas necessidades em um primeiro momento.

Bom, espero que você tenha se convencido de que não é mais necessário gastar tempo e dinheiro usando o modelo antigo (Apache + MySQL + PHP ou similar) para ter um site ou blog completo.

No restante deste artigo você entenderá as tecnologias de base que nós usamos para construir de graça o site e o blog da Mavins.

Jekyll, GitHub Pages e CloudFlare

Antes de colocarmos a mão na massa, vamos entender rapidamente o que é cada uma dessas tecnologias e como elas se relacionam.

O Jekyll é um gerador estático de sites com recursos especiais para a criação de blogs. Ele processa um amontoado de arquivos em diferentes formatos: como Markdown ou HTML — e gera um conjunto de páginas estáticas, prontas para serem hospedadas em qualquer servidor com overhead praticamente zero.

O GitHub Pages é um serviço de hospedagem compatível com o Jekyll, projetado para hospedar sites estáticos diretamente de um repositório GitHub. Isso significa que você pode desenvolver o seu site ou blog usando o Jekyll e hospedá-lo gratuitamente nos servidores do GitHub!

A CloudFlare é uma empresa que provê diversos serviços úteis para quem tem um domínio personalizado e quer hospedar o site no GitHub Pages. Ela oferece um plano grátis que conta com um certificado SSL e tudo o que você precisa para habilitar o HTTPS no seu site.

Resumindo:

  1. Nós desenvolvemos o site com o Jekyll
  2. Hospedamos no GitHub Pages
  3. Usamos a CloudFlare para o HTTPS (se tivermos um domínio próprio)

Configurando o Repositório no GitHub

Hora da ação! :sunglasses::metal:

A primeira coisa que precisamos fazer é configurar um repositório no GitHub para armazenar o site.

O GitHub Pages possibilita a criação de sites associados a usuários (páginas ou blogs pessoais), organizações (sites institucionais) ou projetos (documentação de APIs, manuais, etc).

Usaremos como exemplo a criação de um blog pessoal, mas não se preocupe, os conceitos são os mesmos nos 3 casos!

E claro, você já sabe disso, mas se tiver qualquer problema na hora de criar o seu blog, é só deixar nos comentários que eu farei o possível para ajudá-lo! :wink:

Criando o Repositório

Você já tem uma conta no GitHub, né? Se não, já corre lá e crie uma…

Agora é só criar um novo repositório chamado <username>.github.io, onde <username> é o seu nome de usuário no GitHub.

É fundamental que a primeira parte do nome do repositório seja exatamente igual ao seu nome de usuário, caso contrário, não funcionará.

Clique em “Settings” e dê uma olhada na seção “GitHub Pages”. Você deve ver algo parecido com isso:

Configurações do repositório no GitHub

Neste tutorial nós usaremos a branch master para publicar o site e nós não usaremos o “Theme chooser”. Não se preocupe, porque lá na frente eu explico como instalar um template para melhorar a aparência do seu site. Nós veremos também como forçar o HTTPS mesmo com um domínio personalizado, e as razões pelas quais você deve fazer isso.

Construindo a Página Inicial

Antes de partirmos para o Jekyll, vamos fazer um pequeno teste…

Comece criando um arquivo chamado index.html na raiz do repositório. Em seguida, adicione algum conteúdo de teste, como a famosa string “Hello world!”.

E aqui vai uma dica: você pode criar esse arquivo pela própria interface do GitHub! Basta acessar a URL https://github.com/<username>/<username>.github.io e clicar no botão “Create new file”.

Outra opção, mais expert, é clonar o repositório e criar o arquivo localmente:

1
2
3
git clone https://github.com/<username>/<username>.github.io
cd <username>.github.io
echo "Hello world!" > index.html

Nós precisaremos dessa opção mais pra frente, então, lembre-se dela!

Não se preocupe caso você tenha pouca familiaridade com o Git. Para usar efetivamente a plataforma que estamos construindo, você precisará aprender apenas 5 comandos: clone, add, commit, push e pull.

Nós usaremos esses comandos extensivamente, então, se você não souber ou não se lembrar deles, aproveite para dar uma revisada antes de continuar.

Lembre-se também que, se surgir alguma dúvida, é só deixar nos comentários!

Publicando a Nova Página

Agora é a hora da verdade… Hora de checar se está tudo certo com o nosso repositório!

Tudo o que temos que fazer para colocar nossa página no ar é salvar as modificações no GitHub.

Se você estiver criando o arquivo pelo botão “Create new file”, basta adicionar uma mensagem de commit e clicar no botão “Commit new file”.

Para os experts, é só subir as modificações para o GitHub:

1
2
3
git add --all
git commit -m "Initial commit"
git push -u origin master

Pronto!! :sunglasses::metal:

Acesse o endereço http://<username>.github.io e veja sua linda página inicial.

Simples, não?

É exatamente isso que faremos para criar a estrutura do blog e publicar conteúdo novo: colocaremos nossos arquivos na branch master e deixaremos o GitHub tomar conta do resto!

E olha que interessante: se você só precisar de um site estático padrão (contendo apenas arquivos HTML, CSS ou Javascript), sem recursos de templating ou blogging, e caso você não tenha um domínio personalizado, você pode parar de ler o artigo por aqui. Essa situação é comum, por exemplo, para quem quer criar uma página de documentação de algum projeto, um site institucional ou uma landing page qualquer.

Caso contrário, continue lendo que a diversão apenas começou…

Primeiros Passos com o Jekyll

Finalmente chegamos ao Jekyll!

Tenha em mente que o Jekyll é uma ferramenta bastante poderosa, com uma imensa quantidade de recursos, cujo detalhamento foge do escopo deste artigo.

Meu objetivo aqui é simples:

  • Dar um pontapé inicial para você compreender o funcionamento básico do Jekyll
  • Ensiná-lo como integrar o Jekyll com outras tecnologias gratuitas para criar um site ou blog de altíssimo nível

Pronto pra isso? Então vamos em frente…

Configurando o Ambiente

Para os usuários de Mac ou GNU/Linux instalar o Jekyll é bem fácil. Por outro lado, se você usa Windows, agora é uma ótima hora para, quem sabe, experimentar o Ubuntu… Que tal?

Tô brincando! :grin:

Embora o Jekyll não suporte oficialmente o Windows, sempre tem umas artimanhas

Eu, pessoalmente, não testei no Windows.

Mas se você for um dos aventureiros que decidir testar, deixe um comentário dizendo como foi a instalação, se houve algum problema, etc.

Para o restante do pessoal, certifiquem-se de ter instalado o Ruby (incluindo os cabeçalhos de desenvolvimento v2 ou acima) e o RubyGems (dica: use o Homebrew no Mac).

Com os pré-requisitos instalados, é só abrir o terminal e executar:

1
gem install jekyll bundler

O comando acima deve ter instalado o Jekyll versão 3.x (verifique com o comando jekyll -v). Se estiver tudo certo, vamos à criação da estrutura básica do blog.

Criando a Estrutura Básica do Blog

Comece clonando o repositório (caso ainda não tenha feito):

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

O jeito mais fácil de criar a estrutura básica do blog é usar algum template como ponto de partida (já já eu explico). Por agora, usaremos o comando jekyll new para criar tudo com apenas um comando:

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

O comando jekyll new . gera no diretório corrente os arquivos que formam a estrutura básica do blog usando um template minimalista padrão.

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

1
2
3
4
5
6
7
8
9
10
11
lucch: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. Nesse ponto, eu recomendo que você abra os arquivos gerados e dê uma olhada rapidamente no que tem dentro deles. Não se preocupe em entender tudo; isso é apenas para você se familiarizar com a ferramenta.

Servindo o Site Localmente

Para servir o seu site é muito simples. Basta digitar:

1
$ 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

Eu não sei se você percebeu, mas nós temos um pequeno probleminha com o nosso site…

O problema é que esse template padrão, além de não oferecer quase nada, ainda é HOR-RO-RO-SO! :confounded: :confounded: :confounded:

Aposto que quando você rodou a aplicação bateu àquela vontade de voltar correndo pro Wordpress (eu mesmo tive vontade de morrer)…

Mas calma!! Com um pouco de fé e um comando a gente conserta isso:

1
rm -rf <some dir>/<username>.github.io/*

Problema resolvido! :grin: :v:

Você pode achar que é brincadeira, mas é sério. Se tem uma coisa que me desanima é mexer com coisa feia, mesmo em tutoriais “Hello, world!” como esse.

Então, antes de nós criarmos o nosso primeiro post, vamos instalar um tema decente? :sunglasses:

À 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 (pior que é sério, pode clicar no link :joy:).

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 para quem já manja de Git é 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).

E aí, conseguiu?!

Escrevendo o seu Primeiro Post

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

Assim, a única coisa que você precisa fazer para criar os 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 seu conteúdo e fazer o commit seguido do 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 perceber 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, pessoalmente, 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.

Usando um Domínio Personalizado

Você tem um domínio que gostaria de usar? Algo como mavins.com.br?

Chegamos à única parte do tutorial que não é grátis, mas não se preocupe porque ela é opcional. Muito recomendada, mas opcional.

Os valores foram reajustados esse ano, mas você consegue comprar um domínio .com.br no Registro.br por apenas R$40,00. Para este artigo, eu comprei o domínio alexandrelucchesi.com na Hostgator por R$44,99 (.com é um pouco mais caro e não, não estamos ganhando pela propaganda :moneybag: :-1:).

É fácil encontrar na Internet um monte de benefícios de usar um domínio próprio para o seu site. Aqui eu vou deixar apenas a seguinte reflexão para a sua vida:

Tenha domínio próprio! :ok_hand: :-1: :punch: :joy: :clap:

carlos-alberto-praca

Configurando o Repositório no GitHub

Abra as configurações do seu repositório clicando em “Settings”, inclua o seu domínio e clique em “Save”:

Configurando um domínio personalizado no GitHub Pages

Observe que ocorreu uma mudança não apenas no domínio, mas também no protocolo, que passou de HTTP para HTTPS. o checkbox que força o HTTPS foi automaticamente desabilitado, e a URL que antes era https://alexandrelucchesi.github.io agora é http://alexandrelucchesi.com.

Embora o uso de domínios personalizados seja possível, o GitHub Pages ainda não suporta nativamente o uso do HTTPS nesse caso, somente HTTP. O HTTPS é extremamente importante por diversos motivos e essa falta de suporte é uma deficiência do Github Pages.

Felizmente existe a CloudFlare, que nos faz um grande favor oferecendo um plano gratuito que tem tudo o que a gente precisa para habilitar o HTTPS em um site hospedado no GitHub com domínio personalizado.

OBS: Nada justifica usar somente HTTP hoje em dia. Com apenas alguns cliques aqui e ali é possível deixar o seu site ou blog em conformidade com os padrões de segurança recomendados.

Configurando o seu Domínio na CloudFlare

Se você ainda não criou uma conta na CloudFlare, clique aqui, selecione o plano “Free” e siga as seguintes instruções.

Com a conta criada, logo na primeira tela, insira o seu domínio (ex: alexandrelucchesi.com e aguarde o processamento. Em seguida, certifique-se de que os registros <seu site>.com.br e www.<seu site>.com.br estão conforme a figura abaixo e que a nuvem do lado está laranja.

Inserindo o domínio na CloudFlare

IMPORTANTE: Se você usar um domínio que já tenha sido previamente configurado com algum servidor, podem haver outros tipos de registros (MX, TXT, etc). Nesse caso, altere somente os dois registros acima.

Então, selecione o plano “Free” e, na tela seguinte, anote os nameservers da CloudFlare.

Atualizando os nameservers no provedor de DNS

Por fim, acesse o seu provedor de DNS (ex.: Registro.br, Hostgator, GoDaddy, etc) e altere os nameservers do seu domínio para apontarem para os servidores da CloudFlare.

OBS: Pode levar algum tempo (horas ou dias) para que as mudanças de nameserver tenham efeito.

Criando as Regras de Página na CloudFlare

Clique em “Crypto” no menu superior no seu painel CloudFlare e certifique-se de que a opção “Full” (mas não “Full (strict)”) esteja selecionada na seção SSL:

Configurando o SSL na CloudFlare

Essa opção garante que o HTTPS será usado tanto na comunicação entre o cliente e a CloudFlare quanto na comunicação entre a CloudFlare e o GitHub.

Agora só precisamos garantir que todo o tráfego use o protocolo HTTPS. Para isso, vá até “Page Rules” (no menu superior), clique em “Create Page Rule” e crie a seguinte regra:

Criando uma "Page Rule" para forçar o HTTPS

Prontinho! \o/

Assim que a atualização dos nameservers for concluída, você deverá ver no seu navegador a URL https://<seu site>.com.br/* ao acessar o seu site usando qualquer um dos seguintes endereços:

Conclusão

O uso combinado do Jekyll, GitHub Pages e CloudFlare permite a construção de sites leves a um custo zero.

A possibilidade de produzir conteúdo usando uma linguagem intuitiva como o Markdown e publicar tudo com um simples commit torna o Jekyll uma plataforma de blogging bastante atrativa para usuários que procuram uma solução barata, minimalista e eficiente para a produção de conteúdo.

Todo o conteúdo fica versionado em um repositório no GitHub (um mecanismo de backup bastante eficiente) e o ecossistema de desenvolvimento conta com diversos plugins, temas, extensões e documentação abrangente.

Apesar dos benefícios do Jekyll, sistemas de blogging mais tradicionais (e populares) como o Wordpress ou o Medium não devem ser descartados. Esses sistemas permitem a criação de blogs com apenas alguns cliques e contemplam ambientes bastante sofisticados para a criação, publicação e compartilhamento de posts.

Além disso, nem tudo são flores no Github Pages: como a maior parte das coisas que são grátis, existem limites de uso. Para mitigar esse problema, pode-se usar os mecanismos de caching disponíveis no plano gratuito da CloudFlare para diminuir o consumo de banda nos servidores do GitHub ou migrar para outro serviço de hospedagem (ex.: Amazon S3, DigitalOcean, etc).

Outra desvantagem do GitHub Pages é que, por questões de segurança, nem todos os plugins do Jekyll são suportados (veja a lista completa aqui). Para contornar esse problema e instalar plugins como o excelente jekyll-seo-tag, pode-se fazer o build do site localmente e subir para o Github Pages apenas os arquivos gerados na pasta _site. Nesse caso, a estrutura do Jekyll deve ser versionada em outro repositório.

Apesar dos apesares, nós aqui na Mavins gostamos sempre de explorar novas opções, experimentar “tecnologias exóticas” e aprender muito durante todo o processo.

Se você também é desses, então o Jekyll é uma excelente opção de algo útil para se aprender. Talvez você até tome gosto pela coisa e decida compartilhar também as suas próprias experiências em um blog…

Já pensou?!

Bom, foi assim que a gente começou…

E se você aprendeu algo novo ou se esse post foi útil para você de alguma forma, não se esqueça de deixar o seu comentário. Isso é muito importante pra gente! :wink::+1:

Comentários desabilitados...