Poradnik JAK STWORZYĆ STRONĘ INTERNETOWĄ krok po kroku dla zielonych Wersja: 1.1 1 Ranking Domen i Hostingów https://rankhost.pl Poradnik może być kopiowany oraz rozpowszechniany wyłącznie bezpłatnie oraz w formie, w jakiej został dostarczony przez autora. Zabrania się dokonywania jakichkolwiek zmian w publikacji. Copyright © by RankHost.pl Wszelkie prawa zastrzeżone 2 Spis treści Wstęp 4 Krok 1: Serwer hostingowy 5 Krok 2: Domena internetowa 11 Krok 3: Podpięcie domeny pod hosting 13 Krok 4: Utworzenie strony internetowej 17 1) Instalacja CMS WordPress 17 2) Ustawienie wyglądu – motywu graficznego 21 3) Konfiguracja strony – menu, treści 23 Podsumowanie 26 Bonus 27 3 Wstęp Na wstępie warto odpowiedzieć na pytanie - dla kogo jest ten poradnik? Dla każdego kto chciałby mieć własną stronę internetową z własnym unikalnym adresem (domeną), ale nie wie jak to zrobić. Dla specjalistów z tej branży nie będzie miał on zastosowania, bo w poradniku skupimy się na zupełnych podstawach. Nie będzie tu nauki HTMLa, CSS, baz danych czy innych takich. W tytule dodaliśmy że poradnik jest dla „zielonych”. Ale dla zielonych w sensie ambitnych ludzi, którzy chcą własnymi siłami stworzyć swoją stronę www, bez pomocy profesjonalistów. Stronę prywatną lub firmową, nieważne. Masz niewielką działalność gospodarczą i chcesz mieć stronę firmową, właściwie po kosztach (hostingu i domeny), bez potrzeby płacenia programistom, to dobrze trafiłeś, bo możesz to zrobić samodzielnie. Oczywiście stronę w podstawowej wersji, bez skomplikowanych funkcjonalności. Poradnik będzie Cię prowadził krok po kroku jak wykonać wszystkie czynności, aby zakończyło się to utworzeniem gotowego okna na świat, jakim jest witryna internetowa W poradniku postaram się opisywać wszystkie operacje w sposób zrozumiały dla każdego, wszystko okraszone screenami i uwagami. Jeśli będziesz wykonywał po kolei wszystko dokładnie tak jak jest tutaj opisane, nie ma prawa się nie udać. Jeśli zatrzymasz się w jakimś miejscu, proszę o kontakt zwrotny, wtedy postaram się doradzić, a następnie zaktualizować poradnik, żeby był zrozumiały dla kolejnych osób. Kontakt: info@rankhost.pl 4 Krok 1: Serwer hostingowy Pierwszym podstawowym krokiem, jest wybór hostingu , czyli miejsca na serwerze, na którym będzie znajdowała się Twoja strona. Po ludzku, jest to miejsce na dysku komputera (serwera), fizycznie znajdującego się w serwerowni firmy, u której kupujesz tę usługę. Jest on skonfigurowany w taki sposób, żeby każdy internauta ze świata mógł się z nim łączyć, pobierać i wyświetlać na swoim komputerze Twoją witrynę. Serwer można przyrównać do budynku, który jest niezbędny , aby w środku zamontować maszyny i miejsce dla pracowników, gdy ktoś otwiera firmę produkcyjną. Bez takowego nie da się w ogóle ruszyć. Na potrzeby poradnika, jeśli mamy pracować nad realnym projektem, postanowiliśmy wybrać ofertę firmy seohost.pl Firma Seohost.pl posiada bardzo dobrą ofertę dla małego projektu internetowego, który właśnie dzięki temu poradnikowi wykonasz własnoręcznie. Kupując najniższy pakiet Hosting SSD NVMe H1 2GB , zapłacisz 119,31 zł brutto na cały rok , więc nie są to duże koszty. Tę cenę możesz jeszcze obniżyć o -35% , o czym za chwilę. 5 I tutaj mała uwaga. Powyższy link jest linkiem partnerskim, więc dzięki temu że go użyjesz do wykupienia hostingu, autor dostaje niewielkie wynagrodzenie i nie ma to wpływu na cenę końcową hostingu. Możesz to potraktować jako podziękowanie za opracowanie tej publikacji, gdyż jest ona udostępniona w pełni za darmo . Oczywiście nie musisz z niego korzystać, decyzja należy do Ciebie, ale na czymś trzeba było oprzeć ten poradnik. A więc zaczynamy. Na początek trzeba wybrać pakiet hostingowy i założyć konto użytkownika. W tym celu wchodzisz na tą stronę » link « Następnie z górnego menu wybierasz Serwery → Najszybszy Hosting NVMe , wybierasz pakiet Hosting SSD NVMe H1 i na dole klikasz Uruchom W tym momencie zostaniesz przekierowany na stronę podsumowania zamówienia. Klikasz przycisk Zamawiam i wyskoczy Ci strona, na której rejestrujesz konto w Seohost. 6 Wypełniasz formularz swoimi danymi i na koniec klikasz Zarejestruj się . Jeśli wszystko wpisane jest prawidłowo, dostaniesz komunikat: 7 Teraz wystarczy wejść w skrzynkę pocztową, którą podałeś podczas rejestracji i kliknąć w link aktywacyjny. Po jego kliknięciu od razu zaloguje Cię do panelu użytkownika Seohost i przekieruje na stronę z usługą hostingową do opłacenia. W pierwszej kolejności będziesz musiał wypełnić pełne dane : imię i nazwisko, adres, kod pocztowy, miejscowość Są one niezbędne przy płatności i potwierdzają że usługa zostanie przypisana do konkretnej osoby oraz zakupu domeny o czym w kolejnym kroku. Ponadto jeśli strona ma być firmowa, to wprowadzasz dane firmy, dzięki czemu dostaniesz fakturę kosztową na swoją działalność. 8 Po wypełnieniu wszystkich danych z gwiazdką u góry (pod usługą serwera), klikasz napis „ Masz kod rabatowy? ”. Wyskoczy okienko do wpisania kodu rabatowego, który obniży koszt serwera o -35% . Ten kod to: rankhost Po kliknięciu Zapisz , cena hostingu zostanie obniżona. Teraz możesz przystąpić do opłacenia usługi. Klikasz na dole Zapłać za wybrane usługi . Wyświetlą się dane do faktury i opcje płatności za hosting: - PayU - Opłacanie faktury proforma - Przelew mBank - PayPal Wybierasz dla Ciebie najbardziej optymalny rodzaj płatności i dokonujesz przelewu. Procedura taka sama jak wszystkie inne płatności internetowe, które na pewno nie raz wykonywałeś. 9 Po opłaceniu dostaniesz wiadomość e-mail z informacją o tym, że Twój nowy serwer został uruchomiony. Serwer również pojawił się w panelu użytkownika w zakładce Serwery dostępnej w menu z lewej strony. Wracając do maila, otrzymasz tam wszystkie dane dostępowe do swojej wirtualnej maszyny, wraz z hasłami i adresami serwerów, które będą potrzebne do dalszej pracy. Dlatego tego maila możesz oflagować w poczcie, bo będziemy do niego często wracać. Znajduje się tu adres panelu , nazwa użytkownika (login) i hasło do drugiego panelu za pomocą, którego możesz zarządzać swoim serwerem hostingowym. Panel opiera się na jednym z najpopularniejszych systemów DirectAdmin . I tą nazwę możesz zapamiętać, bo w dalszych częściach będziemy nią operować, jeśli będzie trzeba coś skonfigurować na serwerze. Panel DirectAdmin jest bardzo intuicyjny i prosty w obsłudze, co również zaważyło na wyborze go jako przykładowego w tym poradniku. 10 Ale do niego jeszcze wrócimy. Dopóki jesteś jeszcze zalogowany w panelu użytkownika firmy Seohost, to możesz wykupić kolejną ważną rzecz. Chodzi oczywiście o domenę internetową dla swojej strony, o czym w kolejnym kroku. Krok 2: Domena internetowa Domena internetowa to jest ten adres, który wpisujesz w okienku przeglądarki internetowej Jaka to będzie nazwa to już zostawiam w Twojej gestii. Może to być np. nazwa firmy: nazwafirmy.pl Natomiast jeśli to ma być prywatna strona np. z Twoim portfolio, cv itd., może mieć postać Twojego imienia i nazwiska: jankowalski.pl Może to być również jakaś inna nazwa, wszystko zależy od Ciebie. Jeśli strona ma być robiona po polsku i będzie miała tylko polskich odwiedzających, to naturalnie jakby była właśnie z końcówką .pl , chociaż nie jest to obowiązkowe. Równie dobrze może mieć końcówkę .com, .net, .org, czy .eu. Oczywiście należy mieć też na uwadze, że konkretna nazwa domeny może być już zajęta Koszt domeny (.pl) w tej samej firmie co przed chwilą wykupiłeś hosting, to 12,14 zł brutto za pierwszy rok, potem odnowienia kosztują 68,88 zł brutto rocznie. Jest to bardzo niska cena, gdyż w innych firmach potrafi być ona trzy razy droższa. 11 Teraz możemy przystąpić do rejestracji domeny. W panelu Seohost wchodzisz z lewego menu w zakładkę Domeny → Zarejestruj domenę Pojawi się wyszukiwarka, za pomocą której wyszukasz czy dana domena jest wolna. Na potrzeby tego poradnika zakupię domenę jakstworzycwww.pl , więc postępuj tak jak ja na przykładzie. Wybrana przez nas domena jest wolna, więc teraz dodajemy ją do koszyka. System zapyta czy chcesz kontynuować wyszukiwanie domen. Dajesz NIE i przeniesie Cię do karty Usługi do opłacenia, podobnej do tej która była przy opłaceniu hostingu. Z tym że danych osobowych już nie musisz wpisywać, gdyż system pamięta te co ostatnio były wpisywane. Następnie procedura opłacenia wygląda podobnie jak w kroku 1. Po prawidłowej płatności, zakupiony adres strony znajdziesz w panelu użytkownika w sekcji Domeny . Na adres e-mail dostaniesz również dwa maile, 12 potwierdzające rejestrację. Jeden z firmy Seohost, a drugi z adresu automat@dns.pl , czyli od rejestratora polskich domen narodowych, którym jest NASK. Jeśli domena będzie np. z końcówką .com lub inną międzynarodową, wiadomość potwierdzająca może być w języku angielskim. Gratulacje! Masz już hosting na swoją stronę i adres internetowy do niej. Krok 3: Podpięcie domeny pod hosting Teraz trzeba jeszcze podpiąć zakupioną domenę pod serwer hostingowy. W slangu hostingowym nazywa się to parkowaniem domeny . Procedurę tą wykonasz już w panelu administracyjnym serwera, czyli w DirectAdmin, którego dane dostałeś w mailu po opłaceniu pakietu hostingowego. Jego treść dałem w grafice w Kroku 1. Po zalogowaniu do DirectAdmin, wchodzisz w menu z lewej strony w Zarządzaj → Ustawienia domeny i następnie klikasz zielony przycisk + Dodaj nową Otworzy się okienko dodawania domeny do serwera: 13 Wpisujesz w formularzu adres wcześniej kupionej domeny, natomiast resztę ustawień pozostawiasz, tak jak jest to domyślnie ustawione. Po kliknięciu Utwórz , powinien pojawić się następujący komunikat, świadczący o tym że operacja przebiegła prawidłowo: Na liście dostępnych domen na serwerze, pojawiła się również Twoja: 14 Widoczna jest ona również z poziomu rozwijalnej listy na górze strony. Możesz dodatkowo ją zweryfikować, wpisując adres domeny w pasku adresu swojej przeglądarki. Powinna pojawić się taka strona: 15 Oznacza to że domena jest prawidłowo połączona z serwerem, ale jeszcze nie ma na niej żadnej zawartości. Powyższa plansza jest domyślną zawartością. Na koniec warto doinstalować do domeny darmowy certyfikat SSL (kłódeczka przy adresie strony w przeglądarce), który jest w pakiecie z hostingiem i w obecnych czasach jest niezbędny. Każda strona internetowa, powinna go posiadać. Aby to zrobić, wchodzisz kolejno w Zarządzaj → Certyfikaty SSL i wybierasz opcję Uzyskaj automatyczny certyfikat od dostawcy ACME Formularz powinien sam się uzupełnić o dane Twojej domeny, będzie to wyglądało tak: 16 Upewnij się że Twoja domena jest wpisana i oznaczona, w miejscach zaznaczonych na czerwono. Reszta ustawień pozostaje bez zmian. Na koniec klikasz Zapisz . Jeśli wszystko przebiegło prawidłowo otrzymasz komunikat: LetsEncrypt request successful for: jakstworzycwww.pl mail.jakstworzycwww.pl www.jakstworzycwww.pl Teraz gdy wejdziesz w adres strony, w przeglądarce internetowej pojawi się kłódka przy adresie, która świadczy że komunikacja ze stroną jest bezpieczna. Teraz pora na kolejny krok, czyli utworzenie własnej strony www. Krok 4: Utworzenie strony internetowej W tym kroku przystępujemy do stworzenia własnej witryny internetowej. Poradnik ma Ci pokazać jak to zrobić najszybciej i najprościej , więc my skupimy się tylko na jednym sposobie. A mianowicie zainstalowaniu darmowego CMS (skryptu) o nazwie WordPress , który jest dostępny w polskiej wersji językowej i jest responsywny , czyli będzie działać prawidłowo na urządzeniach mobilnych typu smartfon czy tablet . Na tym systemie działa naprawdę dużo stron internetowych na świecie, pewnie dlatego że jest on darmowy i łatwy w obsłudze dla ludzi „nietechnicznych”. WordPress jest bardzo elastyczny, można z niego zrobić właściwie każdy rodzaj strony. Od zwykłej strony firmowej czy bloga amatorskiego po profesjonalny portal informacyjny. 1) Instalacja CMS WordPress 17 W naszym przypadku instalacja WordPressa, będzie bardzo przyjemna i szybka. Hosting, w którym wcześniej wykupiłeś usługę, posiada gotowy autoinstalator tego systemu, więc nie będzie trzeba się bawić w ręczne instalowanie tego wszystkiego – co łatwe nie jest. Na początek zaloguj się do panelu DirectAdmin (patrz mail o uruchomieniu serwera). Z lewego menu wybierz Polecane aplikacje → WordPress . Otworzy się okno instalacji, klikasz + instaluj tę aplikację . Teraz będzie trzeba uzupełnić kilka rzeczy. W pierwszej kolejności należy wybrać domenę na której ma być zainstalowany skrypt strony , czyli wybierasz tą, którą wcześniej zarejestrowałeś. Ważne żebyś z rozwijanej listy wybrał domenę z przedrostkiem https:// , tak żeby strona zainstalowała się na adresie z szyfrowaniem SSL. Następnie niżej w sekcji Ustawienia , wpisujesz swoje dane do logowania na stronę: 18 Wypełniasz własnymi danymi, to co jest w czerwonym prostokącie na grafice: Login Administratora – login, za pomocą którego będziesz się logować do panelu administracyjnego Twojej strony, może być dowolny. Hasło Administratora – postaraj się stworzyć jakieś silne hasło i zapamiętaj je. E-mail Administratora – gdy zapomnisz hasła, za jego pomocą możesz je odzyskać. Tytuł Strony – możesz dać nazwę swojej strony, jeśli jest to strona firmowa, może to być coś w stylu „Strona internetowa firmy XYZ”. Motto WWW – dodatkowy tekst w tytule strony, np. jakaś zajawka. Reszta ustawień pozostaje bez zmian. Gdy już wszystko uzupełnisz, klikasz + Zainstaluj , aby system WordPress został zainstalowany na serwerze. Ta procedura potrwa dosłownie kilka, maksymalnie kilkanaście sekund, po czym pokaże się podsumowanie: 19 Gotowe. Na obrazku zaznaczyłem dwa najważniejsze adresy. Adres Twojej strony (czyli wcześniej wykupiona domena) i adres do panelu administracyjnego, który ma taką postać: twojadomena.pl /wp-admin/ Powyższy adres zapisz sobie w ulubionych , bo będziesz do niego wracał za każdym razem, gdy trzeba będzie coś zmienić na stronie. Teraz wpisz adres swojej domeny w przeglądarkę i zobaczysz już stronę internetową, która ma pełnoprawny wygląd strony www. To co widzisz, to domyślny szablon WordPressa. W kolejnym punkcie wyjaśnię Ci jak można go zmienić, aby był dostosowany do Twoich preferencji. To już właściwie koniec pracy w panelu serwera DirectAdmin, teraz dalsza praca będzie się odbywała już w panelu administracyjnym strony WordPress, o czym niżej. 20