Webflow: Podpięcie domeny

0:00Witaj w kolejnej lekcji.

0:01Naturalną konsekwencją tego, że

0:03przygotowaliśmy kolekcję i całego CMSa w obrębie Webflow jest to, że będziemy musieli

0:08skorzystać z hostingu Webflow do tego, żeby naszą stronę utrzymywać.

0:12Ta cała struktura, ta cała baza

0:15danych jest utworzona na serwerach Webflow,

0:17no i po to, żeby wykorzystać te wszystkie możliwości

0:21niestety, w zasadzie skazani jesteśmy na

0:24wykupienie planu hostingowego CMS lub wyższego.

0:27No i przydałoby się też opublikować naszą stronę pod wybraną przez nas domeną.

0:32Nie ma możliwości, na ten moment

0:34przynajmniej, ściągnięcia sobie jakiegoś zrzutu tej bazy, jakiegoś SQLa,

0:38czegoś co możemy później zaimportować razem z kodem.

0:41Natomiast oczywiście niesie to ze sobą też

0:43szereg korzyści. My o tych korzyściach porozmawiamy już po opublikowaniu, gdy będę

0:47pokazywał Ci edytora, ale też sama edycja tutaj jest dużo prostsza.

0:51Plany hostingowe Webflow

0:52w zasadzie są w miarę rozsądne cenowo. Oczywiście można by było znaleźć gdzieś

0:56tańszy hosting, można by było samodzielnie jakoś to pospinać,

1:00ale, jeżeli zastanowimy się jakie

1:02możliwości daje nam Webflow w zamian w ramach hostingu, że mamy do dyspozycji edytora,

1:08że mamy CMS, że możemy cały czas pracować na tej naszej stronie, że mamy gwarantowany uptime,

1:13że mamy skalowalność, darmowy certyfikat SSL i wiele wiele jeszcze innych rzeczy.

1:19No to wydaje mi się, że połączenie tego wszystkiego w całość ma naprawdę sens.

1:23W naszym przypadku nie ma wyjścia, jeżeli

1:25pracujemy z CMSem. Możemy przejść do sekcji Publish,

1:28a następnie przejść na przykład tutaj, aby dodać sobie custome'ową domenę.

1:34Zanim to zrobimy i tak będziemy musieli

1:35skorzystać z planu hostingowego. Nie da się podpiąć naszej własnej domeny,

1:39jeżeli go nie posiadamy. W związku z tym

1:41mamy tutaj do wyboru dwa typy planów Website i Ecommerce. My będziemy

1:44potrzebowali planu Website. Ecommerce będzie dla stron, które są wyposażone w moduł

1:49Ecommerce, moduł sklepu, natomiast Website jest wystarczające.

1:53Od tego wariantu CMS dla naszych zastosowań.

1:56Dlaczego? Ponieważ wcześniejszy wariant nie ma

1:58żadnych CMS item'ów, a tutaj będziemy mogli pracować na do 2 tys.

2:03CMS item'ów.

2:04Mamy też CMS API Access, czyli będziemy przez API mogli też dodawać coś do naszego

2:09CMSa, mamy funkcję wyszukiwarki, którą stworzyliśmy, trzech content edytorów

2:13na razie nam spokojnie wystarczy. Rzeczy,

2:15których nie ma w tym planie, to nie możemy przez formularz upload'ować plików, czy

2:19raczej nasi użytkownicy, nie mamy email supportu, jakichś dodatkowych rzeczy.

2:24I w zasadzie nie są to rzeczy naprawdę

2:26jakieś dla nas kluczowe i istotne. W zasadzie na ten plan biznesowy raczej

2:30przechodzi się w momencie kiedy potrzebujemy więcej wizyt.

2:33Tutaj mamy 100 tysięcy wizyt, co jest aż

2:36nadto, 100 statycznych stron to też wystarczy,

2:39no i 1000 zgłoszeń z formularza.

2:40Jeżeli będziemy potrzebowali więcej tych

2:43rzeczy, na ogół jedna z tych z tych trzech rzeczy determinuje to, że będziemy

2:47potrzebowali przesiąść się na trochę wyższy plan.

2:49Plany są dostępne w wariancie rocznym

2:51płatności, który jest tańszy chyba odpowiednio ok.

2:5520 proc.

2:55i w wariancie miesięcznym. Ten wariant miesięczny z miesiąca na

2:59miesiąc jest troszeczkę droższy natomiast my możemy teraz z niego skorzystać.

3:02Wybieram polecenie Add CMS, wybieram polecenie Add CMS Hosting.

3:06W moich danych bilingowych mam spiętą kartę, mam tam wpisane dane do faktury.

3:11Wszystko zostanie automatycznie przeprocesowane no i mamy to zrobione. Mogę

3:16zamknąć to okienko. Tutaj Webflow jeszcze oferuje nam taką opcję przypomnienia SMSem, gdyby

3:21z jakichś powodów nasz plan nie został automatycznie odnowiony np.

3:26nasza karta straciłaby ważność albo nie mielibyśmy na niej środków.

3:29Jest to ważna opcja, którą polecam Ci zdecydowanie wykorzystać dlatego, że, gdyby

3:34plan zawiódł, gdybyśmy przegapili wszystkie maile to nasza strona zniknie z hostingu, a

3:39co za tym idzie nie będzie działać, nasza czy naszego klienta, więc warto dodać tutaj

3:43sobie takie informacje, a ja to już mogę zamknąć.

3:46I teraz przejdźmy niżej na tej stronie do sekcji Custom Domains.

3:50To właśnie tutaj dodajemy sobie naszą własną domenę.

3:53Pierwsze co musimy zrobić to po prostu Add i ja skorzystam z takiej subdomeny,

3:58ale w zasadzie konfiguracja będzie identyczna skonfiguruję domenę Webflow.

4:02blog.eduweb.pl wybieram polecenie Add Domain.

4:06I teraz mam informację o tym, że u mojego

4:08dostawcy domeny powinienem dodać odpowiedni Record CName i ten Record CName

4:13dodajemy do naszej głównej domeny. Więc jeżeli ja mam Webflow blog subdomenę nie

4:17muszę jej nawet wcześniej tworzyć, tylko do głównej domeny eduweb.pl przechodzę do ustawień.

4:22Nawet, jeśli to jest subdomena to wtedy będę mógł dodać ten Record CName

4:26i go obsłużyć przez stosowne Name, który tutaj podamy. Ja skopiuję

4:31sobie Value najpierw kliknę raz, aby skopiować do schowka i przechodzę do

4:36dostawcy mojej domeny, a następnie dodaję nowy rekord DNS.

4:40Będzie to u każdego dostawcy bardzo

4:42podobnie wyglądało i teraz nazwa kanoniczna jest tutaj do podania.

4:46To jest właśnie ten adres proxy-css.webflow.com

4:48z tym, że niektórzy dostawcy wymagają podania kropki na końcu, niektórzy nie.

4:52Jeżeli jest wymagana, a nie podasz jej to nie przejdzie walidacji,

4:56a, jeżeli nie, no to automatycznie zostanie później dopisana, więc

5:00ja tutaj podaję akurat kropkę na końcu

5:01i w Host'cie będę chciał wpisać nazwę, czyli nazwę mojej subdomeny Webflow-blog.

5:07I w ten sposób, jak gdyby automatycznie się to utworzy. Wybieram polecenie OK.

5:12Przechodzę z powrotem na stronę Webflow i wybieram Check status. Oczywiście od razu

5:16się to nie zrobi i często musimy poczekać nawet parę godzin.

5:19Zwykle po kilku minutach te adresy DNS

5:22zostaną poprawnie przepisane. Jak klikniemy Check status to otrzymamy informację Connected,

5:27czyli, że wszystko jest w porządku. Teraz

5:29jeszcze kilka informacji o domenach. To, że mamy tutaj kolejną możliwość dodania

5:33domeny oznacza, że możemy podpiąć do naszej witryny Webflow naprawdę dużo domen, czy subdomen. To

5:38jest bardzo fajny sposób na to jak można sobie poradzić z różnymi domenami, które

5:42kiedyś mieliśmy, a teraz chcemy żeby wskazywały na jedną stronę.

5:46Możemy to w ten sposób zrobić, a pod spodem Webflow upora się z dodaniem odpowiednich

5:51rekordów, przekierowań dla Google, aby to wszystko dobrze działało.

5:55Jedna z tych domen jednak musi być

5:58domyślna, czyli musi mieć ikonę z takim domkiem i mieć informacje o tym, że jest

6:03to domena Default, czyli domyślna, a my możemy każdą z dodanych domen uczynić domyślną

6:08klikając właśnie na tę małą ikonkę. Wcześniej domyślnym adresem dla tej strony

6:12była subdomena Webflow, a teraz zmieniłem to na subdomenę webflow.blog.eduweb.pL.

6:18Ponadto mamy możliwość dodawania tutaj przekierowań 301. To też są

6:22przekierowania, które pozwolą nam z jednej podstrony np.

6:26Stuff.HTML przekierować coś np.

6:28na podstronę About albo na jakąś zupełnie inną podstronę,

6:31gdybyśmy usuwali starą stronę z

6:33regulaminem, chcieli ją przekierować tak, żeby wszystkie linki, które

6:37kierują z Google'a do starej strony regulaminu dobrze linkowały to moglibyśmy

6:42właśnie użyć przekierowań typu 301. Dla Google

6:45oznacza to, że nasza

6:47stara strona nie istnieje, a cały ruch i również cała wartość w kontekście

6:52pozycjonowania ma zostać przekierowana na nowy adres.

6:56Kolejne opcje, które tutaj mamy, opcje

6:58zaawansowane, to przede wszystkim włączenie SSL, co zdecydowanie polecam zrobić.

7:04W przypadku niektórych serwerów i dostawców domen

7:07czasem jest tak, że na głównym Host'cie, na głównej domenie bez przedrostka www,

7:12ustawienie SSL wymaga pewnych dodatkowych kroków.

7:15Zresztą informuje o tym Webflow w tym

7:17miejscu, więc, jeżeli tak jest w Twoim przypadku, wybierz ten link po to, żeby

7:21skonfigurować odpowiednio Twoją główną domenę u dostawcy.

7:25Ja jednak nie będę tego omawiał, bo nie jest to częsty przypadek.

7:28Następnie mamy opcję minifikacji HTML, CSS, JS itd.

7:32To są opcje, które dostępne są także w Designerze.

7:36Teraz, jeżeli odświeżę sobie Designera, to zobaczysz, że nasza domena już pojawi

7:41się tutaj jako domena główna, pod którą będziemy publikować.

7:45To zobaczysz, że w sekcjach publikowania

7:48już będziemy mogli opublikować pod tą domeną webflog.blog.eduweb.pl.

7:53Możemy ją zaznaczyć równolegle z tą subdomeną Webflow, czyli możemy nie zawsze publikować na

8:00naszej głównej domenie, a opublikować sobie zmiany np.

8:03na subdomenie Webflow, później je komuś wysłać do

8:05zaakceptowania i dopiero, gdy będą OK po prostu kliknąć sobie kolejny Checkbox

8:10i opublikować to również na tej naszej głównej domenie.

8:13No i te opcje zaawansowane, o których wspomniałem to są dokładnie te same opcje,

8:16które znajdują się tam w panelu, czyli możliwość zminifikowania kodu CSS.

8:20Domyślnie nie jest zaznaczona,

8:22natomiast polecam, jeżeli już produkcyjnie pracujemy ze stroną ją zaznaczyć.

8:26To tylko dlatego, że ten kod zminifikowany jest zdecydowanie mniej czytelny

8:30i, jeżeli używamy narzędzi inspekcji, czy np.

8:32podglądamy sobie kod tutaj, no to lepiej jest mieć ten kod w pełnej wersji, ale jak

8:37już wyrzucamy to na produkcję, jak już mamy wersję właśnie taką produkcyjną, to warto

8:41zminifikować również kod CSS, aby oszczędzić te cenne kilobajty ładowania danych.

8:47Wszystkie te opcje pozostawiamy w związku z tym włączone i ewentualnie włączamy też

8:52Secure Frame headers. To dotyczy opcji takiego embeddowania naszej strony z pomocą Iframe'a.

8:58Domyślnie jest to zaznaczone dla sklepów. Nie będę może tego szczegółowo

9:02tłumaczył, zostawiłbym tę opcję tak jak jest teraz.

9:05Jeżeli chcesz możesz o niej doczytać. Ja wybieram polecenie Publish to selected domains.

9:09I w tym momencie nasza strona równolegle

9:12jest publikowana już na naszej domenie dodanej, a także na domenie Webflow.

9:16Następnie mamy informację o tym, że są indeksowane wyniki wyszukiwania.

9:22To jest właśnie związane z wyszukiwarką,

9:24którą zainstalowaliśmy. Webflow informuje nas, że do pięciu minut mogą się

9:29te rzeczy, które są na naszej stronie indeksować i do tego czasu Search może

9:34nie działać poprawnie, nie zwraca Ci wszystkich wyników. Elastic search działa w

9:38ten sposób, że on musi zaindex'ować wszystkie wyniki i robi to automatycznie

9:44w Webflow co określony czas np.

9:45co 72 godziny.

9:47Ale możemy też wymusić przebudowanie tych wyników wyszukiwania.

9:51Możemy to zrobić przechodząc do tej małej

9:53ikonki z trybikiem, Setup, a następnie mamy tutaj opcję Search.

9:57Wchodzimy do opcji Search i możemy ręcznie odpalić indeksowane.

10:01Wybieramy polecenie Index now i wtedy

10:03wszystkie te nasze wyniki się przeindeksują. W zależności od różnych opcji i pakietów,

10:08które mamy wykupione w Webflow te indeksowanie danych w wyszukiwarce

10:13w Elastic search, czy działa szybciej, czy wolniej to, które jest zaplanowane teraz jest co 72

10:19godziny, czyli co 3 dni będzie się to przeładowywać,

10:22ale, jeżeli zmienią się istotnie, jakaś

10:24zmieni się struktura danych lub zmienią się nasze posty i chcielibyśmy, żeby były

10:28one zaindeksowane jak najszybciej w wyszukiwarce lokalnej na stronie,

10:32wtedy klikamy opcję Index now.

10:35I to w zasadzie wszystko, jeśli chodzi o

10:37podpięcie naszej własnej domeny i podpięcie hostingu od Webflow.

10:42Więc widzisz, że wymaga to dosłownie kilka minut pracy, a dzięki temu nasza strona już

10:46jest Live i wszystkie jej funkcje, w tym CMS, działają.

10:49Działa także edytor, który będę mógł zaraz Ci pokazać.

10:52Podejrzyjmy tylko stronę na naszej subdomenie,

10:55czy już działa. To może rzeczywiście

10:57potrwać kilka, kilkanaście minut, a jeżeli będziesz często wchodził na tę subdomenę, to

11:02może się okazać, że to nawet potrwa kilka godzin, bo gdzieś się scatche'uje,

11:06ale jak widzisz teraz jest to dostępne pod

11:09tym moim właściwym adresem na eduwebie i możemy przeglądać posty, możemy patrzeć

11:15jaka jest wydajność teraz tej strony, możemy przeglądać wszystkie kategorie.

11:19Na razie jeszcze nie ma co testować wyszukiwarki, sprawdzimy ją później. Taka

11:22pierwsza publikacja wymaga tego żeby ten Search się przemielił

11:25I na ogół trwa to jakiś czas, ale w tej

11:27lekcji to już wszystko. Dziękuję Ci bardzo za uwagę i do usłyszenia już za chwilę.