Staging i razvoj – Pravljenje WordPress sajta [06]

U ovom članku ću na sistematičan način objasniti korake potrebne da se krene sa razvojem sajta. Koristim WordPress sajt za primer, ali princip je sličan i za druge CMS-ove, ili statičke HTML sajtove.

• Pravljenje WordPress sajta [01] Email
• Pravljenje WordPress sajta [02] Domen i nameserveri
• Pravljenje WordPress sajta [03] Hosting
• Pravljenje WordPress sajta [04] DNS
• Pravljenje WordPress sajta [05] Podešavanje hostinga i SSL
• Pravljenje WordPress sajta [06] Staging i razvoj
• Pravljenje WordPress sajta [07] Vizuelni i funkcionalni dizajn

Sadržaj:

1. Uvod i osnovni termini
   1.1. Ograda & kratka digresija
   1.2. Razvoj (development) sajta
   1.3. Održavanje sajta
   1.4. Test (eng. “staging”) okruženje za razvoj sajta
2. Kreiranje razvojnog (eng. “staging”) orkuženja
3. Instalacija WordPress-a na lokalu, ili serveru
4. Zaključak
5. VIDEO demonstracija (na engleskom) kako instalirati WordPress i napraviti staging kopiju

1. Uvod i osnovni termini

U ovom članku, kao i u većini drugih, daću dosta linkova. Linkovi su uglavnom druge stranice ovog sajta, gde su dati termini/pojmovi detaljnije objašnjeni. Najčešće vode da određeno poglavlje linkovane stranice – sa konkretnim objašnjenjem. Preporučujem da, kada vam je neki termin nejasan, otvorite dati link u novom tabu browser-a, pa se posle vratite tamo gde ste stali i nastavite sa čitanjem ovog članka.

Ovde je kratak pregled troškova razvoja i održavanja WordPress sajta.

1.1. Ograda & kratka digresija

Da počnem sa ogradom: ja nisam ono što biste nazvali profesionalnim web-developerom. Imam nešto iskustva sa svojim, tuđim, i par klijentskim sajtovima, ali ne živim od tog posla. Sve informacije date ovde su: “najbolje što znam”.
Koga zanima, platu dobijam za posao “sistem administrator”. Kompanija mi da da prčkam po serverima, mrežnoj infrastrukturi, a vole i kad rešim problem na računaru korisnika. Posao je lep, komunikacija je direktna i odlična:
– Kad sve radi: “Za šta te plaćamo?”
– Kad nešto ne radi: “Za šta te plaćamo!?”
Naučnici, menadžeri (i ja lično) još uvek nisu odgovorili na ova pitanja...

Da se vratimo na temu.

1.2. Razvoj (development) sajta

Pod ovim terminom misli se na kreiranje izgleda i funkcionalnosti sajta: meniji, opcije za pretragu, prijava na mejling listu, keširanje sajta, implementaciju Google AMP stranica, SEO itd, u zavisnosti od želja, potreba i budžeta. Obično se prilikom dizajna i razvoja sajta doda i neki osnovni sadržaj, barem kao “kostur”. Nekad se doda i kompletan sadržaj, pogotovo ako je u pitanju re-dizajn postojećeg sajta.

Šta se tačno radi u vezi vizuelnog dizajna i funkcionalnosti, može drastično varirati. Stvar je dogovora (ako se radi za klijenta), ili odluke (ako se radi za sebe).

1.3. Održavanje sajta

Ovaj termin nije usko vezan za razvoj sajta, ali mislim da ga treba objasniti. Nekada održavanje sajta podrazumeva i izvesne izmene izgleda, ili/i funkcionalnosti, tako da je u tom smislu na neki način povezano sa razvojem sajta.

Održavanje sajta u užem smislu reči znači “da neko baci oko s vremena na vreme na sajt i hosting server”. Konkretnije:

• Da li je sajt on-line i da li se normalno učitava.
• Da li su SSL/TLS sertifikati instalirani i obnavljaju li se na vreme.
  
  Ove dve stvari se mogu automatizovati pomoću (besplatnog) alata HetrixTools (affiliate link).
  
• Ukoliko se koristi WordPress, ili drugi CMS – jesu li svi plaginovi i teme ažurirani i rade li normano posle ažuriranja. Automatizacija ovog procesa za više sajtova nosi rizik da bezbednosni propust u alatu za automatizaciju ugrozi bezbednost više sajtova. Ovo se pogotovo odnosi na WordPress plagine za automatsko ažuriranje. Na primer problem sa InfiniteWP plaginom. Takođe, najbolje je prvo probati na testnom okruženju (više o tome kasnije), pa tek onda primeniti ažuriranja na živim, produkcionim sajtovima. Naravno – pre ažuriranja poželjno je uraditi bekap.
• Da li se bekapi sajta rade redovno (posle ažuriranja sadržaja svakako). Može li se sajt vratiti iz bekapa (test integriteta bekapa). Primer automatizacije bekapa sajta (pomoću JetBackup alata).
• Da li je sajt vidljiv pretraživačima (Guglu) i ima li tu nekih problema – primer alata za proveru je Google Search Console (GSC – kako konfigurisati).
• Je li hosting server preopterećen (primer testa i provere opterećenja hosting servera). Ako jeste, moraćete bolje optimizovati sajt, bolje podesiti keširanje sajta, ili uzeti jači hosting za sajt – jedno ne isključuje ostale, ali bih krenuo datim redosledom.
• Provera jesu li plaćene na vreme sve potrebne licence (za softver, plagine, teme…), hosting nalozi, registracije domena itd.
• Provera sajta i hosting servera za viruse i hakove. Napisao sam članak o tome kako obezbediti WordPress sajt.
• Praćenje, eliminisanje i prevencija spem komentara i registracija na sajtu. Pošto oni štete reputaciji domena i mejla. Ne želite da spamer, ili bot koristi tuđu mejl adresu, a ta osoba, pošto nije učestvovala u tome, dobijenu notifikaciju na mejl označi kao spam. Isto tako, ako spameri često koriste nepostojeće mejl adrese, pa će vaš mejl server slati dosta mejlova koji bivaju odbijeni (ne mogu se dostaviti) – onda možete završiti na crnoj listi ni krivi ni dužni.

Ovo su neke od najbitnijih stvari vezanih za održavanje sajtova. Savremen sajt najčešće nije namesti-jednom-i-ne-diraj. Ne znam koliko je ovo korisno za iskusne developere, ali ja bih samo poslao link ka ovom poglavlju ako me neko pita zašto (toliko) naplaćujem održavanje sajta i zašto je to potrebno.

1.4. Test (eng. “staging”) okruženje za razvoj sajta

Kada se sajt razvija, bilo da je reč o pravljenju novog, ili re-dizajnu postojećeg sajta, uputno je to raditi na testnom okruženju. Isto važi i za bilo koje ažuriranje plagina, ili teme – barem ako mene pitate. Šta je ovo?

Idealno, radi se o potpuno odvojenoj instalaciji, bilo na lokalnom računaru, ili drugom hosting nalogu i (pod)domenu. Na primer:

Ovaj sajt je io.bikegremlin.com. To je “živ“, “produkcioni” sajt. Staging bih mogao raditi na svom računaru, lokalno, ili na odvojenom poddomenu, tipa staging03.bikegremlin.com i slično.

Kada je razvoj gotov, radi se migracija (tj. kloniranje) sajta na glavni domen i, ako je tu već postojao sajt, zamenjuje ga. Vizuelno se to može ovako prikazati:

Naravno, ako se pravi sajt od nule, onda siva strelica (kloniranje živog sajta) neće postojati.

2. Kreiranje razvojnog (eng. “staging”) orkuženja

Izmene i razvoj sajta, tehnički se najbrže rade na lokalnom računaru. Dok je moguće to raditi i na hosting serveru, sa posebnim domenom, ili pod-domenom (kako je objašnjeno u poglavlju 1.4.). Iako se lokalni računar može podesiti tako da simulira ponašanje hosting servera, lično najviše volim da konačni test uradim baš na pravom hosting serveru. Za tu namenu su mi veoma praktični reseller hosting nalozi.

Za podešavanje staging okruženja na hosting serveru, možete videti moje objašnjenje za podešavanje hosting naloga za WordPress. Samo koristite drugi domen, ili poddomen (staging03.vasdomen.com). Nakon toga možete koristiti i Softaculous za pravljenje staging kopije sajta, sa praktično nekoliko klikova (ako Vaš hosting provajder pruža Softaculous).
Ako hosting server ima instaliran Softaculous, pomoću njega se može i instalirati WordPress, a i jednim klikom napraviti staging kopija sajta, koja se posle jednim klikom lako sinhronizuje. Za detalje videti:
Softaculous WordPress instalacija i menadžment staging okruženja.

Podešavanje na lokalnom računaru:

1. Za podešavanje staging okruženja na svom lokalnom računaru, najlakše je koristiti Local by Flywheel. Napravio sam kraći tutorijal (sa sve videom) o tome kako instalirati i podesiti Local by Flywheel.
2. Pored ovoga, ko koristi Windows, može instalirati WAMP (kako instalirati i podesiti WAMP).
   Za one na Linuksu, uputstvo kako instalirati i podesiti LAMP.

Local by Flywheel je lakši za upotrebu. Opcija 2 (WAMP/LAMP u zavisnosti od toga da li koristite Windows, ili Linuks) je malo manje automatizovana (više liči na pravi server). Tj. moraćete napraviti bazu pomoću PhpMyAdmin alata, ili sličnog.

Koji god metod da koristite, imaćete kreirano okruženje za instalaciju WordPress-a (ili bilo kojeg drugog CMS-a, ili pak pravljenje statičkog HTML sajta). To jest: server koji radi, bazu, i korisnika za bazu sa svojom lozinkom za pristup. Zapišite to, redom:

• Domen, poddomen, ili direktorijum (ako instalirate u lokalu) gde ćete praviti staging sajt.
• Ime baze
• Ime korisnika baze
• Lozinku korisnika baze

3. Instalacija WordPress-a na lokalu, ili serveru

Ako se WordPress instalira na lokalu, napravićemo direktorijum u koji ćemo snimiti sajt (kako bi svaki sajt imao svoj odvojeni direktorijum):

Ako se instalacija vrši na serveru, kod cPanel-a (prikazano na slici 3), bitan direktorijum je:
home/korisnik/public_html
Dok DirectAdmin koristi:
home/korisnik/domains/ime_domena/public_html

Sad treba otići na https://wordpress.org/download/ i skinuti poslednju verziju WordPress-a. Taj fajl treba ubaciti u odgovarajući direktorijum (bilo na lokalu, ili na serveru, kako je gore objašnjeno). Za upload fajla na server možete koristiti FTP klijent (volim i koristim FileZilla – besplatan je). Ili možete koristiti fajl menadžer u kontrol panelu servera (bilo cPanel, ili DirectAdmin, ili neki treći).

Kako ne bih ovde uzimao prostor, članak o bekapu WordPress sajta prikazuje kako se koristi fajl menadžer u cPanel-u. Samo ćete u ovom slučaju koristiti “Upload” umesto “Download” i “Extract” umesto “Compress”, nakon što ste uploadovali .zip fajl sa WordPress instalacijom.

Drugi članci prikazuju korištenje fajl menadžera u DirectAdmin-u. Ovde je prikazan izbor direktorijuma i otpakivanje fajlova.

Začkoljica: kada otpakujete fajlove WordPress instalacije, oni će se nalaziti unutar direktorijuma “wordpress”. Treba ih prevući na početak željenog direktorijuma, kako ne biste morali kucati www.mojdomen.com/wordpress da biste otvorili sajt.

Sad, za ovaj primer, na lokalu sam kreirao:

• direktorijum “staging03”
• bazu “staging03db”
• korisnika “relja_dbusr”
• lozinku korisnika: “123456” (treba uvek koristiti jake lozinke, ne ovakve)

I sada ću otići na localhost/staging03

Nakon ovoga, dobićete ekran za logovanje na WordPress backend, sa korisničkim imenom i lozinkom koje ste izabrali (na slici 8).

4. Zaključak

Ako ste ispratili sve korake, trebalo bi da ste sada spremni za dalji razvoj i dizajn WordPress sajta. Nakon što je sve gotovo, kloniraćete sajt sa staging okruženja na glavni domen, tamo gde treba da stoji.

Planiram iskoristiti sajt koji ću ovih dana razvijati kao primer kako to izgleda (koliko stignem i mogu prikazati). Do tada, možete se i sami igrati – imate sad spremno testno igralište. 🙂 I, kome je baš dosadno, vredi pogledati barem osnove HTML-a i CSS-a – koristiće.

5. VIDEO demonstracija (na engleskom) kako instalirati WordPress i napraviti staging kopiju

Video sam za sad napravio samo na engleskom, a u njemu pokazujem kako se instalira WordPress (i ručno, i pomoću Softaculous alata), kako se konfiguriše, i postavlja zaštita: