Ostatnia aktualizacja artykułu: Jan 2, 2022
TL;DR (Too Long; Didn’t Read - używany w anglojęzycznym internecie skrót oznaczający krótkie podsumowanie dla tych, których nie interesują szczegóły)
Po co hostować materiały zgromadzone na Notion gdzieś indziej?
Ze względu na ograniczenia SEO, te dotyczące wyglądu strony i niemożność podpięcia customowej domeny.
Opcje:
1. Super.so lub Potion - zapłacisz $10-$12 na miesiąc za stronę, ale dostaniesz maksimum funkcjonalności
2. Fruition - darmowy kompromis bez kodu
3. Nextjs-notion-starter-kit - darmowa ciekawa opcja dla potrafiących kodować, a przynajmniej obsługiwać gita, npma i Vercel
O co chodzi z tym Notion?
Notion to narzędzie nieco przesadnie nazywane “drugim mózgiem”. Nie sposób jednak zaprzeczyć, że to wygodny edytor do dokumentów i tekstów online o sporych możliwościach. Ze względu na prostotę tworzenia w Notion i bardzo przyjazny interfejs użytkownika a także duże możliwości również w ramach bezpłatnego planu, Notion zyskało w ostatnich latach olbrzymią popularność.
Choć narzędzie to najlepiej nadaje się do przechowywania różnego rodzaju notatek, tekstów, list zadań, tablic - do stworzenia domowego lub firmowego centrum wiedzy i projektów - to entuzjaści tego narzędzia używają go również do tworzenia prostych stron internetowych. Pozornie, przeistoczenie notatki na Notion w publiczną stronę jest bardzo proste, bo wymaga właściwie tylko przełączenia istniejącej strony w tryb publiczny, dostępny dla każdego internauty na świecie. W praktyce jednak, strona opublikowana w ten sposób będzie miała kilka ograniczeń. Do najważniejszych należą:
- Liczne ograniczenia SEO, poczynając od wspomnianej wyżej nie najlepszej prędkości ładowania poprzez niemożliwość kontrolowania meta tagów takich jak opis czy url strony. Meta tagi stanowią istotne źródło informacji dla wyszukiwarek internetowych
- Ograniczony wybór w kwestii wyglądu i stylu strony
- Niemożliwość hostowania strony na własnej domenie innej niż notion.site
Ze względu na te ograniczenia i jednocześnie rosnącą bazę fanów i użytkowników narzędzia Notion, powstało już kilka narzędzi, zarówno płatnych i bezpłatnych, które częściowo lub całkowicie adresują wspomniane problemy.
Poniżej przedstawiam opcje, które masz do wyboru, jeśli chciał(a)byś stworzyć swoją stronę w oparciu o Notion, ale nie rezygnując z możliwości poprawienia SEO i wyglądu strony. Wszystkie opcje ocenione są pod kątem czasu, skomplikownia, kosztów i w końcu efektów.
Skala ocen zakłada, że materiały na Notion masz już gotowe i chcesz tylko ładnie je “opakować”, żeby lepiej prezentowały się i działały jako strona internetowa.
Jeśli masz jakieś pytania, komentarze lub potrzebujesz pomocy ze skonfigurowaniem którejkolwiek z poniższych opcji zapraszam Cię do dołączenia do tajnej grupy na facebooku (grupa jest bardzo kameralna i dopiero się rozkręca, ale niech Cię to nie zniechęci ;)). Gdybyś chciał(a) zrobić to drugie, to napisz do mnie maila na bezkodzie@gmail.com to wyślę Ci linka z zaproszeniem.
Osiołkowi w żłoby dano, czyli opcje:
1. super.so - czyli po raz kolejny okazuje się, że nic nie może być jednocześnie tanie, szybkie i dobrze zrobione
Czas: ⏳⬜ ⬜⬜⬜
Pieniądze: 💰💰💰💰💰
Skomplikowanie:🧠🧠⬜⬜⬜
Efekty: ⭐⭐⭐⭐ ⬜
Super.so to narzędzie, które pozwoli Ci przekształcić Twoje materiały na Notion w stronę internetową łatwo, szybko i przyjemnie. Niestety, nie pozwoli Ci zrobić tego tanio - opłata za jedną stronę (w ramach której możesz wszakże mieć dowolnie dużo podstron) wynosi $12 miesięcznie. Z drugiej strony, to ciągle mniej niż miesięczny abonament Netflixa dla polskiej rodziny ...
Mocne strony Super to przede wszystkim wydestylowany interfejs, który pozwoli Ci ustawić tylko to co najpotrzebniejsze:
W super możesz więc ustawić metadane dla SEO (dla każdej strony osobno, jeśli sobie życzysz!), własną (customową) domenę, pasek z nawigacją, zmienić czcionki i tło... i to właściwie tyle. Trzeba przyznać, że dzięki temu minimalizmowi przekształcenie strony w Notion w całkiem ładną stronę internetową zajmuje kilka do kilkunastu minut. Jeśli tworzysz więc coś, czego mocną stroną jest treść i przede wszystkim zależy Ci na dodawaniu treści szybko i łatwo, a jednocześnie nie potrzebujesz niestandardowych układów strony, animacji, czy efektów wizualnych, to będziesz z tej opcji zadowolony(a).
Nie za wiele opcji to jednocześnie mocna i słaba strona Super. W tej cenie oczekiwałabym jednak nieco więcej - jak choćby dolny pasek (footer) czy jakaś możliwość automatycznego dodania odpowiedniej informacji o cookies czy polityki prywatności. Żeby nie być niesprawiedliwą, muszę wspomnieć, że do swojej strony stworzonej na Super możesz dołożyć zarówno własny arkusz CSS jak i dowolny skrypt - czy to do “heada” czy do “body” strony. To z jednej strony prawdopodobnie pozwala “dohakować” do strony większość funkcjonalności, których będziesz potrzebować, ale z drugiej - w tej cenie i od tak wyspecjalizowanego narzędzia oczekuję, że nie będę musiała hakować.
Wydaje się, że Super spełnia oczekiwania w zakresie performance’u i wydajności wygenerowanej strony. Strona główna bezkodzie.pl otrzymuje w PageInsights wynik 98/100.
W wersji na urządzenie mobilne wynik testu jest niestety znacznie słabszy. Głównymi winowajcami tego stanu rzeczy są dostarczone przeze mnie nieco za duże obrazki (moja wina) i czcionka, która jest pobierana z google fonts - to leży po stronie Super, ale trudno mi wyrokować, czy są lepsze technicznie opcje rozwiązania problemu zmiany czcionki.
Rozważając użycie tego narzędzia trzeba być świadomym jeszcze jednej jego cechy: Super tylko co jakiś czas synchronizuje się z Notion, co oznacza, że zmiany wprowadzane przez Ciebie na Notion nie są od razu widoczne na stronie stworzonej w Super. To może, choć nie musi, stanowić pewien problem. W moim odczuciu opóźnienie to nie przekracza 15 minut a bywa istotnie mniejsze, ale na pewno jest zauważalne.
Podsumowując: jeśli jesteś fanem narzędzi ze świetnym interfejsem, które po prostu robią robotę, to Super będzie trafnym wyborem, choć w polskich warunkach nieco kosztownym. Super.so będzie też wyjątkowo dobre dla osób, które mają problemy ze skupianiem się na dużej liczbie niekoniecznie istotnych szczegółów i podejmowaniem drobnych decyzji dotyczących wyglądu czy układu strony. Takim osobom narzędzie to nawet w wersji domyślnej zaoferuje czytelny i przejrzysty wygląd docelowej strony, bez żadnej dodatkowej konfiguracji.
Przykładowe strony utworzone na super w polskim internecie: https://bezkodzie.pl ;), https://www.smart91.pl/.
2. potion.so - młodszy brat Super
Czas: ⏳⬜ ⬜⬜⬜
Pieniądze: 💰💰💰💰 ⬜
Skomplikowanie:🧠🧠⬜⬜⬜
Efekty: ⭐⭐⭐⬜ ⬜
Potion to rozwiązanie bliźniacze do Super.so... albo jego młodszy brat. Rozwiązania te są do siebie tak bliźniaczo podobne, że trudno się nie zastanawiać, które było pierwsze - Potion to kolejne narzędzie, które pozwala na stworzenie strony internetowej na podstawie publicznej strony na Notion. Tak samo jak Super, pozwala na dołożenie do strony paska nawigacji u góry, tzw guzika (buttona) “Call to Action” czyli wyróżnionego przycisku najbardziej po prawej, który docelowo ma skłonić użytkownika do wykonania właśnie tej akcji, na której zależy twórcy strony. Tak jak i w Super, jesteśmy w stanie wstrzyknąć własny customowy kod i w końcu, tak samo jak i przy użyciu Super, hosting strony wydaje się odbywać na Vercel.com (choć jest to na ogół niewidoczne dla użytkownika).
Stronę hostowaną przy użyciu Super masz właśnie przed oczami, a ta utworzona przy pomocy Potion prawdopodobnie już nie istnieje (w celu napisania tego artykułu skorzystałam z bezpłatnej 7-dniowej wersji), ale dla porównania tutaj zrzuty ekranu ze strony głównej w jednym i drugim narzędziu - oba narzędzia oferują nieco inny zestaw czcionek i to jest najbardziej rzucająca się w oczy różnica między nimi. Pozostałe dotyczą innego sposobu budowania logo i małej różnicy styli przycisku “Call to Action”, które zapewne można by wyrównać przy użyciu customowego arkusza CSS. Można bez bezpiecznie powiedzieć, że różnica w wyglądzie Twojej strony między Super a Potion będzie żadna.
Jakie są więc różnice między tymi narzędziami?
Na korzyść Super przemawia przyjemniejszy interfejs (choć może to być subiektywne odczucie). Do funkcjonalności, które są lepiej rozwiązane w Super należy np. możliwość edytowania ustawień SEO na poziomie każdej podstrony osobno, a widok, który do tego służy jest hierarchiczny i łatwy do obsługi. Ciekawą opcją jest również możliwość zabezpieczenia strony hasłem (w Super).
Co interesujące, wyniki PageSpeed Insights, są dla strony hostowanej poprzez Potion nieco gorsze niż dla Super - dla wersji Desktop wynik wyniosi 95 (Potion) vs 98/99 (Super) ale dla wersji mobilnej już 64 (Potion) vs 81 (Super), choć w obu przypadkach wskazane są te same największe problemy (obrazki i czcionki).
Najistotniejszą różnicą w sposobie pracy z tymi dwoma narzędziami wydaje się być działanie live editora i szybkość, z którą wprowadzane są zmiany na stronie docelowej. W przypadku Super należy chwilę poczekać, aż zmiany będą widoczne na Twojej opublikowanej stronie, a w przypadku Potion dzieje się to w kilkanaście - kilkadziesiąt sekund. Jednocześnie jednak edytor Potion wydaje się mieć pewien bug, a mianowicie nie byłam w stanie zmusić go do pokazywania wybranej przeze mnie podstrony - na podglądzie ląduje zawsze jedna, odpowiadająca pierwszemu linkowi w headerze. Z jednej strony, wszystkie dostępne w edytorze ustawienia dotyczą wszystkich stron, więc podglądanie ich na tylko jednej stronie powinno być wystarczające, z drugiej jednak, gdybyśmy zaczęli używać arkuszy styli, to różnice mogłyby być istotne, dlatego preferuję podgląd w narzędziu Super, który pozwala mi się dowolnie przełączać między wszystkimi podstronami w obrębie mojej witryny.
Czy niewielkie różnice funkcjonalności pomiędzy Potion a Super są odzwierciedlone w cenniku? Pojedyncza strona na Potion kosztuje $10 miesięcznie i być może istnieje możliwość zbicia tej ceny do $7.5 za pomocą triku poniżej. W Super natomiast pojedyncza strona kosztuje $12, a więc jest nieco drożej. Różnica ta będzie powiększała się, jeśli chcielibyśmy korzystać z wielu stron - w Super cena jest stała i wynosi $12 za każdą stronę, a w Potion możemy hostować 3 strony za 25$, co daje nieco powyżej $8 za stronę.
🧅 Cebula alert: jeśli zdecydujesz się na hosting Notion w Potion, utworzysz konto i skorzystasz z okresu próbnego a potem spróbujesz usunąć subskrypcję (Cancel subscription) i jako powód podasz ograniczenia budżetowe, całkiem możliwe, że zostanie Ci przedstawiona oferta 25% zniżki do końca życia - tak było w moim przypadku ;)
Jak może zauważyłeś/aś, moja strona stworzona jest przy użyciu Super. Wobec możliwości zaoszczędzenia nieco na Potion, co spowodowało, że zdecydowałam się pozostać na Super? Przekonały mnie nieco lepsze wyniki PageSpeed Insights i - według mnie - znacznie ładniejszy i przyjemniejszy w obsłudze interfejs Super. Jeśli wybierasz między tymi dwoma narzędziami, rozważ, czy te czynniki również są dla Ciebie istotne.
Na korzyść Potion przemawia znacznie lepsza nazwa a także sympatia dla Dawida w pojedynku z Goliatem - Potion zostało zbudowane w całości przez jedną osobę “in public”, co oznacza, że o całym procesie można przeczytać po angielsku na twiterze lub posłuchać w podcascie. Nad Super pracuje zaś prawdopodobnie cały zespół, choć próżno tej informacji szukać na stronie firmy. Być może porównanie do Dawida i Goliata nie jest jednak trafione ;).
3. Hostnotion - nie zapowiada się dobrze
Czas: ?
Pieniądze: 💰💰⬜⬜⬜
Skomplikowanie: ?
Efekty: ?
Hostnotion wyglądało na ciekawą alternatywę do Potion i Super ze względu na atrakcyjną cenę wynoszącą jedynie $5 za miesiąc. Niestety, kiedy chciałam wypróbować to narzędzie, to spotkała mnie nieprzyjemna niespodzianka już na etapie Setupu - nie byłam w stanie wprowadzić informacji o sposobie płatności. Nie wiem, czy to oznacza, że Hostnotion umarło już śmiercią naturalną, jednak mnie na pewno zniechęciło - jeśli problemy pojawiają się już na etapie konfigurowania czegoś tak podstawowego jak płatność, to dalej nie spodziewam się niczego dobrego.
4. Fruition + Cloudflare - po prostu działa
Czas: ⏳⏳⏳⬜⬜
Pieniądze: ⬜⬜⬜⬜⬜
Skomplikowanie:🧠🧠🧠⬜⬜
Efekty: ⭐⭐⬜⬜⬜
https://fruitionsite.com/ to narzędzie, które pozwala w prosty sposób wygenerować kawałek kodu, który przepisuje Twoją stronę na Notion w taki sposób, żeby naprawić kilka ważnych z punktu widzenia SEO atrybutów tej strony. Kod ten można potem uruchomić za darmo na Cloudflare a także ustawić tam przekierowanie z Twojej wybranej domeny. W efekcie otrzymujemy działającą stronę hostowaną na Notion, choć poprawianą przez Fruition, na którą użytkownika kieruje DNS Cloudflare’a. Jest to rozwiązanie całkiem darmowe i działające. Wymaga ono minimum orientacji w podstawowych terminach związanych z konfiguracją stron www i DNSa, ale nie wymaga znajomości javascriptu ani żadnego innego języka programowania. Zależnie od stopnia biegłości i znajomości interfejsu Cloudflare’a skonfigurowanie tego rozwiązania zajmie od 10 do 30 minut.
Skoro więc działa, jest za darmo i nie wymaga zbyt wiele czasu, to w czym problem? Wydaje się, że największy problem to prędkość działania a także ryzyka typowe dla korzystania z niewielkich projektów open-source. Opóźnienia w działaniu wynikają przede wszystkim z faktu, że kod strony jest dosłownie przepisywany: aby poprawić odpowiednie tagi, zmienić czcionkę czy zmapować URLe na bardziej przyjazne. Prawdopodobnie właśnie ze względu na to mapowanie PageInsights odmawiają w ogóle wydania wyroku w sprawie strony hostowanej poprzez Fruition twierdząc, że nie potrafią jej odnaleźć. Niemniej jednak na pierwszy rzut oka, szczególnie przy pierwszym ładowaniu w danej przeglądarce, widać, że powstałe rozwiązanie nie jest demonem prędkości. Możesz sam(a) sprawdzić to na moim przykładowym projekcie https://czysapromocje.pl.
Wspomniane ryzyka związane z Open Source polegają przede wszystkim na tym, że skrypt stworzony został przez jedną osobę, która nie ma czasu go poprawiać czy utrzymywać. Jeśli Notion zmieni swój sposób działania tak, że skrypt sobie nie poradzi z wprowadzoną zmianą, nie ma żadnej gwarancji, że jego autor dostarczy poprawkę.
Tym samym Fruition i darmowy plan na Cloudflare pozostają rozwiązaniem akceptowalnym dla projektów hobbystycznych i raczej niewielkich stron. Nie jest to rozwiązanie, które można by stosować w systemie produkcyjnym, albo w stronie, która ma być wysoko pozycjonowana w Google (prędkość ładowania się strony od pewnego czasu jest już oficjalnie potwierdzonym czynnikiem wpływającym na pozycję strony w wyszukiwarce Google). Dodatkowo oczywiście, gdyby projekt hostowany przy pomocy Fruition stał się nieoczekiwanie popularny, należy liczyć się z tym, że przestanie również być darmowy, ponieważ przekroczymy limity bezpłatnego planu Cloudflare.
5. notion.dog - coś pomiędzy honorową wzmianką a ostrzeżeniem
Czas: -
Pieniądze: ⬜⬜⬜⬜⬜
Skomplikowanie: -
Efekty: ⬜⬜⬜⬜⬜
Notion.dog to projekt, który miał pozwalać na hostowanie strony w Notion pod domeną
<wybrananazwa>.notion.dog. Produkt doczekał się startu na stronie Product Hunt i na swojej stronie githubowej chwali się, że był tam piątym produktem dnia.Nie sposób w tej chwili dociekać intencji twórcy - być może miał to być wstęp do stworzenia płatnego projektu, a być może intencje nie były szczególnie czyste. Wygląda na to, że gdy projekt powstał, odpalenie własnej strony w domenie notion.dog wymagało dodania jednego pliku konfiguracyjnego i zaczekania na akceptację twórcy. W tej chwili kolejne zgłoszenia nie są już rozpatrywane (widać je w githubowym repozytorium jako Pull Requesty). Istniejące 82 strony stworzone w ten sposób odpowiadają nieco podejrzanym błędem a następnie przekierowują do jakichś stron na Notion. Niestety w większości są to strony stworzone po japońsku, w związku z czym trudno mi stwierdzić czy to treści wartościowe czy wygenerowane automatycznie śmieci.
Nawet przyjmując optymistyczne założenie, że był to prowadzony w dobrej wierze projekt, któremu wyczerpały się baterie, chciałabym przestrzec Cię przed korzystaniem z tego typu rozwiązań w przypadku jakiegokolwiek przedsięwzięcia, na którym naprawdę Ci zależy. Największa czerwona flaga to fakt, że hosting odbywa się po stronie twórcy tego projektu i w jego domenie. Pozbawiasz się więc kontroli nad kluczowymi aspektami tego przedsięwzięcia i nie ma mowy o budowaniu wyniku SEO czy jakiejkolwiek renomy na takiej bazie. Jest to znacząco różny model od Fruition, które co prawda pomaga Ci w hostowaniu poprzez dostarczenie skryptu, ale zarówno sposób modyfikacji strony przez skrypt jak i DNS w Cloudflare pozostają pod Twoją wyłączną kontrolą.
6. nextjs-notion-starter-kit - czyli zrób to (prawie) sam(a) i ponieś konsekwencje
Czas: ⏳⏳⏳⏳⬜
Pieniądze: ⬜⬜⬜⬜⬜
Skomplikowanie:🧠🧠🧠🧠🧠
Efekty: ⭐⭐⭐ ⬜ ⬜
(mocno zależą od tego, ile wysiłku możesz poświęcić na dostosowanie projektu do swoich wymagań)
Ciekawa bezpłatna opcja dla programistów i programistek (a konkretniej, dla osób, które kojarzą i potrafią w podstawowym zakresie używać narzędzi takich jak
git, npm czy Vercel). Autor bloga https://transitivebullsh.it/ robi samodzielnie to, co Super i Potion opakowały w płatny produkt z dodatkowymi opcjami. Dzięki temu, że projekt jest dostępny jako open source na Githubie, może z niego skorzystać za darmo każda osoba gotowa na poświęcenie czasu na nauczenie się narzędzi i przygotowanie i wsparciu deploymentu i hostingu. Zakładając, że żadne z tych wymagań Cię nie odstrasza...
Jak to często bywa z takimi open-source’owymi perełkami, autor wspiera przede wszystkim te funkcjonalności, które są mu potrzebne. I tak, strona wygenerowana przy pomocy nextjs-notion-starter-kit będzie domyślnie miała podobny układ, jak strona autora. W przypadku mojej strony głównej efekt możesz zobaczyć na https://nextjs-notion-starter-kit-nine-brown.vercel.app/:
Podejrzewam, że właśnie dlatego, że autor używa dwukolumnowego układu na swoim blogu, to rozwiązanie nie najlepiej radzi sobie z innymi układami - na screenshocie po lewej poniżej możesz zobaczyć próbę zdeployowania innego mojego testowego projektu czysapromocje.pl, po prawej zaś ta sama strona hostowana przy użyciu Fruition.
Dobra wiadomość? Ponieważ to Open Source to możesz wziąć sprawy w swoje ręce i dołożyć wsparcie do funkcjonalności, których potrzebujesz. Możesz również dostosować wygląd jak tylko zapragniesz, ale jedno i drugie będzie już wymagało całkiem zaawansowanej znajomości web-developmentu i kodu. Jednak jeśli jednak czytasz ten akapit, to być może Ci to nie straszne.
Za deployment i hosting projektu odpowiada i w tym wypadku Vercel. Warto więc pamiętać, że plan Hobby tego narzędzia jest bezpłatny tylko dla stron niekomercyjnych i ma pewne ograniczenia (choć całkiem hojne).
Jeśli zadajesz sobie teraz pytanie, czemu moja strona jest hostowana na Super a nie przy użyciu tego projektu, to odpowiedź brzmi: czas. Zależało mi na tym, żeby skupić się na przydatnych treściach i narzędziach, które są potrzebne mi i moim czytelnikom. Nie chciałam poświęcać dodatkowego czasu na dłubanie w bebechach projektu, którzy leży nieco poza moją specjalizacją. Rozważam jednak pójście tą drogą w przypadku angielskiej wersji bloga, bo hostowanie go na płatnym narzędziu wykracza poza mój nocode hobby budżet ;)
Podsumowując - jeśli jesteś gotowy/a na pracę z kodem zamiast graficznego interfejsu i nie przeraża Cię konieczność zaakceptowania domyślnego wyglądu strony lub samodzielnej modyfikacji plików typescript czy css, to może to być świetny sposób na darmowy hosting bloga czy strony w oparciu o Notion. To super rozwiązanie dla osób skupiających się nad jednym projektem i z nieco większą więdzą programistyczną.
Czas na decyzję!
Po pierwsze, zastanów się, czy naprawdę potrzebujesz czegoś poza Notion. Decydującym czynnikiem wydaje się być SEO - czy link do materiałów na Notion chcesz wysyłać bezpośrednio, czy chcesz również zgarniać ruch z wyszukiwarek? Jeśli to drugie, to będziesz musiał(a) zainwestować w dodatkowe narzędzie.
Bezpłatnie możesz użyć Fruition, ale na Twój wynik SEO może wpływać słaba prędkość ładowania strony. Jeśli jesteś programist(k)ą i jesteś gotowa/y na poświęcenie czasu na dostosowanie projektu pod swoje wyobrażenia i/lub kontrybucję do projektu open source, to rozważ nextjs-notion-starter-kit, który da Ci pełną programistyczną kontrolę i może być do pewnego momentu hostowany za darmo na Vercelu.
Płatnie do wyboru masz Super i Potion. Pierwsze z nich zdaje się być nieco lepsze pod kątem SEO ze względu na możliwość ustawiania tagów per strona i trochę lepszą wydajność strony, a drugie jest nieco tańsze i lepiej nazwane ;)
Jeśli choć trochę pomogłam Ci w wyborze, to zostaw napisz choćby krótkiego maila na bezkodzie@gmail.com - jeśli podasz mi linka do swojej strony utrzymywanej za pomocą którejś z opcji powyżej, to bardzo chętnie umieszczę go jako przykład w tym artykule. Jeśli masz problemy z którąś z opcji powyżej, mogę spróbować Ci pomóc na tajnej grupie Bezkodzie na facebooku - napisz na bezkodzie@gmail.com, to wyślę Ci zaproszenie :)