🗺️ O Fluxo de Compilação de um Site Jekyll

flowchart TD
    SOURCE["Repositório Fonte:\n- _config.yml\n- _layouts/\n- _includes/\n- _posts/ e páginas .md"]
    --> ENGINE["Engine Jekyll (Ruby)"]

    ENGINE --> PARSE_MD["Parser Kramdown (Converte Markdown para HTML)"]
    ENGINE --> LIQUID["Liquid Template Engine (Interpolação de Tags, Filtros e Includes)"]
    ENGINE --> SASS["Processador Sass / SCSS (Compila estilos CSS)"]

    PARSE_MD & LIQUID & SASS --> SITE["Diretório _site/ Gerado\n(HTML, CSS, JS estáticos prontos para deploy no GitHub Pages) ⚡"]

    style SOURCE fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style ENGINE fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style PARSE_MD fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style LIQUID fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style SASS fill:#fff9c4,stroke:#fbc02d,stroke-width:1.5px
    style SITE fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff

📖 Fundamentos e Aplicação

O Jekyll foi o pioneiro que popularizou o movimento Docs-as-Code e geradores de sites estáticos modernos. Criado por Tom Preston-Werner (co-fundador do GitHub), o Jekyll possui suporte nativo no GitHub Pages, transformando repositórios Git em sites públicos sem necessidade de bancos de dados ou servidores backend complexos.

Componentes Arquiteturais do Jekyll:

  1. _config.yml: Arquivo mestre de configuração global do site (título, descrição, plugins e coleções).

  2. Kramdown: O parser padrão em Ruby que estende o Markdown com IAL (Inline Attribute Lists como {: .destaque }), tabelas avançadas e matemática.

  3. Liquid Template Engine (Shopify):
    • Objetos: {{ page.title }}, {{ site.posts }}.
    • Tags de Controle: {% for item in colecao %}, {% if condicao %}, {% include header.html %}.
    • Filtros de Formatação: {{ page.date | date: "%d/%m/%Y" }}, {{ post.content | strip_html | truncatewords: 30 }}.