Conheça o Jekyll

O que vc vai ver nesse post:

O que você vê num website é uma combinação de HTML (conteúdo do site), CSS (o estilo do site, cores, fontes, colunas, espaçamentos) e JavaScript (permite funções mais complexas como transições de páginas, ações de pedidos e respostas.).

Diferença entre site dinâmico e estático

Num site dinâmico no momento que você acessa uma página, o servidor onde ela está hospedada gera o conteúdo estático que você vai ver na tela e então gera os arquivos para a página. só ai o seu navegador vai baixar esses arquivos e exibí-la pra vc. aqui o que vc ve na tela e resultado da uniao de varios arquivos e dados que foram enviados separados para a internet e o servidor os juntou qnd vc acessou o site.

Quando visita um site estático você pula essa parte em que o servidor gera os arquivos. O website já foi construído antes de ser enviado para a internet e seu navegador pode imediatamente descarregar todo o conteúdo dele. Esses sites estáticos também são chamados de Jamstack. O que vc ve na tela é a mesma coisa que o webdev envio para ainternet.

Num site dinâmico você pede informações a base de dados do servidor e ele gera dinamicamente, no servidor, o conteúdo estático que você vê na tela. Assim ele precisa construir os ficheiros estáticos antes do seu navegador o descarregar.

Quando visita um site estático você pula essa parte. O website já foi construído quando antes de ser subido para a internet e seu navegador pode imediatamente descarregar todo o conteúdo do CDN. Esses sites estáticos também são chamados de Jamstack.

O que é Jamstack.

De cordo com definição no site oficial jamstack.org:

“Sites e aplicações rápidas e seguras entregues por pré-renderização de arquivos e servindo-os diretamente de um CDN, removendo a necessidade de gerenciar ou executar servidores web.”

O termo Jamstack vem de:

Javascript - qualquer programação com ciclo de pedido e resposta.
Api - funções server-side ou de terceiros, como botoes de pagamento e comentários.
Marcação - marcação de template que acontece durante a construção da página.

Mas não precisa ter todas as três funções, Javascript, API e Marcação, para ser Jamstack. Pode ser escrito em HTML puro ou usar um dos geradores existentes.

Porque usar Jamstack

O problema dos sites dinâmicos como o Wordpress é que eles dependem de base de dados para gerar o conteúdo. Isso o torna lento, caro de fazer e manter e mais provável de dar erros. Sites do tipo Jamstack são diferentes.

Melhor performance
Como não precisa se conectar com uma base de dados antes de criar todos os arquivos que o site precisa, um site estático pode ser ate 10 vezes mais rápido. Isso é bom para o ranqueamento e o leitor espera menos tempo pra poder ler seu site.

Confiável
Todo o site em CDNs. Significa que seu site existe em vários servidores em diferentes partes do mundo. Se um falhar o outro continua servindo seu site. Assim ele nunca fica offline.

Barato
Um site Jamstack pode ser hospedado em qualquer servidor, ele pode puxar dados de lugares diferentes, como imagens do seu flicker e dropbox.

Seguro
Como ele é hospedado no CDN já pronto, as áreas de possível ataque e de causas de erros são reduzidas.

Melhor para desenvolver
Flexibilidade. Não está preso a plugins disponíveis ou instáveis que precisam de atualizações constantes para se manterem funcionando. Seu sistema permite um desenvolvimento focado e torna mais fácil encontrar erros. E ainda existem varios Headless CMSs disponíveis.

O que é Jekyll

Jekyll é um gerador de sites estáticos. (SSG – Static Site Generator). Ele pega seus arquivos de template e seus arquivos de conteúdo e combina eles gerando seu site. É esse site gerado que será enviado para o CDNs. Assim você não tem que manualmente criar tudo do zero. E posts e páginas em Jekyll podem ser escritos facilmente em markdown. Um site feito em Jekyll pode ser hospedado até no github, dropbox e sem pagar nada.

Como o Jekyll funciona

Quando você o instala ele cria um site com uma estrutura pronta pra começar a usar. Se tudo o que você quer é escrever, está pronto.

Com Jekyll você pode:

Integrar seu site com seu github e ter um site no ar de graça. Escrever seus posts com markdown ou o editor do seu CMS se escolher usar um. Editar o estilo com o sass que já roda automaticamente nele, vem instalado. Ele converte seu .sass ou .scss para CSS sem você precisar fazer nada.

A estrutura:

O que é cada parte:

_config.yml

O dna do seu projeto. Onde estão as configurações do seu projeto como título, autor, url, paginação.

Index.html

A página inicial do seu projeto.

Sitemap.xml

Mapa do seu site com todos os links de páginas que ele possui. E útil para os buscadores.

Feed.xml

O feed do seu site mostra os seus posts e as datas que foram atualizados por último, assim alguém que assine o seu feed pode receber atualizações por e-mail automaticamente a cada nova atualização.

Readme.md

Neste arquivo você pode descrever seu projeto. Ele vai aparecer na página inicial do seu projeto no github e funciona como uma introdução sobre ele.

_includes

Digamos que tenha um CTA(Call To Action) que aparece em várias páginas do seu projeto. Você não precisar escrever todo o código dele em cada uma. Você deixa o código na pasta includes e em cada página coloca {% include cta.html %} onde da página quer que ele apareça. Prontinho.

_layouts

Aqui você define o layout das suas páginas, dos seus posts… Você pode usar um layout padrão para cada tipo de página e chamar ele através do front matter(um bloco de texto com definições) em cada página.

---
Layout: default
---
<div class="home">
_posts

Aqui ficam todos os seus posts. Ele precisam ser nomeados nessa maneira: yyyy-mm-dd-title.md

_drafts

Rascunhos dos seus posts. A nomeação é igual.

_sass

Jekyll suporta e já vem com SASS preprocessador integrado.

_site

Essa e a pasta que o Jekyll cria quando monta seu website. Aqui estarão apenas os arquivos compatíveis com os navegadores, .html, .css, .js, .xml… essa conversão o Jekyll faz automaticamente. Você não precisa fazer nada.

Assets

Onde ficam seus arquivos .js e .css, imagens…

Outras pastas

Você pode criar pastas conforme achar necessário. Eu gosto de criar uma pasta “/media” para armazenar as imagens. Ou você pode criar páginas e armazenar arquivos markowdn .md ou .html nelas que então serão páginas do seu site. Esses arquivos serão acessados em pela url http://seusite/projeto/arquivo.html que você pode mudar para http://seusite/projeto/arquivo usando permalinks no front matter.

---
Layout: default
Permalink: /about/
---

Porque escolhi jekyll e não outro gerador

Customizável – ao contrário de outras plataformas de blog(medium, blogger), usar a sua própria te permite customizar tudo o que quiser a sua maneira.

Boa documentação e comunidade grande e participativa – isso faz toda a diferença quando precisa de uma resposta ou ajuda com algum problema que está tendo. Também ajuda a saber das novidades e obter tutoriais mais cedo.

Fácil de usar – Jekyll usa liquid templates que é fácil de entender, e ele é escrito em ruby, que também é uma linguagem considerada fácil, então se precisar se aprofundar, criar plugins, pode se valer disso. Fora que já existem vários plugins compatíveis, como disqus, stripe e muitos outros.

Se uma ferramenta te atende e resolve o que precisa, sem perda de tempo ou complicações a mais, essa é a escolha, se isso mudar um dia…

Https://github.com/netlify/staticgen
Https://headlesscms.org/
Https://jekyllrb.com/
https://www.hawksworx.com/blog/prerendering/
https://blog.codinghorror.com/the-principle-of-least-power/

Sites contruídos em jekyll

Https://julian.is/article/static-websites-and-jamstack/
Https://www.healthcare.gov
Https://www.boston.gov/finance/fiscal-year-2021
Https://www.stackery.io