Cum să migrați de la WordPress la generatorul de site Eleventy Static

Eleventy este un generator de site static. Vom analiza de ce ați dori să utilizați un generator de site-uri static, să treceți la miezul conversiei unui site WordPress simplu în Eleventy și să vorbim despre avantajele și dezavantajele gestionării conținutului în acest fel. Să mergem!

Ce este un generator de site static?

Mi-am început cariera de dezvoltare web cu zeci de ani în urmă, la mijlocul anilor 1990, când HTML și CSS erau singurele lucruri de care aveai nevoie pentru a pune în funcțiune un site web. Acele site-uri web simple, statice au fost rapide și receptive. Cu toate acestea, înainte rapid până în ziua de azi, iar un site web simplu poate fi destul de complicat.

În cazul WordPress, să ne gândim la ce este nevoie pentru a reda o pagină web. PHP de pe serverul WordPress, care rulează pe serverele unei gazde, face munca grea de a interoga o bază de date MySQL pentru metadate și conținut, alege versiunile corecte de imagini stocate pe un sistem de fișiere static și le îmbină pe toate într-un șablon bazat pe teme înainte returnându-l în browser. Este un proces dinamic pentru fiecare solicitare de pagină, deși majoritatea paginilor web pe care le-am văzut generate de WordPress nu sunt chiar atât de dinamice. Majoritatea vizitatorilor, dacă nu toți, experimentează conținut identic.

Generatorii statici de site răsturnează modelul la acea abordare veche de zeci de ani. În loc să asambleze pagini web în mod dinamic, generatorii de site-uri statice preiau conținutul sub formă de Markdown, îl îmbină cu șabloane și creează pagini web statice. Acest proces are loc în afara buclei de solicitare atunci când utilizatorii navighează pe site-ul dvs. Tot conținutul a fost pre-generat și este servit rapid la fiecare solicitare. Serverele web fac literalmente ceea ce fac publicitate: deservesc. Nicio bază de date. Fără pluginuri terță parte. Doar pur HTML, CSS, JavaScript și imagini. Această stivă tehnologică simplificată echivalează, de asemenea, cu o suprafață de atac mai mică pentru hackeri. Există o mică infrastructură pe partea serverului de exploatat, astfel încât site-ul dvs. este în mod inerent mai sigur.

Generatorii de site-uri statice de top sunt, de asemenea, bogate în funcții, și acest lucru poate constitui un argument convingător pentru a ne renunța la stack-urile tehnologice care sunt semnele distinctive ale sistemelor moderne de management al conținutului.

Dacă sunteți în această industrie de ceva timp, s-ar putea să vă amintiți produsul Dreamweaver Macromedia (pre-Adobe). Mi-a plăcut conceptul de articole și șabloane de bibliotecă, în special modul în care îmi permit să creez coerență în mai multe pagini web. În cazul lui Eleventy, conceptele de șabloane, filtre, coduri scurte și pluginuri sunt analoge apropiate. Am început toată această călătorie după ce am citit despre conversia companiei Smashing în JamStack. De asemenea, am citit cartea gratuită a lui Mathias Biilmann și Phil Hawksworth intitulată Modern Web Development pe JAMstack și am știut că sunt gata să-mi suflec mânecile și să convertesc ceva de-al meu.

De ce să nu folosiți un generator de site static?

Generatoarele statice de site necesită un pic de curbă de învățare. Nu veți putea transfera cu ușurință funcțiile editoriale pentru a introduce conținut, iar cazurile de utilizare specifice vă pot împiedica să utilizați una. Cea mai mare parte a muncii pe care o voi arăta este realizată în Markdown și prin linia de comandă. Acestea fiind spuse, există multe opțiuni pentru utilizarea generatoarelor de site statice împreună cu sistemele de date dinamice, comerț electronic, comentarii și evaluare.

Nici nu trebuie să vă convertiți întregul site dintr-o dată. Dacă aveți o configurare complicată, ați putea începe cu puțin și să vedeți ce părere aveți despre generarea de site-uri statice înainte de a elabora un plan pentru a rezolva ceva la scară întreprindere. De asemenea, puteți continua să utilizați WordPress ca cel mai bun sistem de gestionare a conținutului fără cap și să utilizați un SSG pentru a furniza conținut WordPress.

Cum am ales Eleventy ca generator de site static

Faceți o căutare rapidă pentru generatoare de site-uri statice populare și veți găsi multe opțiuni grozave pentru a începe: Eleventy, Gatsby, Hugo și Jekyll erau candidații fruntași pe lista mea. Cum să alegi? Am făcut ce mi-a venit de la sine și am întrebat niște prieteni. Eleventy a fost un lider clar în sondajul meu Twitter, dar ceea ce a confirmat a fost un comentariu care spunea „@eleven_ty se simte foarte accesibil dacă nu știe ce face”. Hei, asta sunt eu! Din nefericire, pot fi prins în paralizia analizei. Nu astăzi... m-am simțit bine să aleg Eleventy pe baza unui sondaj și a unui comentariu. De atunci, am convertit patru site-uri WordPress în Eleventy, folosind GitHub pentru a stoca codul și Netlify pentru a servi fișierele în siguranță. Exact asta vom face astăzi, așa că hai să ne suflecăm mânecile și să ne scufundăm!

Noțiuni introductive: Bootstrapping site-ului inițial

Eleventy are o colecție grozavă de proiecte inițiale. Vom folosi planul final al lui Dan Urbanowicz ca punct de plecare, promovat ca un „șablon pentru construirea unui site web de blog simplu cu Eleventy și implementarea lui în Netlify. Include Netlify CMS și Netlify Forms.” Faceți clic pe „Deploy to netlify” pentru a începe. Vi se va solicita să conectați Netlify la GitHub, să vă denumiți depozitul (eu îl numesc pe al meu smashing-eleventy-dawson), apoi „Salvați și implementați”.

Făcând asta, s-au întâmplat câteva lucruri:

1. Proiectul boilerplate a fost adăugat la contul tău GitHub.
2. Netlify a atribuit un nume dinamic proiectului, l-a construit și l-a implementat.
3. Netlify a configurat proiectul să utilizeze Identity (dacă doriți să utilizați funcțiile CMS) și Forms (un simplu formular de contact).

După cum sugerează captura de ecran, puteți procura sau mapa un domeniu la proiect și, de asemenea, puteți securiza site-ul cu HTTPS. Ultima caracteristică a fost un motiv de vânzare cu adevărat convingător pentru mine, deoarece gazda mea a perceput o taxă exorbitantă pentru SSL. Pe Netlify, este gratuit.

Am făcut clic pe Setări site, apoi pe Schimbați numele site-ului pentru a crea un nume mai potrivit pentru site-ul meu. Oricât de mult mi-a plăcut jovial-goldberg-e9f7e9, elizabeth-dawson-piano este mai potrivit. La urma urmei, acesta este site-ul pe care îl transformăm! Când vizitez elizabeth-dawson-piano.netlify.app, văd conținutul standard. Minunat!

Să descarcăm noul depozit pe mașina noastră locală, astfel încât să putem începe personalizarea site-ului. Depozitul meu GitHub pentru acest proiect îmi oferă comanda git clone pe care o pot folosi în terminalul Visual Studio Code pentru a copia fișierele:

• Clonează git →

Apoi urmăm instrucțiunile rămase din fișierul README al boilerplate pentru a instala dependențe la nivel local, editam fișierul _data/metadata.json pentru a se potrivi cu proiectul și rulăm proiectul local.

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

Cu această ultimă comandă, Eleventy lansează site-ul de dezvoltare locală la localhost:8080 și începe să urmărească modificările.

Păstrarea postărilor, paginilor și imaginilor WordPress

Site-ul din care facem conversia este un site WordPress existent la elizabethrdawson.wordpress.com. Deși site-ul este simplu, ar fi grozav să profitați cât mai mult posibil din acel conținut existent. Nimănui nu-i place să copieze și să lipească atât de mult, nu? WordPress facilitează utilizarea funcției de export.

Export Content îmi oferă un fișier zip care conține un extras XML al conținutului site-ului. Export Media Library îmi oferă un fișier zip cu imaginile site-ului. Site-ul pe care am ales să îl folosesc ca model pentru acest exercițiu este un site simplu de 3 pagini și este găzduit pe Wordpress.com. Dacă vă găzduiți singur, puteți accesa Instrumente > Export pentru a obține extrasul XML, dar, în funcție de gazdă, poate fi necesar să utilizați FTP pentru a descărca imaginile.

Dacă deschideți fișierul XML în editorul dvs., acesta vă va fi de puțin folos. Avem nevoie de o modalitate de a introduce postări individuale în Markdown, care este limbajul pe care îl vom folosi cu Eleventy. Din fericire pentru noi, există un pachet pentru conversia postărilor și paginilor WordPress în Markdown. Clonați acel depozit pe mașina dvs. și puneți fișierul XML în același director. Lista dvs. de director ar trebui să arate cam așa:

Dacă doriți să extrageți postări din XML, acest lucru va funcționa imediat. Cu toate acestea, site-ul nostru exemplu are trei pagini, așa că trebuie să facem o mică ajustare. Pe linia 39 din parser.js , schimbați „post” în „pagină” înainte de a continua.

Asigurați-vă că faceți o „instalare npm” în directorul wordpress-export-to-markdown , apoi introduceți „node index.js” și urmați instrucțiunile.

Procesul a creat trei fișiere pentru mine: welcome.md , about.md și contact.md . În fiecare, există subiectul frontal care descrie titlul și data paginii și Markdown-ul conținutului extras din XML. „Materia primară” poate fi un termen nou pentru dvs., iar dacă vă uitați la secțiunea din partea de sus a fișierelor eșantion .md din directorul „pagini”, veți vedea o secțiune de date în partea de sus a fișierului. Eleventy acceptă o varietate de subiecte frontale pentru a vă ajuta să vă personalizați site-ul, iar titlul și data sunt doar începutul. În paginile exemplu, veți vedea acest lucru în secțiunea principală:

 eleventyNavigation: key: Home order: 0

Folosind această sintaxă, puteți adăuga pagini automat la navigarea site-ului. Am vrut să păstrez acest lucru cu noile mele pagini, așa că am copiat și lipit conținutul paginilor în fișierele boilerplate .md existente pentru acasă, contact și despre. Site-ul nostru exemplu nu va avea blog deocamdată, așa că șterg și fișierele .md din directorul „postări”. Acum site-ul meu local de previzualizare arată așa, așa că ajungem acolo!

Acesta pare a fi un moment bun pentru a te angaja și a împinge actualizările către GitHub. Câteva lucruri se întâmplă când commit actualizări. După notificarea de la GitHub că au fost făcute actualizări, Netlify rulează versiunea și actualizează site-ul live. Este același proces care se întâmplă la nivel local atunci când actualizați și salvați fișiere: Eleventy convertește fișierele Markdown în pagini HTML. De fapt, dacă vă uitați în directorul dvs. _site la nivel local, veți vedea versiunea HTML a site-ului dvs., gata pentru difuzare statică. Așadar, în timp ce navighez la elizabeth-dawson-piano.netlify.app la scurt timp după comitere, văd aceleași actualizări pe care le-am văzut la nivel local.

Adăugarea de imagini

Vom folosi imagini de pe site-ul original. În fișierul .eleventy.js , veți vedea că elementele de imagine statică ar trebui să meargă în folderul static/img. Fiecare pagină va avea o imagine de erou și aici este locul în care materia frontală funcționează foarte bine. În secțiunea principală a fiecărei pagini, voi adăuga o referință la imaginea eroului:

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

Eleventy păstrează aspectele de pagină în folderul _includes/layouts . base.njk este folosit de toate tipurile de pagini, așa că vom adăuga acest cod chiar sub navigare, deoarece acolo dorim imaginea eroului nostru.

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

Am inclus, de asemenea, o etichetă de imagine pentru imaginea lui Elizabeth pe pagina Despre, folosind o clasă CSS pentru a o alinia și a-i oferi o umplutură adecvată. Acum este un moment bun să te angajezi și să vezi exact ce s-a schimbat.

Încorporarea unui player YouTube cu un plugin

Există câteva videoclipuri YouTube pe pagina de pornire. Să folosim un plugin pentru a crea automat codul de încorporare al Youtube. eleventy-plugin-youtube-embed este o opțiune excelentă pentru aceasta. Instrucțiunile de instalare sunt destul de clare: instalați pachetul cu npm și apoi includeți-l în fișierul nostru .eleventy.js . Fără alte modificări, acele adrese URL YouTube sunt transformate în playere încorporate. (vezi comitere)

Utilizarea colecțiilor și filtrelor

Nu avem nevoie de un blog pentru acest site, dar avem nevoie de o modalitate de a informa oamenii despre evenimentele viitoare. Evenimentele noastre – pentru toate scopurile – vor fi exact ca postările de pe blog. Fiecare are un titlu, o descriere și o dată.

Există câțiva pași de care avem nevoie pentru a crea această nouă pagină bazată pe colecții:

• Creați un nou fișier events.md în directorul paginilor noastre.
• Adăugați câteva evenimente în directorul nostru de postări. Am adăugat fișiere .md pentru un concert de vacanță, un concert de primăvară și un recital de toamnă.
• Creați o definiție de colecție în .eleventy.js , astfel încât să putem trata aceste evenimente ca pe o colecție. Iată cum este definită colecția: adunăm toate fișierele Markdown în directorul de postări și filtram tot ceea ce nu are o locație specificată în prima pagină.

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

• Adăugați o referință la colecție în fișierul nostru events.md , arătând fiecare eveniment ca o intrare într-un tabel. Iată cum arată repetarea unei colecții:

 <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>

Cu toate acestea, formatarea datei arată destul de prost.

Din fericire, fișierul boilerplate .eleventy.js are deja un filtru intitulat readableDate. Este ușor să utilizați filtre pentru conținut din fișierele și șabloanele Markdown:

 {{ post.date | readableDate }}

Acum, datele noastre sunt formatate corect! Documentația de filtrare a lui Eleventy detaliază ce filtre sunt disponibile în cadru și cum le puteți adăuga pe ale dvs. (vezi: comite)

Lustruirea designului site-ului cu CSS

Bine, deci acum avem un site destul de solid creat. Avem pagini, imagini cu eroi, o listă de evenimente și un formular de contact. Nu suntem constrânși de alegerea vreunei teme, așa că putem face ce vrem cu designul site-ului... cerul este limita! Depinde de dvs. să vă faceți site-ul performant, receptiv și plăcut din punct de vedere estetic. Am făcut câteva modificări de stil și de marcare pentru a duce lucrurile la angajamentul nostru final.

Acum putem spune lumii despre toată munca noastră grea. Să publicăm acest site.

Publicarea Site-ului

Oh, dar stai. Este deja publicat! Am lucrat tot timpul la acest flux de lucru frumos, în care actualizările noastre pentru GitHub se propagă automat la Netlify și sunt reconstruite în HTML proaspăt și rapid. Actualizările sunt la fel de ușoare ca un git push. Netlify detectează modificările de la git, procesează markdown în HTML și servește site-ul static. Când ați terminat și gata pentru un domeniu personalizat, Netlify vă permite să utilizați gratuit domeniul dvs. existent. Accesați Setări site > Managementul domeniului pentru toate detaliile, inclusiv modul în care puteți utiliza certificatul HTTPS gratuit Netlify cu domeniul dvs. personalizat.

Avansat: imagini, formulare de contact și management de conținut

Acesta a fost un site simplu, cu doar câteva imagini. Este posibil să aveți un site mai complicat, totuși. Serviciul Large Media de la Netlify vă permite să încărcați imagini cu rezoluție completă în GitHub și stochează un indicator către imagine în Large Media. În acest fel, depozitul dvs. GitHub nu este plin de date de imagine și puteți adăuga cu ușurință markup site-ului dvs. pentru a solicita decupări și dimensiuni optimizate ale imaginilor la momentul solicitării. Am încercat acest lucru pe propriile mele site-uri mai mari și am fost foarte mulțumit de capacitatea de răspuns și ușurința de configurare.

Vă amintiți formularul de contact care a fost instalat împreună cu placa noastră de referință? Pur și simplu funcționează. Când trimiteți formularul de contact, veți vedea trimiterile în secțiunea de administrare a Netlify. Selectați „Formulare” pentru site-ul dvs. Puteți configura Netlify să vă e-mail atunci când primiți un nou formular și puteți adăuga, de asemenea, o pagină de confirmare personalizată în codul formularului. Creați o pagină pe site-ul dvs. la /contact/success , de exemplu, și apoi în eticheta form (în form.njk ), adăugați action="/contact/success" pentru a redirecționa utilizatorii acolo odată ce formularul a fost trimis.

De asemenea, boilerplate configurează site-ul pentru a fi utilizat cu managerul de conținut Netlify. Configurarea acestui lucru pentru a funcționa bine pentru o persoană fără tehnică depășește domeniul de aplicare al articolului, dar puteți defini șabloane și puteți face actualizările făcute în managerul de conținut Netlify să se sincronizeze înapoi cu GitHub și să declanșeze redistribuiri automate ale site-ului dvs. Dacă sunteți confortabil cu fluxul de lucru de a face actualizări în markdown și de a le împinge către GitHub, totuși, această capacitate este probabil ceva de care nu aveți nevoie.

• Site-ul final convertit (rezultat)
• Depozitul GitHub

Lectură suplimentară

Iată câteva link-uri către resurse utilizate în acest tutorial și alte concepte mai avansate dacă doriți să vă aprofundați.

• „Cum Smashing Magazine gestionează conținutul: migrarea de la WordPress la JAMstack”, Sarah Drasner
• „Dezvoltare web modernă pe JAMstack”, Mathias Biilmann și Phil Hawksworth
• „Eleventy este un generator de site static mai simplu”, Eleventy Docs
• „Proiecte de început”, Eleventy Docs
• „Large Media Docs”, Netlify
• „Opțiuni de configurare”, Netlify CMS
• „12 lucruri pe care le-am învățat după ce am convertit site-urile WordPress în Eleventy”, Scott Dawson