Moja strona ponownie "moja"

Migracja mojej strony opartej na WordPress do Hugo

Ponad dekad─Ö temu rozpocz─ů┼éem swoj─ů przygod─Ö ze stronami internetowymi pisanymi w notatniku i HTML-u, po czym nasta┼éy czasy WordPress’a (zacz─ů┼éem z nim przygody w 2008). Przez ten okres zbudowa┼éem kilkana┼Ťcie stron opartych w┼éa┼Ťnie na nim, z czego nadal zarz─ůdzam jeszcze kilkoma.

O ile wszystko dzia┼éa, to nie ma problemu. Na ka┼╝dym jednak kroku musz─Ö ┼Ťledzi─ç i sprawdza─ç, czy co┼Ť si─Ö na nich nie zepsu┼éo oraz pracowa─ç nad ich ci─ůg┼é─ů optymalizacj─ů.

Je┼╝eli chodzi o m├│j blog, zauwa┼╝y┼éem, ┼╝e wi─Öcej czasu po┼Ťwi─Öcam na dopieszczanie, poprawianie oraz zabezpieczanie strony a ni┼╝eli na tworzeniu wpis├│w.

Coraz to nowe zagro┼╝enia czy te┼╝ zmiany w algorytmach wyszukiwarki powoduj─ů konieczno┼Ť─ç ci─ůg┼éego dostosowywania do zmieniaj─ůcych si─Ö warunk├│w.

Moja strona jest moja, dopóki dbam oto, aby działała, opłacam serwer, na którym leży oraz domenę.

Jednakże moja strona nie jest tak do końca moja.

Tak jak z plikiem Word. Jest on tw├│j, dop├│ki jest on zapisany lokalnie na dysku. Mo┼╝esz go udost─Öpni─ç w internecie, ale zawsze masz orygina┼é “pod r─Ök─ů”.

W przypadku WordPress twoja strona jest rozproszona pomi─Ödzy serwerem, gdzie znajduj─ů si─Ö twoje pliki a baz─ů danych, gdzie znajduj─ů si─Ö twoje wpisy.

Tak naprawd─Ö nic nie jest twoje. Opr├│cz oczywi┼Ťcie kopii zapasowej w niezbyt czytelnym formacie, je┼╝eli chcesz co┼Ť uruchomi─ç bez internetu. Je┼╝eli co┼Ť si─Ö stanie, zaczynaj─ů si─Ö schody.

A gdyby tak wr├│ci─ç do podstaw budowania stron w HTML+CSS?

Pliki HTML i style CSS zapisane by┼éy na dysku wraz z obrazkami. Wszystko wrzuca┼éo si─Ö na serwer i tak pojawia┼éo si─Ö w internecie. Ca┼é─ů stron─Ö mia┼ée┼Ť dost─Öpn─ů na dysku i mog┼ée┼Ť uruchomi─ç j─ů bez konieczno┼Ťci posiadania odpowiedniego oprogramowania. Je┼╝eli serwer us┼éugodawcy wysiad┼é lub po prostu ├│w us┼éugodawca zwin─ů┼é walizki i wy┼é─ůczy┼é wtyczk─Ö (a w przysz┼éo┼Ťci mia┼éem tego typu przygody z firm─ů znan─ů w├│wczas pod nazw─ů Cyberion.pl), w├│wczas jeste┼Ťmy ugotowani.

Je┼╝eli masz stron─Ö dost─Öpn─ů w prostej formie, jej przywr├│cenie nie potrwa za d┼éugo.

Nie planuj─Ö jednak wraca─ç do totalnych podstaw.

Pisanie stron od zera w HTML by┼éo najwi─Öksz─ů bol─ůczk─ů (chocia┼╝ i nauk─ů), dlatego te┼╝ WordPress sta┼é si─Ö moim podstawowym narz─Ödziem. Nie zamierzam cofa─ç si─Ö do etapu sprzez Web 2.0, ale zamierzam i┼Ť─ç naprz├│d, z zachowaniem starego podej┼Ťcia z nowoczesnym sposobem jego implementacji.

Ot├│┼╝ chcia┼ébym mie─ç stron─Ö dost─Öpn─ů lokalnie, kt├│r─ů mog─Ö podejrze─ç bez konieczno┼Ťci zmagania si─Ö z bol─ůczkami serwer├│w oraz przer├│┼╝nych us┼éug cache po drodze.

Ostatnio opublikowa┼éem wpis innej stronie, kt├│r─ů zarz─ůdzam, gdzie zapomnia┼éem doda─ç wa┼╝nego elementu. Po szybkiej aktualizacji walczy┼éem kilka godzin pomi─Ödzy cache mojego us┼éugodawcy, konta hostingowego a CloudFlare, aby zobaczy─ç zaktualizowan─ů zawarto┼Ť─ç. Koszmar!

Chc─Ö widzie─ç, jak moja strona ÔÇö wpis b─Ödzie wygl─ůda─ç, nim zdecyduje si─Ö go upubliczni─ç w internecie.

Jednocze┼Ťnie, chce mie─ç dost─Öp do tre┼Ťci w taki spos├│b, abym m├│g┼é rozpocz─ů─ç jej edycj─Ö, gdziekolwiek jestem, na dowolnym komputerze, dowolnym systemie operacyjnym, z dost─Öpem do internetu czy te┼╝ bez.


W momencie, gdy coraz to bardziej zacz─ů┼éem moje przygody z GitHub’em rzuci┼é mi si─Ö na oczy spos├│b pisania i publikowania tre┼Ťci wraz z wyr├│┼╝nieniami ÔÇö kodem.

St─ůd te┼╝ zacz─ů┼éem moje eksperymenty z Markdown.

Markdown pozwala na stworzenie formatowanego tekstu wraz z nagłówkami, pogrubieniami, zdjęciami itp. z wykorzystaniem dowolnego edytora tekstowego.

W skr├│cie skupiasz si─Ö na pisaniu tekstu, a p├│┼║niej, tw├│j tekst przygotowany w formie Markdown u┼╝ywasz, aby wygenerowa─ç w postaci pliku HTML, kt├│ry natomiast b─Ödzie serwowany w internecie.

Skupiaj─ůc si─Ö na tre┼Ťci, nie my┼Ťlisz o kodzie, jego dostosowaniu do r├│┼╝nych rozmiar├│w ekranu czy te┼╝ sprawdzeniu, czy b─Ödzie on poprawnie wy┼Ťwietlany w Chrome, czy Firefox. Kierujesz si─Ö tylko tym, jak funkcjonuje Markdown.

Zapomnij o sprawach technicznych, skup si─Ö na tre┼Ťci, a reszt─Ö pozostaw “narz─Ödziu”, kt├│re zrobi ca┼éo┼Ť─ç za ciebie i zadba o wszystko to, na co musia┼éby┼Ť traci─ç sw├│j cenny czas.

Narz─Ödziu? – zapytasz.

Ot├│┼╝ narz─Ödzi jest mn├│stwo. Jednymi z popularnych s─ů obecnie Jekyll, Hugo czy Gatsby.js.

Oczywi┼Ťcie, wymagaj─ů one od ciebie nieco wiedzy. Umiej─Ötno┼Ťci obs┼éugi Worda, w spos├│b przeci─ůgnij i upu┼Ť─ç na nic si─Ö tutaj zdadz─ů, st─ůd te┼╝ spora cz─Ö┼Ť─ç ludzi pozostanie przy Wordpress-ie, szczeg├│lnie gdy bloki Gutenberg znacz─ůco u┼éatwiaj─ů pisanie tre┼Ťci.

Gutenberg w WordPress nie jest taki z┼éy, jak ju┼╝ go opanujesz. Obs┼éuguje on r├│wnie┼╝ Markdown. Problemy zaczynaj─ů si─Ö w przypadku wpis├│w, kt├│re nie powsta┼éy na prze┼éomie ostatnich lat ÔÇö taka jak moje (2008!).

Moje pierwsze wpisy pisane były w edytorze klasycznym WordPress i przeniesienie ich teraz do Gutenberg jest nieco nierealne, czasochłonne, po prostu zbędne.

Je┼╝eli ju┼╝ ogarn─ů┼ée┼Ť spos├│b funkcjonowania niezb─Ödnych narz─Ödzi (w moim przypadku wybra┼éem Hugo) zauwa┼╝ysz, ┼╝e nasza strona jest stron─ů statyczn─ů, kt├│ra nie potrzebuje du┼╝ej mocy obliczeniowej, bazy danych, obs┼éugi PHP. Co za tym idzie, nie potrzebujemy wyspecjalizowanego konta hostingowego, kt├│re nie ma┼éo kosztuje, a stron─Ö mo┼╝emy wrzuci─ç gdziekolwiek, gdzie b─Ödziemy mogli, aby sta┼éa si─Ö publicznie dost─Öpna.

I tak, zamiast p┼éaci─ç tak, jak ja przez ostatnie lata 200z┼é rocznie (plus VAT) za konto na dzielonym hostingu, pieni─ů┼╝ki te mo┼╝emy wykorzysta─ç na co┼Ť bardziej po┼╝ytecznego, a nasz─ů statyczn─ů stron─Ö wrzuci─ç na darmowe rozwi─ůzanie.

Ale czy darmowe, nie oznacza─ç b─Ödzie, ┼╝e gorsze? – zapytasz.

Ot├│┼╝ nie.

W przeciwie┼ästwie do dynamicznego WordPress’a nasza strona nie b─Ödzie potrzebowa─ç du┼╝ej mocy obliczeniowej procesora oraz sporej ilo┼Ťci pami─Öci, aby wy┼Ťwietli─ç tre┼Ť─ç, kt├│ra dla czytelnika ÔÇö odbiorcy ko┼äcowego wygl─ůda─ç b─Ödzie dok┼éadnie tak samo.

Tym oto darmowym miejscem na twoj─ů statyczn─ů stron─Ö b─Ödzie, chocia┼╝by GitHub Pages lub w moim przypadku Netlify na podstawie repozytorium na GitHub.

Oba te rozwi─ůzania (jak r├│wnie┼╝ tona innych dost─Öpny i darmowych) pozwol─ů ci na osi─ůgni─Öcie zamierzonego celu, czyli konwersj─Ö tekstu napisanego z wykorzystaniem Markdown na stron─Ö HTML.


Jaki jest sens w tym wszystkim?

Nasze wpisy piszemy po to, aby kto┼Ť je czyta┼é. Je┼╝eli kto┼Ť je czyta, to znaczy, ┼╝e istnieje potrzeba na ich istnienie. A je┼╝eli kto┼Ť, kto przeczyta┼é, zyska┼é na tym, chocia┼╝by rozwi─ůzuj─ůc w┼éasny problem, osi─ůgn─Öli┼Ťmy zamierzony cel.


Dodatkow─ů zalet─ů powrotu do podstaw jest fakt bezpiecze┼ästwa. Liczba stron zbudowanych na podstawie WordPress przekroczy┼éa 60% wszystkich stron w internecie.

Uruchomienie strony opartej o WordPress to nie tylko zainstalowanie podstawowego skryptu. Musimy zadba─ç r├│wnie┼╝ o bezpiecze┼ästwo, gdy┼╝ bardzo szybko mo┼╝emy zobaczy─ç, ┼╝e nasza strona zostanie przej─Öta i wykorzystana do niepo┼╝─ůdanych cel├│w.

O ile mi si─Ö to nie zdarzy┼éo, to nie raz pomaga┼éem w przywr├│ceniu strony po przej─Öciu i zabezpieczeniu jej w odpowiedni spos├│b, aby unikn─ů─ç podstawowego b┼é─Ödu. Zajmuje to sporo czasu, a cierpi na tym reputacja strony w internecie, kt├│r─ů odbudowa─ç nie jest ┼éatwo i jest to czasoch┼éonne. Z regu┼éy mo┼╝e trwa─ç od kilku miesi─Öcy do kilku lat, w zale┼╝no┼Ťci, kiedy zauwa┼╝yli┼Ťmy, ┼╝e nasza strona zosta┼éa skompromitowana i jak szybko zareagowali┼Ťmy, nim wyszukiwarki takie jak Google zrobi┼éy swoje.

W ka┼╝dym tygodniu sp─Ödzam co najmniej godzin─Ö na sprawdzenie, czy wszystko dzia┼éa oraz zadbanie o bezpiecze┼ästwo stron, z kt├│rymi wsp├│┼épracuj─Ö. Jest to godzina, kt├│r─ů mo┼╝na by┼éoby spo┼╝ytkowa─ç inaczej.

St─ůd te┼╝, w lipcu 2020 rozpocz─ů┼éem intensywn─ů analiz─Ö sytuacji, aby upro┼Ťci─ç ca┼éy proces, zaczynaj─ůc od mojej strony domowej.

Przeniesienie wszystkiego z WordPress do formy Markdown z za┼éo┼╝enia mia┼éo by─ç jak kopiuj wklej, oczywi┼Ťcie nie by┼éo!.

Na tym etapie postanowi┼éem po┼Ťwi─Öci─ç m├│j czas na nauczenie si─Ö czego┼Ť nowego, aby w przysz┼éo┼Ťci zyska─ç nie tylko w formie materialnej, ale r├│wnie┼╝ niematerialnej, w postaci wolnego czasu.

Na tym etapie zauwa┼╝y┼éem problem zwi─ůzanym z tym, ┼╝e moja strona zacz─Ö┼éa lata temu z klasycznym edytorem, a teraz u┼╝ywa Gutenberg do komponowania wpis├│w. Dost─Öpne narz─Ödzia konwersji WordPress do Markdown pomog┼éy, ale nie pozwoli┼éy mi w szybki spos├│b udost─Öpni─ç mojej strony w postaci statycznej.

Wpisy klasyczne zatraci┼éy formatowania, odno┼Ťniki do zdj─Ö─ç i adnotacje nie wy┼Ťwietla┼éy si─Ö tak, jak trzeba. W zwi─ůzku z tym sp─Ödzi┼éem por─ů cz─Ö┼Ť─ç czasu (zaraz po tym, jak stworzy┼éem wygl─ůd strony) na poprawie ka┼╝dego ze 186 wpis├│w, wracaj─ůc do tych pierwszych z 2008 roku! Tutaj zauwa┼╝y┼éem, ┼╝e du┼╝o si─Ö nauczy┼éem od tego czasu, szczeg├│lnie jak pisa─ç, aby tre┼Ť─ç by┼éa po┼╝─ůdana.

Na szcz─Ö┼Ťcie na tym etapie pomocny okaza┼é si─Ö program MassReplaceIt, dzi─Öki kt├│remu by┼éem w stanie masowo zmieni─ç b┼é─Ödnie wstawione znaczniki i formatowania na te, kt├│re s─ů poprawnie u┼╝ywane w Markdown.

Dodatkowo u┼╝y┼éem wordpress-export-to-markdown, kt├│ry pozwoli┼é mi ponownie wygenerowa─ç Markdown z pliku export.xml (z naciskiem na tre┼Ť─ç), aby poprawi─ç posty, kt├│re okaza┼éy si─Ö problematyczne.


Wracaj─ůc do wygl─ůdu strony, bo od tego zacz─ů┼éem.

Moja strona na WordPress u┼╝ywa┼éa motywu Twenty Twenty, kt├│ry bardzo przypad┼é mi do gustu i spe┼éni┼é moje aestetyczne potrzeby, jak m├│j blog ma wygl─ůda─ç.

Na bazie tego motywu stworzy┼éem m├│j motyw-dziecko (child theme), do kt├│rego doda┼éem co nieco. Efekt osi─ůgni─Öty.

W pierwszej kolejno┼Ťci my┼Ťla┼éem o wykorzystaniu Hugo oraz przerobionego motywu przerobionego Twenty Twenty do Hugo na te potrzeby.

Po kilku eksperymentach i zag┼é─Öbieniu si─Ö w kod postanowi┼éem spr├│bowa─ç czego┼Ť innego, ale pozostaj─ůc z Hugo jako podstawowe narz─Ödzie (pr├│bowa┼éem Gatsby.js oraz Jekyll, ale jak dla mnie, Hugo by┼éo szybszy w ogarni─Öciu i zrozumieniu logiki).

I tak przerobi┼éem motyw Minos, kt├│ry tak naprawd─Ö jest modyfikacj─ů motywu o tej samej nazwie Minos, tyle ┼╝e dla platformy Hexo.

Wzoruj─ůc si─Ö na tym, jak m├│j blog wygl─ůda┼é na WordPress i motywem Twenty Twenty osi─ůgn─ů┼éem ostateczny wygl─ůd, kt├│ry aktualnie podziwiasz.

Ca┼éa praca z dostosowywaniem motywu do moich potrzeb od┼Ťwie┼╝y┼éa mi moj─ů zardzewia┼é─ů wiedz─Ö o HTML oraz CSS (w tym poszerzy┼éa o JavaScript). Doceni┼éem r├│wnie┼╝ spos├│b, w jaki Hugo funkcjonuje i generuje strony. Zag┼é─Öbiaj─ůc si─Ö w Hugo, odkrywa┼éem nowe opcje oraz prostot─Ö w ich implementacji. I, mimo ┼╝e apetyt ro┼Ťnie w miar─Ö jedzenia, my┼Ťl─Ö, ┼╝e osi─ůgn─ů┼éem zamierzony efekt.

Nie oby┼éo si─Ö przy tym bez kompromis├│w, ale nic takiego, kt├│rego nie da┼ébym z cierpie─ç lub zast─ůpi─ç “l┼╝ejszym” rozwi─ůzaniem.

WordPress wraz ze swoimi wtyczkami pozwolił mi na rozleniwienie się w tej kwestii.


Przeniesienie mojej strony, mimo ┼╝e potrwa┼éo znacznie d┼éu┼╝ej, ni┼╝ to za┼éo┼╝y┼éem, pozwoli┼éo mi osi─ůgn─ů─ç to, co chcia┼éem.

Na etapie szybkiej nauki doda┼éem kilka element├│w, kt├│re wymaga┼éoby kilku wtyczek w Wordpress. Ca┼éo┼Ť─ç zosta┼éa oparta na HTML oraz CSS z ma┼é─ů pomoc─ů JavaScript. Dodatkowo, doda┼éem co┼Ť, czego nie wyobra┼╝a┼éem sobie w WordPress (nie w spos├│b tak prosty, jak w Hugo), a mianowicie ciemny motyw strony.

Gdy nasz komputer, telefon lub tablet prze┼é─ůczy si─Ö w tryb nocny, moja strona r├│wnie┼╝. Takie ma┼ée czary-mary, dzi─Öki czemu ┼éatwiej si─Ö b─Ödzie czyta─ç p├│┼║nym wieczorem.


Prosta, przejrzysta strona, zach─Öcaj─ůca do skupienia si─Ö na tre┼Ťci powi─ůzana z nowoczesnym wygl─ůdem to podstawa.

Co dla mnie by┼éo wa┼╝ne, to obrazek wyr├│┼╝niaj─ůcy do ka┼╝dego postu, zach─Öcaj─ůcy do zag┼é─Öbieniu si─Ö we wpis. Z w┼éasnego do┼Ťwiadczenia wiem, ┼╝e to, oraz pocz─ůtkowy tekst (zajawka wpisu) decyduje o tym, czy dalej chc─Ö czyta─ç, czy nie.

Oczywi┼Ťcie tytu┼é wpisu jest r├│wnie wa┼╝ny, ale nie stosuj─Ö tutaj praktyki ze szmat┼éawskich stron, kt├│rych tre┼Ť─ç nijak si─Ö ma do tego, co tytu┼é obiecywa┼é.

Nie ma co si─Ö oszukiwa─ç, WordPress nie umrze tak szybko, a ja nie przestan─Ö go u┼╝ywa─ç w innych projektach. Dla mojej strony migracja by┼éa czym┼Ť jak odwyk i oczyszczenie. Bez wzgl─Ödu czy z Hugo b─Öd─Ö przez kilka lub kilkana┼Ťcie lat, my┼Ťl─Ö, ┼╝e dost─Öpno┼Ť─ç post├│w w Markdown pozwoli zachowa─ç mi ┼éad i kompatybilno┼Ť─ç do przysz┼éych zmian, kt├│re dopiero nadejd─ů.


Nim opublikowa┼éem moj─ů stron─Ö, pos┼éu┼╝y┼éem si─Ö narz─Ödziem Broken Link Checker do sprawdzenia, gdzie moje odno┼Ťniki nie dzia┼éaj─ů oraz gdzie podczas eksportu (chocia┼╝by zdj─Ö─ç) odno┼Ťnik nie zosta┼é poprawnie przekonwertowany.

Posiadaj─ůc uruchomionego HUGO w trybie developerskim hugo serve wykona┼éem nast─Öpuj─ůc─ů komend─Ö:

blc -e http://localhost:1313 -ro 2>&1 | tee result.sh

Opcja -e pozwoli┼éa mi skupi─ç si─Ö tylko na wewn─Ötrznych odno┼Ťnikach, a rezultat otrzyma┼éem w pliku result.sh.

I tak moja strona została przeniesiona i opublikowana w godzinach porannych 9 sierpnia 2020. Nie było praktycznie żadnych przerw.

Oczywi┼Ťcie, odkry┼éem kilka problem├│w, kt├│re w trakcie dnia naprawi┼éem, jednocze┼Ťnie testuj─ůc proces aktualizacji strony w repozytorium GitHub-a oraz obserwuj─ůc, jak jest ona upubliczniana ze strony Netlify. Magia!


Krótkie porównanie WordPress vs Hugo dla mojego bloga po zakończonej migracji.

Por├│wnanieWordPressHugo
Wtyczki195 MB0 MB
Motywy3.5 MB3.7 MB
Tre┼Ť─ç0 MB11.2 MB
Uploads820 MB164.4 MB
Inne8 MB0.9 MB
Baza danych102 MB0 MB2
Koszt serwera200zł/rok + VAT (nazwa.pl)0zł (zero, GitHub/Netlify)

  1. Tre┼Ť─ç przechowywana jest w bazie danych ↩︎

  2. Hugo nie potrzebuje bazy danych. Tre┼Ť─ç przechowywana jest w plikach .md ↩︎

Komentarze
Kategorie