Jak przejść z WordPressa do generatora stron internetowych Eleventy?

Eleveny to statyczny generator witryn. Zagłębimy się w to, dlaczego chcesz użyć statycznego generatora witryn, zajmij się konwersją prostej witryny WordPress na Eleveny i porozmawiajmy o zaletach i wadach takiego zarządzania treścią. Chodźmy!

Co to jest statyczny generator witryn?

Rozpocząłem swoją karierę programisty kilkadziesiąt lat temu w połowie lat 90., kiedy HTML i CSS były jedynymi rzeczami, których potrzebowałeś do uruchomienia witryny. Te proste, statyczne strony internetowe były szybkie i responsywne. Jednak szybko do przodu do dnia dzisiejszego, a prosta strona internetowa może być dość skomplikowana.

W przypadku WordPressa zastanówmy się, co jest potrzebne do renderowania strony internetowej. PHP po stronie serwera WordPress, działający na serwerach hosta, wykonuje ciężkie zadania polegające na wysyłaniu zapytań do bazy danych MySQL o metadane i zawartość, wybiera odpowiednie wersje obrazów przechowywanych w statycznym systemie plików i łączy je wszystkie w szablon oparty na motywie przed zwrócenie go do przeglądarki. Jest to dynamiczny proces dla każdego żądania strony, chociaż większość stron internetowych, które widziałem generowane przez WordPress, nie jest tak dynamiczna. Większość odwiedzających, jeśli nie wszyscy, doświadcza identycznych treści.

Generatory stron statycznych przestawiają model z powrotem do tego podejścia sprzed kilkudziesięciu lat. Zamiast dynamicznie asemblować strony internetowe, statyczne generatory witryn pobierają treść w postaci Markdown, łączą ją z szablonami i tworzą statyczne strony internetowe. Ten proces odbywa się poza pętlą żądań, gdy użytkownicy przeglądają Twoją witrynę. Cała zawartość została wstępnie wygenerowana i jest błyskawicznie serwowana na każde żądanie. Serwery internetowe robią dosłownie to, co reklamują: obsługują. Brak bazy danych. Brak wtyczek innych firm. Tylko czysty HTML, CSS, JavaScript i obrazy. Ten uproszczony stos technologii oznacza również mniejszą powierzchnię ataku hakerów. Istnieje niewielka infrastruktura po stronie serwera do wykorzystania, więc Twoja witryna jest z natury bezpieczniejsza.

Wiodące statyczne generatory witryn są również bogate w funkcje, co może stanowić przekonujący argument za licytowaniem stosów technologii, które są cechami charakterystycznymi nowoczesnych systemów zarządzania treścią.

Jeśli jesteś w tej branży od jakiegoś czasu, być może pamiętasz produkt Dreamweaver firmy Macromedia (przed Adobe). Podobała mi się koncepcja elementów biblioteki i szablonów, w szczególności sposób, w jaki pozwalają mi tworzyć spójność na wielu stronach internetowych. W przypadku Eleveny koncepcje szablonów, filtrów, skrótów i wtyczek są bliskimi analogami. Zacząłem tę całą podróż po przeczytaniu o konwersji firmy Smashing na JamStack. Przeczytałem też darmową książkę Mathiasa Biilmanna i Phila Hawkswortha zatytułowaną Modern Web Development na JAMstack i wiedziałem, że jestem gotów zakasać rękawy i przekonwertować coś własnego.

Dlaczego nie skorzystać ze statycznego generatora witryn?

Generatory stron statycznych wymagają trochę nauki. Nie będziesz w stanie łatwo przekazać funkcji redakcyjnych do wprowadzania treści, a określone przypadki użycia mogą uniemożliwić korzystanie z nich. Większość pracy, którą pokażę, jest wykonywana w Markdown i za pomocą wiersza poleceń. To powiedziawszy, istnieje wiele opcji korzystania ze statycznych generatorów witryn w połączeniu z dynamicznymi systemami danych, e-commerce, komentowania i oceniania.

Nie musisz też konwertować całej witryny na raz. Jeśli masz skomplikowaną konfigurację, możesz zacząć od małych rzeczy i zobaczyć, co myślisz o statycznej generacji witryn, zanim przygotujesz plan rozwiązania czegoś na skalę przedsiębiorstwa. Możesz także nadal używać WordPressa jako najlepszego w swojej klasie bezgłowego systemu zarządzania treścią i używać SSG do obsługi treści WordPress.

Jak wybrałem Eleveny jako generator stron statycznych?

Wykonaj szybkie wyszukiwanie popularnych generatorów stron statycznych, a na początek znajdziesz wiele świetnych opcji: Eleveny, Gatsby, Hugo i Jekyll byli czołowymi rywalami na mojej liście. Jak wybrać? Zrobiłem to, co przyszło naturalnie i poprosiłem kilku przyjaciół. Jedenaście było wyraźnym liderem w mojej ankiecie na Twitterze, ale utwierdził to komentarz, który mówił: „@eleven_ty jest bardzo przystępne, jeśli ktoś nie wie, co robi”. Hej, to ja! Mogę nieszczęśliwie wpaść w paraliż analizy. Nie dzisiaj… fajnie było wybrać Eleveny na podstawie ankiety i komentarza. Od tego czasu przekonwertowałem cztery witryny WordPress na Eleveny, używając GitHub do przechowywania kodu i Netlify do bezpiecznego udostępniania plików. Dokładnie to zrobimy dzisiaj, więc zakasajmy rękawy i zanurkujmy!

Pierwsze kroki: Bootstrapping strony początkowej

Eleveny ma świetną kolekcję projektów startowych. Jako punkt wyjścia użyjemy eleventy-netlify-boilerplate Dana Urbanowicza, reklamowanego jako „szablon do zbudowania prostej witryny blogowej z Eleventy i wdrożenia jej w Netlify. Obejmuje Netlify CMS i Netlify Forms.” Kliknij „Wdróż w netlify”, aby rozpocząć. Zostaniesz poproszony o połączenie Netlify z GitHub, nazwanie repozytorium (nazywam moje smashing-eleventy-dawson), a następnie „Save & Deploy”.

Po wykonaniu tych czynności wydarzyło się kilka rzeczy:

1. Projekt szablonowy został dodany do Twojego konta GitHub.
2. Netlify przypisał projektowi dynamiczną nazwę, zbudował go i wdrożył.
3. Netlify skonfigurowało projekt do korzystania z Tożsamości (jeśli chcesz korzystać z funkcji CMS) i Formularzy (prosty formularz kontaktowy).

Jak sugeruje zrzut ekranu, możesz pozyskać lub zmapować domenę do projektu, a także zabezpieczyć witrynę za pomocą protokołu HTTPS. Ta ostatnia funkcja była dla mnie naprawdę atrakcyjnym punktem sprzedaży, ponieważ mój host pobierał wygórowaną opłatę za SSL. Na Netlify to nic nie kosztuje.

Kliknąłem Ustawienia witryny, a następnie Zmień nazwę witryny, aby utworzyć bardziej odpowiednią nazwę dla mojej witryny. O ile mi się podobało jovial-goldberg-e9f7e9, bardziej odpowiednie jest elizabeth-dawson-piano. W końcu to jest strona, którą konwertujemy! Kiedy odwiedzam elizabeth-dawson-piano.netlify.app, widzę zawartość szablonu. Świetny!

Pobierzmy nowe repozytorium na nasz lokalny komputer, abyśmy mogli zacząć dostosowywać witrynę. Moje repozytorium GitHub dla tego projektu udostępnia mi polecenie git clone, którego mogę użyć w terminalu Visual Studio Code do kopiowania plików:

• Klonuj git →

Następnie postępujemy zgodnie z pozostałymi instrukcjami w pliku README schematu, aby zainstalować zależności lokalnie, edytować plik _data/metadata.json , aby dopasować projekt i uruchomić projekt lokalnie.

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

Za pomocą tego ostatniego polecenia Eleventy uruchamia lokalną witrynę programistyczną na localhost:8080 i zaczyna obserwować zmiany.

Zachowywanie postów, stron i obrazów WordPress

Witryna, z której konwertujemy, to istniejąca witryna WordPress pod adresem elizabethrdawson.wordpress.com. Chociaż witryna jest prosta, dobrze byłoby wykorzystać jak najwięcej istniejącej zawartości. Nikt tak naprawdę nie lubi tak bardzo kopiować i wklejać, prawda? WordPress ułatwia korzystanie z funkcji eksportu.

Eksportuj zawartość daje mi plik zip zawierający wyciąg XML zawartości witryny. Eksportuj bibliotekę multimediów daje mi plik zip z obrazami witryny. Witryna, którą wybrałem jako model do tego ćwiczenia, jest prostą 3-stronicową witryną hostowaną w witrynie Wordpress.com. Jeśli prowadzisz własny hosting, możesz przejść do menu Narzędzia > Eksportuj, aby uzyskać wyciąg XML, ale w zależności od hosta może być konieczne użycie FTP w celu pobrania obrazów.

Jeśli otworzysz plik XML w swoim edytorze, na niewiele ci się on przyda. Potrzebujemy sposobu na umieszczenie poszczególnych postów w Markdown, czyli języku, którego będziemy używać w Eleveny. Na szczęście dla nas istnieje pakiet do konwersji postów i stron WordPress do Markdown. Sklonuj to repozytorium na swoją maszynę i umieść plik XML w tym samym katalogu. Twoja lista katalogowa powinna wyglądać mniej więcej tak:

Jeśli chcesz wyodrębnić posty z XML, zadziała to po wyjęciu z pudełka. Jednak nasza przykładowa witryna ma trzy strony, więc musimy dokonać niewielkiej korekty. W wierszu 39 parser.js zmień „post” na „page” przed kontynuowaniem.

Upewnij się, że wykonałeś „npm install” w katalogu wordpress-export-to-markdown , a następnie wpisz „node index.js” i postępuj zgodnie z instrukcjami.

Ten proces utworzył dla mnie trzy pliki: welcome.md , about.md i contact.md . W każdym z nich znajduje się przednia materia opisująca tytuł i datę strony oraz oznaczenie zawartości wyodrębnionej z kodu XML. „Przód” może być dla Ciebie nowym terminem, a jeśli spojrzysz na sekcję u góry przykładowych plików .md w katalogu „strony”, zobaczysz sekcję danych na górze pliku. Eleveny obsługuje różne tematy, które pomagają dostosować witrynę, a tytuł i data to dopiero początek. Na przykładowych stronach zobaczysz to w pierwszej sekcji sprawy:

 eleventyNavigation: key: Home order: 0

Korzystając z tej składni, możesz automatycznie dodawać strony do nawigacji witryny. Chciałem zachować to na moich nowych stronach, więc skopiowałem i wkleiłem zawartość stron do istniejących już standardowych plików .md dla domu, kontaktu i okolic. Nasza przykładowa witryna na razie nie będzie miała bloga, więc usuwam również pliki .md z katalogu „posts”. Teraz moja lokalna strona z podglądem wygląda tak, więc idziemy tam!

Wydaje się, że to dobry czas na zatwierdzenie i przekazanie aktualizacji do GitHub. Po zatwierdzeniu aktualizacji wydarzy się kilka rzeczy. Po powiadomieniu z GitHub, że dokonano aktualizacji, Netlify uruchamia kompilację i aktualizuje działającą witrynę. Jest to ten sam proces, który odbywa się lokalnie podczas aktualizowania i zapisywania plików: Eleveny konwertuje pliki Markdown na strony HTML. W rzeczywistości, jeśli zajrzysz do katalogu _site lokalnie, zobaczysz wersję HTML swojej witryny gotową do wyświetlania statycznego. Tak więc, gdy przechodzę do elizabeth-dawson-piano.netlify.app wkrótce po zatwierdzeniu, widzę te same aktualizacje, które widziałem lokalnie.

Dodawanie obrazów

Wykorzystamy obrazy z oryginalnej witryny. W pliku .eleventy.js zobaczysz, że statyczne zasoby graficzne powinny znajdować się w folderze static/img. Każda strona będzie miała obraz bohatera, i tutaj sprawa frontowa działa naprawdę dobrze. W przedniej części każdej strony dodam odniesienie do obrazu bohatera:

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

Jedenaście przechowuje układy stron w folderze _includes/layouts . base.njk jest używany przez wszystkie typy stron, więc dodamy ten kod tuż pod nawigacją, ponieważ tam chcemy nasz obraz bohatera.

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

Dołączyłem również tag obrazu do zdjęcia Elizabeth na stronie Informacje, używając klasy CSS, aby go wyrównać i nadać mu odpowiednie wypełnienie. Teraz jest dobry moment, aby się zaangażować i zobaczyć dokładnie, co się zmieniło.

Osadzanie odtwarzacza YouTube z wtyczką

Na stronie głównej znajduje się kilka filmów z YouTube. Użyjmy wtyczki, aby automatycznie utworzyć kod do umieszczenia na YouTube. eleventy-plugin-youtube-embed to świetna opcja do tego. Instrukcje instalacji są dość jasne: zainstaluj pakiet za pomocą npm, a następnie dołącz go do naszego pliku .eleventy.js . Bez dalszych zmian te adresy URL YouTube są przekształcane w wbudowane odtwarzacze. (patrz zatwierdzenie)

Korzystanie z kolekcji i filtrów

Nie potrzebujemy bloga na tej stronie, ale potrzebujemy sposobu na informowanie ludzi o nadchodzących wydarzeniach. Nasze wydarzenia — pod każdym względem — będą jak posty na blogu. Każdy ma tytuł, opis i datę.

Jest kilka kroków, które musimy wykonać, aby utworzyć tę nową stronę opartą na kolekcji:

• Utwórz nowy plik events.md w naszym katalogu stron.
• Dodaj kilka wydarzeń do naszego katalogu postów. Dodałem pliki .md na koncert wakacyjny, koncert wiosenny i recital jesienny.
• Utwórz definicję kolekcji w .eleventy.js , abyśmy mogli traktować te zdarzenia jako kolekcję. Oto jak definiuje się kolekcję: zbieramy wszystkie pliki Markdown w katalogu posts i odfiltrowujemy wszystko, co nie ma określonej lokalizacji we frontowej materii.

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

• Dodaj odwołanie do kolekcji do naszego pliku events.md , pokazując każde zdarzenie jako wpis w tabeli. Oto jak wygląda iteracja kolekcji:

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

Jednak nasze formatowanie daty wygląda dość źle.

Na szczęście plik boilerplate .eleventy.js ma już filtr o nazwie readableDate. Filtry zawartości w plikach i szablonach Markdown są łatwe:

 {{ post.date | readableDate }}

Teraz nasze daty są poprawnie sformatowane! Dokumentacja filtrów Eleventy zawiera więcej informacji o tym, jakie filtry są dostępne we frameworku i jak możesz dodać własne. (patrz: zatwierdź)

Polerowanie projektu strony za pomocą CSS

Ok, więc teraz mamy stworzoną całkiem solidną stronę. Mamy strony, zdjęcia bohaterów, listę wydarzeń i formularz kontaktowy. Nie jesteśmy ograniczeni wyborem żadnego motywu, więc możemy zrobić co tylko zechcemy z projektem witryny… niebo jest granicą! Od Ciebie zależy, czy Twoja witryna będzie wydajna, responsywna i estetyczna. Wprowadziłem kilka zmian w stylu i znacznikach, aby wprowadzić rzeczy do naszego ostatecznego zatwierdzenia.

Teraz możemy opowiedzieć światu o całej naszej ciężkiej pracy. Opublikujmy tę stronę.

Publikowanie Witryny

Och, ale czekaj. To już opublikowane! Pracowaliśmy w tym przyjemnym przepływie pracy przez cały czas, w którym nasze aktualizacje GitHub automatycznie rozprzestrzeniają się do Netlify i są przebudowywane w świeży, szybki kod HTML. Aktualizacje są tak proste, jak naciśnięcie git. Netlify wykrywa zmiany z git, przetwarza przeceny na HTML i obsługuje stronę statyczną. Kiedy skończysz i będziesz gotowy na niestandardową domenę, Netlify pozwoli Ci korzystać z istniejącej domeny za darmo. Odwiedź Ustawienia witryny > Zarządzanie domeną, aby uzyskać szczegółowe informacje, w tym sposób wykorzystania bezpłatnego certyfikatu HTTPS Netlify z własną domeną.

Zaawansowane: obrazy, formularze kontaktowe i zarządzanie treścią

To była prosta strona z zaledwie kilkoma obrazami. Możesz mieć jednak bardziej skomplikowaną witrynę. Usługa Netlify Large Media umożliwia przesyłanie obrazów w pełnej rozdzielczości do GitHub i przechowuje wskaźnik do obrazu w Large Media. W ten sposób Twoje repozytorium GitHub nie jest przeładowane danymi graficznymi i możesz łatwo dodać znaczniki do swojej witryny, aby zażądać zoptymalizowanych przycięć i rozmiarów obrazów w czasie żądania. Próbowałem tego na moich większych witrynach i byłem naprawdę zadowolony z szybkości reakcji i łatwości konfiguracji.

Pamiętasz ten formularz kontaktowy, który został zainstalowany wraz z naszym boilerplate? To po prostu działa. Po przesłaniu formularza kontaktowego zobaczysz zgłoszenia w sekcji administracji Netlify. Wybierz „Formularze” dla swojej witryny. Możesz skonfigurować Netliify, aby wysyłała Ci e-maile, gdy otrzymasz nowy formularz, a także możesz dodać niestandardową stronę potwierdzenia w kodzie formularza. Utwórz stronę w swojej witrynie na przykład pod adresem /contact/success , a następnie w tagu form (w form.njk ) dodaj action="/contact/success" , aby przekierować tam użytkowników po przesłaniu formularza.

Standardowa konfiguracja również konfiguruje witrynę do użycia z menedżerem treści Netlify. Skonfigurowanie tego, aby działało dobrze dla osoby nietechnicznej, wykracza poza zakres tego artykułu, ale możesz zdefiniować szablony i zsynchronizować aktualizacje wprowadzone w menedżerze treści Netlify z powrotem do GitHub i uruchomić automatyczne ponowne wdrożenia witryny. Jeśli jednak czujesz się komfortowo z przepływem pracy polegającym na wprowadzaniu aktualizacji w przecenach i przekazywaniu ich do GitHub, ta funkcja jest prawdopodobnie czymś, czego nie potrzebujesz.

• Ostateczna konwersja witryny (wynik)
• Repozytorium GitHub

Dalsza lektura

Oto kilka linków do zasobów używanych w tym samouczku oraz inne bardziej zaawansowane koncepcje, jeśli chcesz zagłębić się w szczegóły.

• „Jak Smashing Magazine zarządza treściami: migracja z WordPressa do JAMstack”, Sarah Drasner
• „Nowoczesne tworzenie stron internetowych na JAMstack”, Mathias Biilmann i Phil Hawksworth
• „Eleventy to prostszy generator stron statycznych”, Eleventy Docs
• „Projekty startowe”, Jedenaście dokumentów
• „Duża dokumentacja multimedialna”, Netlify
• „Opcje konfiguracji”, Netlify CMS
• „12 rzeczy, których nauczyłem się po przekonwertowaniu witryn WordPress na jedenaście”, Scott Dawson