Como migrar do WordPress para o Eleventy Static Site Generator

Eleventy é um gerador de site estático. Vamos nos aprofundar no motivo pelo qual você deseja usar um gerador de site estático, entrar no âmago da questão de converter um site WordPress simples para Eleventy e falar sobre os prós e contras de gerenciar conteúdo dessa maneira. Vamos lá!

O que é um gerador de site estático?

Comecei minha carreira de desenvolvimento web décadas atrás, em meados da década de 1990, quando HTML e CSS eram as únicas coisas que você precisava para colocar um site em funcionamento. Esses sites simples e estáticos eram rápidos e responsivos. Avanço rápido para os dias atuais, porém, e um site simples pode ser bastante complicado.

No caso do WordPress, vamos pensar no que é preciso para renderizar uma página da web. O PHP do lado do servidor WordPress, rodando nos servidores de um host, faz o trabalho pesado de consultar um banco de dados MySQL para metadados e conteúdo, escolhe as versões corretas de imagens armazenadas em um sistema de arquivos estático e mescla tudo em um modelo baseado em tema antes retornando-o ao navegador. É um processo dinâmico para cada solicitação de página, embora a maioria das páginas da Web que vi geradas pelo WordPress não sejam realmente tão dinâmicas. A maioria dos visitantes, se não todos, experimenta conteúdo idêntico.

Os geradores de sites estáticos invertem o modelo de volta a essa abordagem de décadas. Em vez de montar páginas da Web dinamicamente, os geradores de sites estáticos pegam o conteúdo na forma de Markdown, mesclam-no com modelos e criam páginas da Web estáticas. Esse processo acontece fora do loop de solicitação quando os usuários estão navegando em seu site. Todo o conteúdo foi pré-gerado e servido rapidamente a cada solicitação. Os servidores da Web estão literalmente fazendo o que anunciam: servindo. Sem banco de dados. Sem plugins de terceiros. Apenas HTML puro, CSS, JavaScript e imagens. Essa pilha de tecnologia simplificada também equivale a uma superfície de ataque menor para hackers. Há uma pequena infraestrutura do lado do servidor para explorar, então seu site é inerentemente mais seguro.

Os principais geradores de sites estáticos também são ricos em recursos, e isso pode ser um argumento convincente para dar adeus às pilhas de tecnologia que são marcas registradas dos sistemas modernos de gerenciamento de conteúdo.

Se você está nesse setor há algum tempo, deve se lembrar do produto Dreamweaver da Macromedia (pré-Adobe). Adorei o conceito de itens e modelos de biblioteca, especificamente como eles me permitem criar consistência em várias páginas da web. No caso do Eleventy, os conceitos de templates, filtros, shortcodes e plugins são análogos próximos. Comecei toda essa jornada depois de ler sobre a conversão da empresa Smashing para o JamStack. Eu também li o livro gratuito de Mathias Biilmann & Phil Hawksworth chamado Modern Web Development on the JAMstack e sabia que estava pronto para arregaçar as mangas e converter algo meu.

Por que não usar um gerador de site estático?

Os geradores de sites estáticos exigem um pouco de curva de aprendizado. Você não conseguirá passar facilmente funções editoriais para inserir conteúdo, e casos de uso específicos podem impedi-lo de usar uma. A maior parte do trabalho que vou mostrar é feito no Markdown e via linha de comando. Dito isso, há muitas opções para usar geradores de sites estáticos em conjunto com dados dinâmicos, comércio eletrônico, comentários e sistemas de classificação.

Você também não precisa converter todo o seu site de uma só vez. Se você tem uma configuração complicada, pode começar pequeno e ver como se sente sobre a geração de sites estáticos antes de montar um plano para resolver algo em escala corporativa. Você também pode continuar usando o WordPress como o melhor sistema de gerenciamento de conteúdo headless da categoria e usar um SSG para fornecer conteúdo do WordPress.

Como eu escolhi o Eleventy como um gerador de site estático

Faça uma pesquisa rápida por geradores de sites estáticos populares e você encontrará muitas ótimas opções para começar: Eleventy, Gatsby, Hugo e Jekyll foram os principais concorrentes da minha lista. Como escolher? Fiz o que veio naturalmente e perguntei a alguns amigos. Eleventy foi um líder claro na minha enquete no Twitter, mas o que conquistou foi um comentário que dizia “@eleven_ty se sente muito acessível se não souber o que está fazendo”. Ei, sou eu! Infelizmente, posso ser pego na paralisia da análise. Hoje não… foi bom escolher Eleventy com base em uma enquete e um comentário. Desde então, converti quatro sites WordPress para Eleventy, usando o GitHub para armazenar o código e o Netlify para servir os arquivos com segurança. É exatamente isso que vamos fazer hoje, então vamos arregaçar as mangas e mergulhar!

Começando: Inicializando o site inicial

Eleventy tem uma grande coleção de projetos iniciais. Usaremos o eleventy-netlify-boilerplate de Dan Urbanowicz como ponto de partida, anunciado como um “modelo para construir um site de blog simples com Eleventy e implantá-lo no Netlify. Inclui Netlify CMS e Netlify Forms.” Clique em “Implantar para netlify” para começar. Você será solicitado a conectar o Netlify ao GitHub, nomear seu repositório (estou chamando o meu smashing-eleventy-dawson) e depois “Salvar e implantar”.

Feito isso, algumas coisas aconteceram:

1. O projeto clichê foi adicionado à sua conta do GitHub.
2. A Netlify atribuiu um nome dinâmico ao projeto, construiu-o e implantou-o.
3. A Netlify configurou o projeto para usar Identity (se você quiser usar recursos do CMS) e Forms (um formulário de contato simples).

Como a captura de tela sugere, você pode adquirir ou mapear um domínio para o projeto e também proteger o site com HTTPS. O último recurso foi um ponto de venda realmente atraente para mim, já que meu host cobrava uma taxa exorbitante pelo SSL. No Netlify, é grátis.

Cliquei em Configurações do site e em Alterar nome do site para criar um nome mais apropriado para o meu site. Por mais que eu tenha gostado de jovial-goldberg-e9f7e9, elizabeth-dawson-piano é mais apropriado. Afinal, esse é o site que estamos convertendo! Quando visito elizabeth-dawson-piano.netlify.app, vejo o conteúdo padrão. Impressionante!

Vamos baixar o novo repositório para nossa máquina local para que possamos começar a personalizar o site. Meu repositório GitHub para este projeto me dá o comando git clone que posso usar no terminal do Visual Studio Code para copiar os arquivos:

• Clonar git →

Em seguida, seguimos as instruções restantes no arquivo README do clichê para instalar as dependências localmente, editar o arquivo _data/metadata.json para corresponder ao projeto e executar o projeto localmente.

• npm install @11ty/eleventy
• npm install
• npx eleventy --serve --quiet

Com esse último comando, Eleventy inicia o site de desenvolvimento local em localhost:8080 e começa a observar as alterações.

Preservando postagens, páginas e imagens do WordPress

O site do qual estamos convertendo é um site WordPress existente em elizabethrdawson.wordpress.com. Embora o site seja simples, seria ótimo aproveitar o máximo possível do conteúdo existente. Ninguém gosta muito de copiar e colar tanto, certo? O WordPress facilita o uso de sua função de exportação.

Exportar conteúdo me fornece um arquivo zip contendo um extrato XML do conteúdo do site. Exportar Biblioteca de Mídia me dá um arquivo zip das imagens do site. O site que escolhi para usar como modelo para este exercício é um site simples de 3 páginas e está hospedado no Wordpress.com. Se você for auto-hospedado, pode acessar Ferramentas > Exportar para obter a extração XML, mas dependendo do seu host, pode ser necessário usar o FTP para baixar as imagens.

Se você abrir o arquivo XML em seu editor, ele será de pouca utilidade para você. Precisamos de uma maneira de obter postagens individuais no Markdown, que é a linguagem que usaremos com o Eleventy. Para nossa sorte, existe um pacote para converter postagens e páginas do WordPress em Markdown. Clone esse repositório para sua máquina e coloque o arquivo XML no mesmo diretório. Sua listagem de diretórios deve ser algo como isto:

Se você quiser extrair postagens do XML, isso funcionará imediatamente. No entanto, nosso site de amostra tem três páginas, portanto, precisamos fazer um pequeno ajuste. Na linha 39 do parser.js , altere “post” para “page” antes de continuar.

Certifique-se de fazer um “npm install” no diretório wordpress-export-to-markdown , digite “node index.js” e siga as instruções.

Esse processo criou três arquivos para mim: welcome.md , about.md e contact.md . Em cada uma, há uma matéria frontal que descreve o título e a data da página, e o Markdown do conteúdo extraído do XML. 'Front Matter' pode ser um novo termo para você, e se você olhar para a seção na parte superior dos arquivos .md de amostra no diretório “pages”, você verá uma seção de dados na parte superior do arquivo. O Eleventy oferece suporte a uma variedade de assuntos de frente para ajudar a personalizar seu site, e o título e a data são apenas o começo. Nas páginas de amostra, você verá isso na seção de destaque:

 eleventyNavigation: key: Home order: 0

Usando essa sintaxe, você pode adicionar páginas automaticamente à navegação do site. Eu queria preservar isso com minhas novas páginas, então copiei e colei o conteúdo das páginas nos arquivos .md padrão existentes para home, contact e about. Nosso site de exemplo não terá um blog por enquanto, então estou excluindo os arquivos .md do diretório “posts” também. Agora meu site de visualização local se parece com isso, então estamos chegando lá!

Este parece ser um bom momento para confirmar e enviar as atualizações para o GitHub. Algumas coisas acontecem quando eu confirmo atualizações. Após a notificação do GitHub de que as atualizações foram feitas, o Netlify executa a compilação e atualiza o site ativo. É o mesmo processo que acontece localmente quando você está atualizando e salvando arquivos: Eleventy converte os arquivos Markdown em páginas HTML. Na verdade, se você procurar no diretório _site localmente, verá a versão HTML do seu site, pronta para veiculação estática. Então, conforme navego para elizabeth-dawson-piano.netlify.app logo após o commit, vejo as mesmas atualizações que vi localmente.

Adicionando imagens

Usaremos imagens do site original. No arquivo .eleventy.js , você verá que os recursos de imagem estática devem ir para a pasta static/img. Cada página terá uma imagem de herói, e é aqui que a matéria da frente funciona muito bem. Na seção principal de cada página, adicionarei uma referência à imagem do herói:

 hero: `/static/img/performance.jpg`

Eleventy mantém os layouts de página na pasta _includes/layouts . base.njk é usado por todos os tipos de página, então adicionaremos este código logo abaixo da navegação, pois é onde queremos nossa imagem hero.

 {% if (hero) %} <img class="page-hero" src="{{ hero }}" alt="Hero image for {{ title }}" /> {% endif %}

Também incluí uma tag de imagem para a imagem de Elizabeth na página Sobre, usando uma classe CSS para alinhá-la e fornecer o preenchimento adequado. Agora é um bom momento para se comprometer e ver exatamente o que mudou.

Incorporando um player do YouTube com um plug-in

Há alguns vídeos do YouTube na página inicial. Vamos usar um plugin para criar o código de incorporação do Youtube automaticamente. eleventy-plugin-youtube-embed é uma ótima opção para isso. As instruções de instalação são bem claras: instale o pacote com npm e inclua-o em nosso arquivo .eleventy.js . Sem mais alterações, esses URLs do YouTube são transformados em players incorporados. (ver compromisso)

Usando coleções e filtros

Não precisamos de um blog para este site, mas precisamos de uma maneira de informar as pessoas sobre os próximos eventos. Nossos eventos - para todos os efeitos - serão como postagens de blog. Cada um tem um título, uma descrição e uma data.

Existem algumas etapas que precisamos para criar esta nova página baseada em coleção:

• Crie um novo arquivo events.md em nosso diretório de páginas.
• Adicione alguns eventos ao nosso diretório de postagens. Adicionei arquivos .md para um concerto de férias, um concerto de primavera e um recital de outono.
• Crie uma definição de coleção em .eleventy.js para que possamos tratar esses eventos como uma coleção. Veja como a coleção é definida: reunimos todos os arquivos Markdown no diretório de postagens e filtramos qualquer coisa que não tenha um local especificado no assunto principal.

 eleventyConfig.addCollection("events", (collection) => collection.getFilteredByGlob("posts/*.md").filter( post => { return ( item.data.location ? post : false ); }) );

• Adicione uma referência à coleção ao nosso arquivo events.md , mostrando cada evento como uma entrada em uma tabela. Veja como é a iteração em uma coleção:

 <table> <thead> <tr> <th>Date</th> <th>Title</th> <th>Location</th> </tr> </thead> <tbody> {%- for post in collections.events -%} <tr> <td>{{ post.date }}</td> <td><a href="{{ post.url }}">{{ post.data.title }}</a></td> <td>{{ post.data.location }}</td> </tr> {%- endfor -%} </tbody> </table>

No entanto, nossa formatação de data parece muito ruim.

Felizmente, o arquivo .eleventy.js já possui um filtro intitulado readableDate. É fácil usar filtros no conteúdo em arquivos e modelos Markdown:

 {{ post.date | readableDate }}

Agora, nossas datas estão formatadas corretamente! A documentação do filtro da Eleventy se aprofunda sobre quais filtros estão disponíveis na estrutura e como você pode adicionar os seus próprios. (ver: compromisso)

Polindo o design do site com CSS

Ok, agora temos um site bastante sólido criado. Temos páginas, imagens de heróis, uma lista de eventos e um formulário de contato. Não somos limitados pela escolha de nenhum tema, por isso podemos fazer o que quisermos com o design do site… o céu é o limite! Cabe a você tornar seu site eficiente, responsivo e esteticamente agradável. Fiz algumas mudanças de estilo e marcação para levar as coisas ao nosso commit final.

Agora podemos contar ao mundo sobre todo o nosso trabalho duro. Vamos publicar este site.

Publicando o site

Ah, mas espere. Já está publicado! Temos trabalhado nesse bom fluxo de trabalho o tempo todo, onde nossas atualizações para o GitHub se propagam automaticamente para o Netlify e são reconstruídas em um HTML novo e rápido. As atualizações são tão fáceis quanto um git push. O Netlify detecta as alterações do git, processa o markdown em HTML e fornece o site estático. Quando estiver pronto e pronto para um domínio personalizado, o Netlify permite que você use seu domínio existente gratuitamente. Visite Configurações do site > Gerenciamento de domínio para obter todos os detalhes, incluindo como você pode aproveitar o certificado HTTPS gratuito da Netlify com seu domínio personalizado.

Avançado: imagens, formulários de contato e gerenciamento de conteúdo

Este era um site simples com apenas algumas imagens. Você pode ter um site mais complicado, no entanto. O serviço Large Media da Netlify permite fazer upload de imagens de resolução total para o GitHub e armazena um ponteiro para a imagem em Large Media. Dessa forma, seu repositório do GitHub não está repleto de dados de imagem e você pode facilmente adicionar marcação ao seu site para solicitar cortes e tamanhos de imagens otimizados no momento da solicitação. Eu tentei isso em meus próprios sites maiores e fiquei muito feliz com a capacidade de resposta e a facilidade de configuração.

Lembra daquele formulário de contato que foi instalado com nosso clichê? Ele apenas funciona. Ao enviar o formulário de contato, você verá os envios na seção de administração da Netlify. Selecione “Formulários” para o seu site. Você pode configurar o Netlify para enviar um e-mail a você quando receber um novo envio de formulário e também pode adicionar uma página de confirmação personalizada no código do seu formulário. Crie uma página em seu site em /contact/success , por exemplo, e, em seguida, dentro de sua tag de form (em form.njk ), adicione action="/contact/success" para redirecionar os usuários para lá depois que o formulário for enviado.

O clichê também configura o site a ser usado com o gerenciador de conteúdo da Netlify. Configurar isso para funcionar bem para uma pessoa não técnica está além do escopo do artigo, mas você pode definir modelos e fazer atualizações no gerenciador de conteúdo do Netlify sincronizar de volta ao GitHub e acionar reimplantações automáticas do seu site. Se você estiver confortável com o fluxo de trabalho de fazer atualizações no markdown e enviá-las para o GitHub, esse recurso provavelmente é algo que você não precisa.

• Site Convertido Final (Resultado)
• Repositório do GitHub

Leitura adicional

Aqui estão alguns links para recursos usados ​​ao longo deste tutorial e alguns outros conceitos mais avançados, se você quiser se aprofundar.

• “Como a Smashing Magazine gerencia o conteúdo: migração do WordPress para o JAMstack”, Sarah Drasner
• “Desenvolvimento Web Moderno no JAMstack”, Mathias Biilmann & Phil Hawksworth
• “Eleventy é um gerador de site estático mais simples”, Eleventy Docs
• “Projetos iniciais”, Eleventy Docs
• “Documentos de mídia grandes”, Netlify
• “Opções de configuração,” Netlify CMS
• “12 coisas que aprendi depois de converter sites WordPress para Eleventy”, Scott Dawson