Poradnik - Jak stworzyć stronę internetową krok po kroku

Darmowy poradnik dla osób, które chcą stworzyć własną stronę internetową na bazie Wordpressa.

1. Poradnik
JAK STWORZYĆ STRONĘ INTERNETOWĄ
krok po kroku
dla zielonych
Wersja: 1.0
1

2. 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

3. Spis treści
Wstęp 4
Krok 1: Serwer hostingowy 5
Krok 2: Domena internetowa 10
Krok 3: Podpięcie domeny pod hosting 12
Krok 4: Utworzenie strony internetowej 16
1) Instalacja CMS WordPress 16
2) Ustawienie wyglądu – motywu graficznego 19
3) Konfiguracja strony – menu, treści 21
Podsumowanie 24
3

4. 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: [email protected]
4

5. 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 NVMe H1 2GB, zapłacisz 82,41 zł
brutto na cały rok, więc nie są to duże koszty.
A więc zaczynamy.
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.

6. 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

7. Wypełniasz formularz swoimi danymi i na koniec klikasz Zarejestruj się. Jeśli
wszystko wpisane jest prawidłowo, dostaniesz komunikat:
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ść.
7

8. Po wypełnieniu wszystkich danych z gwiazdką, 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ś.
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.
8

9. 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.
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.
9

10. 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.
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.
10

11. 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,
potwierdzające rejestrację. Jeden z firmy Seohost, a drugi z adresu
[email protected], 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.
11

12. 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:
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:
12

13. Na liście dostępnych domen na serwerze, pojawiła się również Twoja:
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:
13

14. 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:
14

15. 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.
15

16. 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
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ś.
16

17. 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ę:
17

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:
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ć:
18

19. 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.
2) Ustawienie wyglądu – motywu graficznego
Nim przejdziemy do konfiguracji strony, najpierw pokażę Ci jak zmienić jej
wygląd, tak abyś wiedział w jaki sposób się to robi.
Najpierw musisz zalogować się do panelu administracyjnego WordPressa (to
ten adres z końcówką /wp-admin/). Po zalogowaniu przywita Cię specjalny
kokpit, za pomocą którego będziesz mógł zarządzać swoją witryną. Aby zmienić
motyw graficzny, wybierz z menu Wygląd → Motywy. Wyświetli się obecny
motyw, który jest domyślnie zainstalowany. Kliknij Dodaj nowy motyw, a
wyświetli się lista dostępnych szat graficznych do WordPressa. Jest tego
naprawdę dużo, kilka tys. motywów o różnej kolorystyce, układzie menu, więc
na pewno znajdziesz odpowiedni do tematyki swojej strony. Można wejść w
każdy i podejrzeć jego wygląd.
19

20. Gdy znajdziesz odpowiedni motyw, kliknij Szczegóły i Podgląd, a następnie
Zainstaluj i Włącz, aby zastąpić dotychczasowy motyw.
W tym momencie zmieniłeś wygląd strony na taki który Ci odpowiada. Jako że
tych motywów jest tysiące, to siłą rzeczy w tym poradniku nie poruszymy
tematu edytowania każdego z nich. W następnym punkcie pokażę
najważniejsze elementy, które są wspólne dla każdego motywu, abyś miał
ułatwione zadanie przy dalszym dostosowywaniu witryny pod swoje potrzeby.
20

21. 3) Konfiguracja strony – menu, treści
Żeby nie komplikować, ustawienia konfiguracyjne, opiszę na domyślnym
motywie (Twenty Twenty-Four), który był dostarczony do WordPressa.
Najważniejszą kwestią w WordPressie, którą trzeba zapamiętać jest to, że
możesz w nim stworzyć dwa typy stron z treścią – stronę (statyczną) oraz wpis.
Strona to jest stały element witryny (inaczej mówiąc podstrona). Będzie to np.
Oferta, O nas, Kontakt, czyli strony które mają z reguły stałą treść. Natomiast
wpis, to coś w rodzaju artykułów, które będziesz wstawiał cyklicznie np.
Aktualności czy artykuły blogowe, w zależności od tego charakter ma mieć
Twoja strona. Tworzenie i dodawanie stron oraz wpisów jest banalnie proste,
jakbyś to robił w zwykłym edytorze tekstu. Możesz je tworzyć, wchodząc z
kokpitu panelu administracyjnego:
Wpisy → Utwórz wpis
Strony → Utwórz stronę
Na początek możesz stworzyć strony statyczne, które będą zawierać
najważniejsze punkty Twojej witryny.
Kolejnym etapem będzie edycja motywu graficznego, która jest dostępna w
Wygląd → Edytor
21

22. W edytorze możesz dowolnie zmieniać poszczególne elementy strony:
•Nawigacja (główne menu)
•Style (tła, rodzaje i kolory czcionek)
•Strony (w tym miejscu też możesz dodawać podstrony)
•Szablony (edycja każdego elementu motywu graficznego)
•Wzorce (różne wzory wyglądu strony)
Do tego z prawej strony edytora, jest wizualny edytor strony wraz z podglądem.
Tutaj klikając na poszczególne elementy strony, możesz je edytować, przesuwać
czy usuwać.
22

23. Możliwości edycji strony jest tak dużo, że niestety wykracza to poza ramy tego
poradnika. Musiałby mieć on wtedy kilka razy więcej stron niż obecnie, a i tak
nie wyczerpywałby w pełni tematu. Ale spokojnie, większość rzeczy w
WordPressie jest intuicyjnych, do których metodą prób i błędów sam dojdziesz.
Zawsze też możesz się podeprzeć oficjalną dokumentacją lub społecznością w
internecie.
23

24. Podsumowanie
Jeśli wykonałeś wszystkie kroki z poradnika, to trzeba podsumować co zostało
zrobione:
1. Założyłeś serwer hostingowy
2. Wybrałeś i zarejestrowałeś domenę (adres swojej strony)
3. Zainstalowałeś skrypt strony oparty na CMS WordPress
4. Wybrałeś motyw graficzny, czyli to jak strona ma wyglądać
5. Posiadasz gotową stronę, którą trzeba wypełnić własnymi treściami i
zmodyfikować pod własne potrzeby
Mam nadzieje że wszystko w tym poradniku zostało opisane w sposób
zrozumiały i przystępny dla osoby, która wcześniej nie miała do czynienia z
tworzeniem stron internetowych.
I jeszcze raz prośba ze wstępu. Jeśli uważasz, że jakiś jego fragment jest
niezrozumiały, widzisz błąd lub chciałbyś przesłać jakąś sugestię, pisz śmiało
maila do autora – [email protected]
Będę wdzięczny za feedback co sądzisz o poradniku. Natomiast jeśli zajdzie taka
potrzeba, jego treść na pewno będzie aktualizowana.
24