Przewodnik po statycznych generatorach witryn korzystających z Hexo i WordPress

Generatory witryn statycznych to systemy, które kompilują szablony w statyczne strony HTML. Jeśli to brzmi wydajnie – tak, to prawda. Nie ma przetwarzania ani renderowania przez serwer, więc statyczne witryny internetowe są zwykle bardzo szybkie i lekkie, co oszczędza Tobie i Twoim użytkownikom cenny czas i przepustowość. Ta zwiększona wydajność znajduje odzwierciedlenie w niższych kosztach i potencjalnie wyższych przychodach.

Od optymalizacji WordPressa do statyki

Mówiąc o wydajnych generatorach przychodów, przychodzi na myśl WordPress. Obsługuje 28 procent Internetu i jest potężną platformą z wieloma wspaniałymi funkcjami, w tym rozbudowanym zarządzaniem użytkownikami i treścią wspieranym przez szereg wtyczek, motywów, interfejsów API itp.

Nawet najwięksi gracze w naszej branży korzystają z WordPressa. Strony internetowe, takie jak Smashing Magazine i CSS-Tricks , korzystają z WordPressa, choć w obu przypadkach są one znacznie spersonalizowane. Jednak praca z WordPressem może być żmudnym zadaniem, zwłaszcza podczas dostosowywania i optymalizacji pod kątem wydajności.

Założyłem mały blog w 2015 roku. Moim pierwszym odruchem było korzystanie z WordPressa. To dało mi szybki start, ponieważ pracowałem już z WordPressem. Stworzyłem nowy droplet na DigitalOcean jako serwer, założyłem Vesta jako Hosting Control Panel i zainstalowałem WordPress jako platformę blogową. Ostatecznie zaprojektowałem i opracowałem zupełnie nowy motyw WordPress. Brakowało tylko treści.

Wiedziałem, że chcę podzielić się kilkoma wskazówkami na temat Atom, ponieważ korzystałem wtedy z tego świetnego edytora. Opublikowałem kilka artykułów na ten temat i podzieliłem się nimi ze społecznością.

Na początku nie zwracałem zbytniej uwagi na wydajność, ponieważ byłem zbyt skupiony na treści. Po chwili zauważyłem pewne problemy z wydajnością. Wynik w Google PageSpeed ​​Insights był kiepski, więc ciężko pracowałem, aby naprawić i zoptymalizować moją witrynę, uzyskując prawie doskonały wynik 99/100:

• Zmieniłem Nginx+Apache na Nginx+PHP-FPM.

• Użyłem CloudFlare dla szybkości i ochrony.

• Użyłem Cloudinary do hostowania obrazów.

• Poprawiłem swój motyw i użyłem krytycznego CSS.

Jedyne ostrzeżenie dotyczyło problemu z buforowaniem Google Analytics, którego wtedy nie wiedziałem, jak go naprawić.

Ale co, jeśli 99/100 lub 100/100 nadal nie zapewniają pożądanej wydajności? W tym miejscu do walki wkraczają statyczne generatory stron.

Wprowadź statyczne generatory stron i Hexo

Czym więc jest generator stron statycznych?

Jak sama nazwa wskazuje, generator statycznych stron internetowych to system generujący statyczne pliki HTML. Udostępnianie statycznych plików HTML jest znacznie szybsze niż tworzenie stron w locie. Brak renderowania lub kompilacji serwera, co często powoduje opóźnienia w ładowaniu strony.

Mówiąc o wydajności, trzeba pomyśleć o buforowaniu. Chociaż istnieje wiele technik buforowania WordPressa, zwykle nie jest to proste zadanie, w przeciwieństwie do buforowania plików statycznych. Udostępnianie plików z pamięci podręcznej jest bardziej wydajne niż udostępnianie rzeczywistych plików z serwera i pozwala zaoszczędzić czas podczas ładowania stron internetowych.

W czerwcu tego roku Vitaly Friedman ze Smashing Magazine przedstawił JAMstack na warsztatach w moim mieście. Nigdy o tym nie słyszałem i byłem bardzo zaintrygowany. Po zakończeniu seminarium przez chwilę przestudiowałem tę nową koncepcję i zdałem sobie sprawę, jaka jest wspaniała. Zdałem sobie sprawę, że moja strona internetowa nie potrzebuje WordPressa.

Pierwszym krokiem było podjęcie decyzji, którego generatora stron statycznych użyć. Nie wiedziałem, ile ich jest. Postanowiłem wypróbować framework bloga Hexo. Można go wdrożyć w Netlify, ma wtyczkę do migracji z WordPressa i używa Node.js, który znam, w przeciwieństwie do Jekylla i Hugo, które są oparte odpowiednio na Ruby i Go. I, jak odkryłem później, jest bardzo szybki.

Migracja WordPressa do Hexo

Instalacja Hexo jest tak prosta, jak to tylko możliwe. Zainstaluj hexo-cli globalnie za pomocą npm, uruchom polecenie hexo init , zainstaluj zależności npm i voila:

 npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install

Aby dokonać migracji, zainstaluj wtyczkę hexo-migrator-wordpress. Ta wtyczka oczekuje plików XML jako źródła. Pliki XML można wyeksportować za pomocą narzędzia do eksportu WordPress, które można znaleźć w panelu administracyjnym w menu Narzędzia -> Eksport -> Wordpress . Na koniec wpisz polecenie hexo migrate , aby zakończyć importowanie.

 hexo migrate wordpress <source>

Pozostało tylko sprawdzić wynik. Uruchom polecenie serwera hexo, aby uruchomić serwer i otworzyć przeglądarkę pod podanym adresem.

 hexo server

Przecena i jej ograniczenia

Hexo obsługuje Markdown po wyjęciu z pudełka. Markdown to język znaczników, którego wielu używa do formatowania plików README, komentarzy i postów. Ale może być również użyty do napisania twojego artykułu. Jego składnia jest intuicyjna i łatwa do nauczenia.

Kolejną zaletą Markdown jest to, że generuje czysty i poprawny kod HTML. Pozwala to programistom na tworzenie przejrzystych i łatwych w utrzymaniu reguł CSS do stylizowania artykułów i stron na blogu.

Życie programisty nigdy nie jest łatwe. Często napotykamy problemy, które mogą spowodować, że będziemy spędzać czas na nieoczekiwanych rzeczach. Jeśli nauczymy się czegoś po drodze, to nie zmarnowaliśmy tego czasu i to dobrze. To samo spotkało mnie. Myślałem, że wszystko poszło dobrze, ponieważ nie było błędu kompilacji, ale potem zauważyłem, że niektóre rzeczy nie działają zgodnie z oczekiwaniami.

Na przykład dema Codepen nie zostały załadowane. Szukałem wtyczki Hexo i znalazłem ją. Niestety wtyczka ta nie była oficjalna i generowała niedopuszczalne błędy HTML. Chciałem przyczynić się do rozwiązania problemów, ale ostatnie żądanie ściągnięcia było nierozwiązane przez ponad półtora roku. Zdecydowałem, że łatwiej będzie rozwidlić repozytorium, naprawić problemy i opublikować wtyczkę na stronie Hexo, aby każdy mógł z niej korzystać. Wtyczka została zaakceptowana, zaktualizowałem zawartość, a dema Codepen działały jak czar.

Podobne problemy wystąpiły w przypadku osadzania CanIUse. Teraz, gdy wiedziałem, jak stworzyć wtyczkę Hexo, nie było wymówki, aby tego nie robić. Moja wtyczka hexo-caniuse również została opublikowana, podobnie jak moja wtyczka hexo-cloudinary do responsywnych obrazów ładowanych z Cloudinary CDN.

Przeprojektowanie i optymalizacja

Projekt strony internetowej jest raczej fundamentalny. Hexo oferuje garść motywów za darmo na oficjalnej stronie internetowej, ale chciałem mieć unikalny motyw dla mojej witryny Hexo. Po przeczytaniu dokumentacji i nauczeniu się, jak dostosowywać Hexo, zacząłem tworzyć oryginalny motyw od zera.

Do tworzenia nowych szablonów zdecydowałem się użyć EJS do tworzenia szablonów. Ponieważ nigdy nie pracowałem z EJS, widziałem w nim szansę na poznanie nowej składni szablonu. Jeśli nie lubisz EJS, Hexo zapewnia obsługę Swig, Haml lub mopsów za pośrednictwem wtyczek.

Podczas procesu przeprojektowania zwracałem szczególną uwagę na wydajność. Postępując zgodnie z najlepszymi praktykami, możemy jeszcze bardziej przyspieszyć naszą statyczną stronę internetową. Umieszczenie plików JavaScript na dole dokumentu i użycie techniki Critical CSS zapewnia najlepsze wrażenia dla odbiorców.

Optymalizacja SEO ma kluczowe znaczenie dla widoczności bloga w wyszukiwarkach takich jak Google. Hexo ma wbudowany helper do wstawiania danych Open Graph. Hexo używa plików YAML do przechowywania konfiguracji witryny i motywu. Użyłem pliku konfiguracyjnego motywu do skonfigurowania nazwy witryny, opisu i różnych identyfikatorów społecznościowych.

Dodanie Gulp lub Webpack do procesu kompilacji jest zawsze pomocne i zalecane. Użyłem Gulpa do minifikacji i kompresji plików CSS i JavaScript i wszystko było gotowe. Mogę go wdrożyć.

Netlifikuj

Netlify to platforma zapewniająca hosting stron internetowych i aplikacji z niesamowitą wydajnością. Reklamuje się jako zunifikowana platforma, która automatyzuje kod, aby tworzyć wydajne i łatwe w utrzymaniu strony internetowe.

Po prostu wciśnij swój kod, a my zajmiemy się resztą.

Jak można się spodziewać, konfiguracja witryny jest prosta:

1. Skonfiguruj domenę.

2. Zmień rekordy DNS.

3. Skonfiguruj kompilację i wdrożenie.

4. Włącz SSL.

Kiedy wszystko zostało skonfigurowane, przeprowadziłem kilka podstawowych testów, aby zobaczyć wyniki, w tym test szybkości witryny Pingdom, test strony internetowej i Testmysite.io. Wyniki były doskonałe, ponieważ witryna uzyskała najwyższe wyniki we wszystkich narzędziach.

CloudFlare

Pomimo doskonałych wyników, chciałem wypróbować CloudFlare, tylko po to, aby zobaczyć, jak bardzo przyspieszy to dodatkowo stronę. Na początku CloudFlare może być przytłaczający, ale nauka korzystania z niego ma fundamentalne znaczenie. Po skonfigurowaniu CloudFlare ponownie przeprowadziłem testy i wyniki były jeszcze lepsze.

Ostatnim testem był Google PageSpeed ​​Insights. Wynik wyniósł prawie 100% zarówno w wersji mobilnej, jak i stacjonarnej. Problemem było buforowanie przeglądarki Google Analytics. Udało mi się rozwiązać ten problem za pomocą aplikacji CloudFlare dla Google Analytics.

Ile to kosztuje?

Korzystanie z Hexo na Netlify z CloudFlare nic nie kosztuje.

Hexo to platforma typu open source, więc jest darmowa bez względu na to, jak zdecydujesz się z niej korzystać. Ma dużą społeczność i jest trzecim najpopularniejszym generatorem stron statycznych typu open source według StaticGen.

Netlify ma otwarty plan, który zapewnia nam świetne opcje hostingu. Obrazy są również hostowane na otwartym planie Cloudinary. Darmowy plan CloudFlare pozwala nam skonfigurować dużą liczbę reguł, które mogą przyspieszyć twoją i tak już szybką stronę internetową. Pozwala nam również rozwiązać problem z buforowaniem przeglądarki Google Analytics. Nie zapłaciłem też za domenę, ponieważ korzystałem z darmowej domeny osobistej dostarczonej przez rząd.

Taka konfiguracja projektu ograniczyła mój budżet do minimum. Jeśli potrzebujesz bardziej zaawansowanych funkcji dla swojego projektu, generator statycznych stron może nadal zaoszczędzić kilka dolarów.

Udostępnianie plików z pamięci podręcznej oznacza zmniejszenie wykorzystania procesora i przepustowości, co z kolei oznacza, że ​​możesz korzystać z tańszych planów hostingowych z mniej wydajnym sprzętem. Co więcej, Twoja witryna będzie znacznie szybsza, co oznacza, że ​​Twoi użytkownicy będą cieszyć się przeglądaniem zarówno na urządzeniach mobilnych, jak i stacjonarnych. A ponieważ prędkość ładowania strony może wpływać na rankingi w wyszukiwarce Google, Twoja witryna będzie miała wyższą pozycję w rankingu, zyskując jeszcze więcej odwiedzających.

Wszystko to oznacza, że ​​możesz przeznaczyć część swojego budżetu gdzie indziej – na przykład na promocję swojej witryny lub tworzenie dodatkowych treści, które pomogą uzyskać ciut większe przychody.

Przypadek generatorów stron statycznych

Migracja z WordPressa do statycznego generatora stron nie jest prostym zadaniem i zdecydowanie nie jest czymś, co powinien robić każdy użytkownik WordPressa. Jednak Hexo sprawiło, że przejście to było stosunkowo bezbolesne dzięki swoim wtyczkom, doskonałej dokumentacji i prostemu interfejsowi API.

Przed podjęciem decyzji, czy chcesz przeprowadzić migrację produktu do rozwiązania statycznego, musisz mieć świadomość ograniczeń związanych ze statycznymi generatorami stron, takich jak ograniczenia treści, krzywa uczenia się Markdown i kontrola wersji.

Należy również mieć świadomość, że Hexo to framework blogowy. Jest idealny dla programistów i osób zajmujących się technologią, które wiedzą, jak korzystać z edytora tekstu i terminala. Jeśli lubisz używać interfejsu internetowego do zarządzania treścią, istnieje wtyczka, która również zapewnia tę funkcjonalność. Nazywa się hexo-admin i jest dość popularny.

Jeśli już korzystasz z WordPressa, powinieneś zatrzymać się i zastanowić, z jakich funkcji WordPressa korzystasz, a które są niezbędne. Masz skomplikowaną strukturę treści? Czy korzystasz z zarządzania użytkownikami? Czy korzystasz z wielu wtyczek na swojej instancji WordPressa i czy wszystkie są niezbędne? Czy jesteś zadowolony z wydajności swojej strony?

Jeśli odpowiedź na większość lub wszystkie z tych pytań brzmi „nie”, jesteś gotowy do doładowania swojej witryny za pomocą statycznego generatora stron. W zależności od przypadku użycia i wymagań strony statyczne mogą pomóc zmaksymalizować wydajność przy jednoczesnej minimalizacji kosztów. Jeśli z drugiej strony wymagasz elastyczności WordPressa, prawdopodobnie nawet nie myślisz o takim posunięciu.