Jekyll para desenvolvedores Wordpress

Neste artigo, assumiremos o papel de um desenvolvedor web construindo um site para um escritório de advocacia fictício. WordPress é uma escolha óbvia para um site como este, mas é a única ferramenta que devemos considerar? Vejamos uma maneira completamente diferente de construir um site, usando Jekyll.

Leitura adicional no SmashingMag:

• Crie um blog com páginas Jekyll e GitHub
• Modelagem de conteúdo com Jekyll
• Geradores de sites estáticos revisados: Jekyll, Middleman, Roots, Hugo
• Por que os geradores de sites estáticos são a próxima grande novidade
  

O que é Jekyll?

Jekyll é um gerador de sites estáticos. Em vez de software e banco de dados serem instalados em nosso servidor, um site Jekyll é simplesmente um diretório de arquivos em nosso computador. Quando executamos o Jekyll nesse diretório, ele gera um site estático, que enviamos para um provedor de hospedagem.

Por que Jekyll?

Precisamos considerar várias compensações ao decidir se o Jekyll é adequado para um projeto.

Vantagens do Jekyll

• Menos complexidade
  Um site Jekyll é essencialmente um site estático com uma linguagem de templates. Tem menos componentes para criar e manter. No servidor, precisamos apenas de um servidor web capaz de servir arquivos.
• Velocidade
  Quando os visitantes visualizam páginas nos sites Jekyll, o servidor retorna os arquivos existentes sem nenhum processamento extra . Isso é muito mais rápido que o WordPress, que gera páginas dinamicamente no momento da solicitação. Nota: os plugins de cache do WordPress podem eliminar essa lacuna de desempenho.
• Estabilidade
  O WordPress tem mais componentes trabalhando juntos para gerar páginas para visitantes. Se um componente falhar, os visitantes podem não conseguir visualizar o site. Muito menos pode dar errado quando um servidor web está servindo apenas arquivos.
• Segurança
  O Wordpress faz muito para mitigar os riscos de segurança, como ataques CSRF, XSS ou injeção de SQL, mas depende de você sempre ter as atualizações mais recentes. Sites estáticos eliminam esse problema porque não há armazenamento de dados dinâmico que um hacker possa explorar.
• Controlado pela origem
  Um site Jekyll é um diretório de arquivos, então podemos armazenar todo o site em um repositório Git. Trabalhar com um repositório nos dá muitos benefícios (embora o VersionPress esteja em desenvolvimento e permita esse fluxo de trabalho para WordPress).

Desvantagens de Jekyll

• Sem interface gráfica
  Um cliente pode se inscrever no WordPress.com, escolher um tema e configurar um site básico por conta própria. Jekyll é uma ferramenta de linha de comando, que sobrecarrega a maioria dos usuários não técnicos. Existem GUIs de terceiros para Jekyll, incluindo CloudCannon (disclaimer: sou o cofundador), Forestry, Jekyll Admin, Netlify CMS, Prose e Siteleaf. No entanto, eles precisam ser configurados pelo desenvolvedor antes de serem entregues ao cliente.
• Tempo de construção
  Em nossa situação, isso não é um problema porque o site será construído em menos de um segundo. No entanto, um site maior com 10.000 a 100.000 postagens pode levar minutos para ser construído. Isso é frustrante quando estamos desenvolvendo porque temos que esperar que o site seja construído antes de visualizá-lo no navegador.
• Temas
  O Jekyll tem alguns temas disponíveis, mas não é nada comparado aos milhares de temas disponíveis para WordPress.
• Extensibilidade
  Se precisarmos adicionar funcionalidades personalizadas ao nosso site WordPress, podemos escrever nosso próprio PHP. Podemos criar plugins Ruby personalizados para o Jekyll, no entanto, eles são executados em tempo de compilação e não em tempo de solicitação.
• Apoiar
  O WordPress tem uma enorme comunidade de especialistas e outros recursos para ajudar. Jekyll tem recursos semelhantes, mas em menor escala.

Jekyll é uma ótima ferramenta para sites amplamente informativos, como este projeto. Se o projeto for mais um aplicativo, poderíamos adicionar elementos dinâmicos usando JavaScript, mas em algum momento provavelmente precisaríamos de um back-end como o WordPress'.

Implementação

WordPress e Jekyll adotam abordagens diferentes para construir um site, mas compartilham muitas funcionalidades. Vamos começar a construir nosso site Jekyll.

Instalando

Um ambiente de desenvolvimento típico para WordPress requer a instalação de Apache ou NGINX, PHP e MySQL. Em seguida, instalaríamos o WordPress e configuraríamos o servidor web.

Para o Jekyll, precisamos ter certeza de que temos o Ruby instalado (às vezes isso é mais difícil do que parece). Em seguida, instalamos a gem Jekyll:

 gem install jekyll

Se você estiver no macOS, certifique-se de ter o desenvolvedor Xcode instalado primeiro.

 xcode-select --install

Correndo

A execução de um site WordPress geralmente consiste em iniciar o banco de dados e o servidor web.

No Jekyll, navegamos até os arquivos do nosso site (um diretório vazio neste momento) no terminal e executamos:

 jekyll serve

Isso inicia um servidor da Web local na porta 4000 e reconstrói o site sempre que um arquivo é alterado.

Páginas

É hora de criar nossa primeira página. Vamos começar com a página inicial. As páginas são para conteúdo autônomo sem uma data associada. O WordPress armazena o conteúdo da página no banco de dados.

No Jekyll, as páginas são arquivos HTML. Começaremos com HTML puro e, em seguida, adicionaremos recursos do Jekyll conforme necessário. Aqui está index.html em seu estado atual:

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> </div> </section> <footer> <p class="copyright"> &copy; 2016 </p> </footer> </body> </html>

Líquido

No WordPress, podemos escrever PHP para fazer quase tudo. Jekyll tem uma abordagem diferente. Em vez de fornecer uma linguagem de programação completa, ele usa uma linguagem de modelagem chamada Liquid. (O WordPress também possui linguagens de modelo, como o Timber.)

O rodapé de index.html contém um aviso de direitos autorais com um ano:

 <p class="copyright"> &copy; 2016 </p>

É improvável que nos lembremos de atualizar isso todos os anos, então vamos usar o Liquid para gerar o ano atual:

 <p class="copyright"> &copy; {{ site.time | date: "%Y" }} </p>

Estamos construindo um site estático no Jekyll, então essa data não mudará até que reconstruamos o site. Se quiséssemos que a data mudasse sem ter que reconstruir o site, poderíamos usar JavaScript.

Inclui

A maior parte do HTML em index.html é para configurar o layout geral e não mudará entre as páginas. Essa repetição levará a muita manutenção, então vamos reduzi-la.

Inclui foi uma das primeiras coisas que aprendi em PHP. Usando inclui, podemos colocar o conteúdo do cabeçalho e do rodapé em arquivos diferentes e, em seguida, incluir o mesmo conteúdo em várias páginas.

Jekyll tem exatamente o mesmo recurso. As inclusões são armazenadas em uma pasta chamada _includes . Usamos Liquid para incluí-los em index.html :

 {% include header.html %} <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> {% include footer.html %}

Layouts

As inclusões reduzem um pouco a repetição, mas ainda as temos em cada página. O WordPress resolve esse problema com arquivos de modelo que separam a estrutura de um site de seu conteúdo.

O Jekyll equivalente a arquivos de modelo são layouts. Layouts são arquivos HTML com um espaço reservado para conteúdo. Eles são armazenados no diretório _layouts . _layouts/default.html para conter um layout HTML básico:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> {{ content }} </div> </section> <footer> <p class="copyright"> &copy; {{ site.time | date: "%Y-%m-%d" }} </p> </footer> </body> </html>

Em seguida, substitua as inclusões em index.html especificando o layout. Especificamos o layout usando o front Matter, que é um trecho de YAML que fica entre duas linhas com três traços na parte superior de um arquivo (mais sobre isso em breve).

 --- layout: default --- <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote>

Agora podemos ter o mesmo layout em todas as nossas páginas.

Front Matter

No WordPress, os campos personalizados nos permitem definir metadados em uma postagem. Podemos usá-los para definir tags de SEO ou para mostrar e ocultar seções de uma página para uma postagem específica.

Este conceito é chamado de matéria de frente em Jekyll. Anteriormente, usamos o front Matter para definir o layout para index.html . Agora podemos definir nossas próprias variáveis ​​e acessá-las usando Liquid. Isso reduz ainda mais a repetição em nosso site.

Vamos adicionar vários depoimentos ao index.html . Poderíamos copiar e colar o HTML, mas mais uma vez, isso leva a uma manutenção maior. Em vez disso, vamos adicionar os depoimentos em primeiro plano e iterar sobre eles com o Liquid:

 --- layout: default testimonials: - message: We use Justice Law in all our endeavours. They offer an unparalleled service when it comes to running a business. image: "/images/joice.jpeg" name: Joice Carmold - message: Justice Law are the best of the best. Being local, they care about people and have strong ties to the community. image: "/images/peter.jpeg" name: Peter Rottenburg - message: Justice Law were everything we could have hoped for when buying our first home. Highly recommended to all. image: "/images/gibblesto.jpeg" name: D. and G. Gibbleston --- <div class="testimonials"> {% for testimonial in page.testimonials %} <blockquote class="testimonial"> <p class="testimonial-message">{{ testimonial.message }}</p> <p class="testimonial-author"> <img src="{{ testimonial.image }}" alt="Photo of {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> {% endfor %} </div>

Postagens

O WordPress armazena o conteúdo HTML, data e outros metadados para postagens no banco de dados.

No Jekyll, cada post é um arquivo estático armazenado em um diretório _posts . O nome do arquivo tem a data de publicação e o título da postagem — por exemplo, _posts/2016-11-11-real-estate-flipping.md . O código-fonte de uma postagem de blog usa esta estrutura:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

Também podemos usar o front Matter para definir categorias e tags.

Abaixo da matéria da frente está o corpo do post, escrito em Markdown. Markdown é uma alternativa mais simples ao HTML.

Jekyll nos permite criar layouts que herdam de outros layouts. Você deve ter notado que este post tem um layout de post . O layout do post herda do layout padrão e adiciona uma data e um título:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Vamos criar blog.html para iterar sobre as postagens e vinculá-las:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Coleções

No WordPress, os tipos de postagem personalizados são úteis para gerenciar grupos de conteúdo. Por exemplo, você pode usar tipos de postagem personalizados para depoimentos, produtos ou listagens de imóveis.

Jekyll tem esse recurso e chama de coleções.

A página about.html mostra os perfis dos membros da equipe. Poderíamos definir os metadados para a equipe (nome, imagem, número de telefone, biografia) na matéria principal, mas só poderíamos referenciar nessa página. No futuro, queremos usar os mesmos dados para exibir informações sobre os autores nas postagens do blog. Uma coleção nos permite fazer referência aos membros da equipe em qualquer lugar do site.

A configuração do nosso site fica em _config.yml . Aqui, definimos uma nova coleção:

 collections: staff_members: output: false

Agora adicionamos nossos membros da equipe. Cada membro da equipe é representado em um arquivo Markdown armazenado em uma pasta com o nome da coleção; por exemplo, _staff_members/jane-doe.md .

Adicionamos os metadados na matéria frontal e a sinopse no corpo:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

Semelhante às postagens, podemos iterar sobre a coleção em about.html para exibir cada membro da equipe:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Procurar

O WordPress possui uma poderosa pesquisa integrada e plugins de pesquisa ainda mais poderosos.

O Jekyll não possui pesquisa integrada, mas existem soluções:

• pesquisa do lado do cliente usando uma biblioteca JavaScript como Lunr.js (Jekyll.tips tem um tutorial sobre como configurar isso);
• soluções de terceiros, como Algolia para busca de alto desempenho;
• soluções drop-in, como a Pesquisa personalizada do Google.

Plug-ins

Plugins são uma parte atraente do WordPress. É fácil carregar a funcionalidade para que o WordPress faça quase tudo.

Em nosso site Jekyll, muitos plugins WordPress populares não são necessários:

• Segurança iThemes
  Nosso site Jekyll é tão seguro quanto o servidor web em que está sendo executado.
• Guarda de backup
  Nosso site Jekyll ficará em um repositório que nos dará acesso a todo o histórico de mudanças.
• Supercache WP
  Nosso site Jekyll já está estático.

Outros plugins do WordPress têm equivalentes de terceiros que podemos colocar no site:

• Plugins de formulário de contato, como o Contact Form 7, podem ser substituídos pelo Formspree, FormKeep ou Wufoo.
• Para uma loja simples, o WP eCommerce pode ser substituído por Snipcart, Gumroad ou Stripe.
• Em vez de comentários do WordPress com Akismet, você pode usar Disqus, Facebook Comments ou IntenseDebate.

Alguns plugins do WordPress podem ser emulados com o núcleo do Jekyll. Aqui está uma galeria de fotos usando front Matter e Liquid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Só precisamos adicionar nosso próprio JavaScript e CSS para completá-lo.

Os plugins Jekyll podem emular a funcionalidade de outros plugins do WordPress. Tenha em mente que os plugins Jekyll só são executados enquanto o site está sendo gerado - eles não adicionam funcionalidade em tempo real:

• Em vez do mapa de site XML de um clique, use o plug-in Jekyll Sitemap Generator.
• O Jekyll SEO Tag oferece algumas das funcionalidades do SEO Wizard.
• Em vez do WPGlobus para um site multilíngue, use o Jekyll Language Plugin.

Controle de versão

Um dos principais benefícios de usar um gerador de site estático como o Jekyll é que o site inteiro e o conteúdo podem ficar no Git. Em um nível básico, o Git fornece um histórico de todas as alterações no site. Para as equipes, ele abre todos os tipos de fluxos de trabalho e processos de aprovação.

O GitHub tem um tutorial interativo fantástico para iniciantes aprendendo Git.

Transferência do cliente

Isso cobre os detalhes básicos da criação do site. Se você está curioso para ver como um site Jekyll inteiro se encaixa, dê uma olhada no modelo Justice. É um modelo gratuito licenciado pelo MIT para Jekyll. Os snippets acima são baseados neste modelo.

O WordPress CMS está embutido na plataforma, então precisaríamos configurar uma conta para o cliente.

Com nosso site Jekyll, vinculamos nosso repositório Git a uma das GUIs Jekyll mencionadas anteriormente. Uma das coisas boas sobre esse fluxo de trabalho é que as alterações dos clientes são confirmadas de volta ao repositório. Como desenvolvedores, podemos continuar usando fluxos de trabalho locais mesmo com não desenvolvedores atualizando o site.

Algumas GUIs Jekyll oferecem hospedagem, enquanto outras têm uma forma de saída para um bucket do Amazon S3 ou para GitHub Pages.

Resumo

Neste ponto, nosso site Jekyll está ativo e editável pelo cliente. Se precisarmos fazer alguma alteração no site, simplesmente enviamos para o repositório e ele será implantado automaticamente ao vivo.

<div class=“testimonials”> {% para depoimento em page.testimonials %} <blockquote class=“testimonial”> <p class=“testimonial-message”>{{ testimonial.message }}</p> <p class =“autor de depoimento”> <img src=“{{ depoimento.image }}” alt=“Foto de {{ depoimento.name }}”> {{ depoimento.name }} </p> </blockquote> { % endfor %} </div>

Postagens

O WordPress armazena o conteúdo HTML, data e outros metadados para postagens no banco de dados.

No Jekyll, cada post é um arquivo estático armazenado em um diretório _posts . O nome do arquivo tem a data de publicação e o título da postagem — por exemplo, _posts/2016-11-11-real-estate-flipping.md . O código-fonte de uma postagem de blog usa esta estrutura:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

Também podemos usar o front Matter para definir categorias e tags.

Abaixo da matéria da frente está o corpo do post, escrito em Markdown. Markdown é uma alternativa mais simples ao HTML.

Jekyll nos permite criar layouts que herdam de outros layouts. Você deve ter notado que este post tem um layout de post . O layout do post herda do layout padrão e adiciona uma data e um título:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Vamos criar blog.html para iterar sobre as postagens e vinculá-las:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Coleções

No WordPress, os tipos de postagem personalizados são úteis para gerenciar grupos de conteúdo. Por exemplo, você pode usar tipos de postagem personalizados para depoimentos, produtos ou listagens de imóveis.

Jekyll tem esse recurso e chama de coleções.

A página about.html mostra os perfis dos membros da equipe. Poderíamos definir os metadados para a equipe (nome, imagem, número de telefone, biografia) na matéria principal, mas só poderíamos referenciar nessa página. No futuro, queremos usar os mesmos dados para exibir informações sobre os autores nas postagens do blog. Uma coleção nos permite fazer referência aos membros da equipe em qualquer lugar do site.

A configuração do nosso site fica em _config.yml . Aqui, definimos uma nova coleção:

 collections: staff_members: output: false

Agora adicionamos nossos membros da equipe. Cada membro da equipe é representado em um arquivo Markdown armazenado em uma pasta com o nome da coleção; por exemplo, _staff_members/jane-doe.md .

Adicionamos os metadados na matéria frontal e a sinopse no corpo:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

Semelhante às postagens, podemos iterar sobre a coleção em about.html para exibir cada membro da equipe:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Procurar

O WordPress possui uma poderosa pesquisa integrada e plugins de pesquisa ainda mais poderosos.

O Jekyll não possui pesquisa integrada, mas existem soluções:

• pesquisa do lado do cliente usando uma biblioteca JavaScript como Lunr.js (Jekyll.tips tem um tutorial sobre como configurar isso);
• soluções de terceiros, como Algolia para busca de alto desempenho;
• soluções drop-in, como a Pesquisa personalizada do Google.

Plug-ins

Plugins são uma parte atraente do WordPress. É fácil carregar a funcionalidade para que o WordPress faça quase tudo.

Em nosso site Jekyll, muitos plugins WordPress populares não são necessários:

• Segurança iThemes
  Nosso site Jekyll é tão seguro quanto o servidor web em que está sendo executado.
• Guarda de backup
  Nosso site Jekyll ficará em um repositório que nos dará acesso a todo o histórico de mudanças.
• Supercache WP
  Nosso site Jekyll já está estático.

Outros plugins do WordPress têm equivalentes de terceiros que podemos colocar no site:

• Plugins de formulário de contato, como o Contact Form 7, podem ser substituídos pelo Formspree, FormKeep ou Wufoo.
• Para uma loja simples, o WP eCommerce pode ser substituído por Snipcart, Gumroad ou Stripe.
• Em vez de comentários do WordPress com Akismet, você pode usar Disqus, Facebook Comments ou IntenseDebate.

Alguns plugins do WordPress podem ser emulados com o núcleo do Jekyll. Aqui está uma galeria de fotos usando front Matter e Liquid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Só precisamos adicionar nosso próprio JavaScript e CSS para completá-lo.

Os plugins Jekyll podem emular a funcionalidade de outros plugins do WordPress. Tenha em mente que os plugins Jekyll só são executados enquanto o site está sendo gerado - eles não adicionam funcionalidade em tempo real:

• Em vez do mapa de site XML de um clique, use o plug-in Jekyll Sitemap Generator.
• O Jekyll SEO Tag oferece algumas das funcionalidades do SEO Wizard.
• Em vez do WPGlobus para um site multilíngue, use o Jekyll Language Plugin.

Controle de versão

Um dos principais benefícios de usar um gerador de site estático como o Jekyll é que o site inteiro e o conteúdo podem ficar no Git. Em um nível básico, o Git fornece um histórico de todas as alterações no site. Para as equipes, ele abre todos os tipos de fluxos de trabalho e processos de aprovação.

O GitHub tem um tutorial interativo fantástico para iniciantes aprendendo Git.

Transferência do cliente

Isso cobre os detalhes básicos da criação do site. Se você está curioso para ver como um site Jekyll inteiro se encaixa, dê uma olhada no modelo Justice. É um modelo gratuito licenciado pelo MIT para Jekyll. Os snippets acima são baseados neste modelo.

O WordPress CMS está embutido na plataforma, então precisaríamos configurar uma conta para o cliente.

Com nosso site Jekyll, vinculamos nosso repositório Git a uma das GUIs Jekyll mencionadas anteriormente. Uma das coisas boas sobre esse fluxo de trabalho é que as alterações dos clientes são confirmadas de volta ao repositório. Como desenvolvedores, podemos continuar usando fluxos de trabalho locais mesmo com não desenvolvedores atualizando o site.

Algumas GUIs Jekyll oferecem hospedagem, enquanto outras têm uma forma de saída para um bucket do Amazon S3 ou para GitHub Pages.

Resumo

Neste ponto, nosso site Jekyll está ativo e editável pelo cliente. Se precisarmos fazer alguma alteração no site, simplesmente enviamos para o repositório e ele será implantado automaticamente ao vivo.

Seu primeiro site Jekyll

Agora é sua vez. Muitos recursos estão disponíveis para ajudá-lo a criar seu primeiro site Jekyll:

• O site oficial do Jekyll é um ótimo lugar para começar com uma documentação detalhada sobre todos os recursos do Jekyll.
• O Jekyll.tips tem uma série de tutoriais em vídeo que cobre os principais tópicos do Jekyll.
• Dê uma olhada nos modelos Jekyll no GitHub para ver como eles são reunidos: Frisco para sites de marketing, Scholar para documentação e Urban para agências digitais.

Se você está migrando, Jekyll tem ferramentas para importar posts de sites WordPress e WordPress.com. Após a importação, você precisará migrar ou criar manualmente os layouts, páginas, CSS, JavaScript e outros ativos para o site.

Empacotando

A beleza de Jekyll está em sua simplicidade. Embora o WordPress possa corresponder a muitos dos recursos do Jekyll, muitas vezes vem ao custo de complexidade por meio de plugins ou infraestrutura extras.

Em última análise, trata-se de encontrar a ferramenta que funciona melhor para você. Achei o Jekyll uma maneira rápida e eficiente de construir sites. Convido você a experimentar e postar sua experiência nos comentários.