Fala povo bonito! Como havia dito antes, falarei um pouco sobre a estrutura deste blog. Atualmente, ele está hospedado na Amazon e uso Jekyll para gerar páginas estáticas. Vamos lá!
O que é um blog estático?
Um blog estático é basicamente HTML, CSS e JS. É considerado uma página estática aquelas páginas que não dependem de linguagens backend e banco de dados. Já uma página dinâmica geralmente é gerada com informações disponíveis em um banco de dados, o famoso Wordpress trabalha desta maneira. Cria-se layouts com HTML/CSS/JS, por exemplo, e manipula-os com PHP e MySQL. Quando você cria uma página ou um post no Wordpress, ele armazena essas informações no MySQL e o PHP faz o trabalho por você, selecionando, gravando e apresentando esse conteúdo. Já em um site estático, não há bancos de dados e linguagens backend, o HTML é gerado sem consultas à bancos sem gerenciamento por trás.
Prós
- Velocidade: é simples, sem consultas SQL, sem chamadas longas e sem configurações de permissões e afins. Desta forma, seu blog é apresentado mais rápido ao seu leitor, serão pouquíssimas requisições.
- Segurança: Se não há banco de dados e você armazena no Github ou em um bucket no AWS S3, não precisa se preocupar com configurações de segurança no servidor, ou seja, sem se preocupar com vulnerabilidade de plugins externos, nada de SQL Injection.
- Mais conhecimento: Você vai aprender mais. É inevitável. Vai precisar aprender, mas isso nunca é ruim.
Contras
- Complexo para iniciantes: exige um maior conhecimento técnico. Não há um CMS completo como o Wordpress para isso. Você vai precisar de um cliente FTP ou fazer upload via browser sempre que quiser fazer um novo post.
Jekyll
Para gerenciar e automatizar tudo isso, utilizo um software chamado Jekyll. Eu poderia explicar o que é Jekyll, mas quem melhor para falar o que é Jekyll do que os caras que o desenvolveram, não é mesmo? Esta é a definição segundo o github do projeto.
"Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories."
Em uma tradução podre:
"Jekyll é um gerador de páginas estáticas simples para sites pessoais, projeto ou organização. Pense nisso como um CMS baseado em arquivo, sem toda a complexidade. Jekyll pega o seu conteúdo em Markdown, e templates Liquid, e cospe um site estático completo, pronto para rodar no Apache, Nginx ou outro servidor web. Jekyll é o motor por trás do GitHub Pages, que você pode usar para hospedar sites direto de seus repositórios no GitHub."
Pode parecer muito complexo inicialmente, mas depois de utilizar você percebe o quão simples é trabalhar com Jekyll. Não vou explicar detalhadamente porque acredito que já há muito material bom na internet como este do Diego Elis no Tabeless e este do Victor Martins.
Para ter o Jekyll funcionando em sua máquina você vai precisar:
- Ruby
- RubyGems
- Linux, Mac OS X ou qualquer outro sistema baseado em Unix
- NodeJS
Depois basta instalar o Jekyll com o comando:
gem install jekyll
Você pode encontrar muitos templates no Jekyll Themes. Escolha um, acesse o diretório do tema pelo terminal e execute:
jekyll serve
Pronto! Já tem um static website rodando em seu computador.
Agora vou falar sobre a hospedagem na Amazon Web Services. Mas antes uma palavrinha dos nossos patrocinadores:
Host
Enfim, o host. Diferentemente dos host para os CMS mais famosos, como Wordpress e Joomla, é difícil encontrar host para sites estáticos. Não porque você não pode hospedar em hosts como Locaweb, King Host e afins. Na verdade, esses caras são too much para sites estáticos. Você estará pagando por recursos que não precisa. Para isso, você pode usar seu Dropbox, Github Pages ou criar um bucket na Amazon S3. Como eu já estava utilizando a AWS para estudos, resolvi hospedar meus sites em buckets na AWS S3. Lá eu posso gerenciar meus domínios usando o Route 53. Amazon tem uma excelente documentação com passo a passo bem aqui.
Resumindo:
- Você vai criar um bucket no S3 com o nome do domínio que já deve ter comprado.
- Configurar como Static Website.
- Configurar as permissões.
- No Route 53 você vai pegar os dados de DNS.
- Configurar esses dados no seu gerenciador de domínio.
Blogando
Se você prestou atenção na descrição do que é Jekyll, percebeu que fala de Markdown. What the porra is this?
Markdown é uma linguagem de marcação que propõe um maior foco na escrita. A idéia é que você esqueça o visual do texto e se preocupe mais com o conteúdo. Desta forma, você vai basicamente escrever em um editor de textos (pode ser seu Sublime Text ou Atom, por exemplo) com extensão .MD ou .Markdown. Se você usa Github já deve saber como utilizar. É bem simplista.
O Jekyll converte os arquivos Markdown em HTML, logo, eu escrevo meus posts em Markdown. Este post estou escrevendo no Atom, como podem ver na imagem abaixo:
Depois de ter escrito, salvo na pasta _posts e solicito que o Jekyll transforme isso em HTML e me mostre no navegador com o comando abaixo:
jekyll serve
Depois ele habilita na porta 4000 no meu localhost. Ou seja, http://127.0.0.1:4000
O legal disso tudo, é que como ele irá converter o Markdown em HTML, você pode usar elementos HTML. Utilizo, por exemplo, para chamar classes CSS.
Enfim, se estiver tudo ok, é hora de subir isso no meu bucket na Amazon. Para isso, você pode usar um cliente FTP, como o CyberDuck ou FileZilla, pode usar seu navegador acessando o dashboard da AWS ou pode fazer tudo da linha de comando como gente grande. 😜 Eu uso a última opção, muito mais simples. Para isso você vai precisar das seguintes coisas:
- Ter o Java e Python instalados;
- Instalar o AWS Cli;
- E instalar o s3_website;
Não preciso explicar como instala o Java, né? Se você usa algum serviço e banco no seu computador ou já fez declaração de imposto de renda você tem instalado. Se você usa Linux ou Mac (eu espero que seja este o caso) já possui o Python instalado. Depois, baixe o AWS Cli e instale-o. Aqui você vai encontrar as instruções. Vá até o repositório do s3_website e instale-o seguindo o README.md. Se seguir as instruções do README não terá problemas. Depois, configure seu arquivo s3_website.yml com suas chaves da Amazon e a região em que criou o bucket. Para isso, crie-o com o comando:
s3_website cfg create
Seu arquivo deve se parecer com isso:
Depois, aplique as configurações com o comando:
s3_website cfg apply
Você já pode fazer o upload com o comando:
s3_website push
Se der tudo certo ele irá fazer o upload de seu website no AWS S3.
É trabalhoso na primeira vez, mas depois você vai apenas gerar as páginas estáticas com jekyll serve e o upload com s3_website push.
Bônus
Sabemos que um blog precisa de mais do que o texto. Um bom blog tem que permitir comentários e talvez um formulário de contato. Para isso, também podemos contar com serviços web que facilitam nossa vida.
Disqus
Disqus é um serviço de comentários para sites e é muito fácil acrescentar ao seu blog. É só se registrar e copiar o código que ele irá gerar. Feito isso, acrescente ao seu layout e pronto. Aqui você encontra uma maneira mais inteligente de instalar.
Formspree
Formspree é um serviço que permite criar formulários sem a necessidade de ter um banco de dados ou serviço de email no seu servidor. Basta direcionar a action do ser elemento form para http://formspree.io/seuemail@dominio.com</
Vai ter algo como:
<form action="//formspree.io/seuemail@dominio.com" method="POST">
<input type="text" name="name" />
<input type="email" name="_replyto" />
<input type="submit" value="Send" />
</form>
Feito isso, ele vai pedir para você confirmar seu email e pronto! Formulário funcionando. O legal é que você pode personalizar a confirmação de envio, colocar um subject e campos ocultos para gerenciar os emails recebidos.
Plugins
Você vai encontrar diversos plugins para Jekyll. Geralmente a instalação deles é muito simples, baixando um arquivo Ruby (arquivo.rb) e fazer as configurações que cada plugin solicita. É tão ou mais fácil que com o Wordpress.
Outros usos
Além de ter meu blog e outros sites desenvolvidos desta forma, também utilizo Jekyll para apresentar projetos a clientes. Em todos os casos ainda acabo convertendo esses site para Wordpress, mas ainda assim, no desenvolvimento é a maneira que melhor se encaixa no meu perfil. Acredito que é melhor que criar uma nova instância Wordpress e ficar gastando tempo em configuração para cada instância criada. Mesmo que não entregue um site em Wordpress (já precisei criar HTML/CSS para outras plataformas), crio apenas um rodapé, um cabeçalho e vou fazendo as chamadas de acordo com as necessidades. Sem ficar copiando e colando blocos de códigos (Don’t Repeat Yourself).
Conclusão
É outra forma de trabalhar/ver as coisas. Pode não ser o melhor para você, mas se trabalha com desenvolvimento web vale a pena conferirir e fazer um teste.
Dúvidas? Sugestões? Comenta aí!
Até a próxima! []s