Ilustrirani vodič za postavljanje web stranice pomoću Github-a i Cloudflare-a

Ovo biste trebali pročitati ako ...

  1. Želiš postavljanje prilagođenih preusmjeravanja ili drugih poslužitelja konfiguracije za besplatno
  2. Želite postaviti svoje web mjesto na HTTPS, ali ne znate odakle početi
  3. Preopterećeni ste količinom izbora (poput Netlifya, Surgea, BitBalloona, Now)

Zašto Github?

  1. Jednostavno postavljanje i početak rada s Github stranicama
  2. Trenutačno postavljanje na guranje novog koda

Zašto Cloudflare?

  1. Slobodno je
  2. Dolazi s gotovom podrškom za SSL (HTTPS). (Evo zašto je HTTPS važan.)
  3. Super jednostavno upravljanje DNS-om
  4. Mogućnost postavljanja isteka predmemorije preglednika za sredstva
  5. Automatski umanjite svoju statičnu imovinu
  6. Pravila prilagođenih stranica za postavljanje preusmjeravanja, uvijek HTTPS itd.
  7. HTTP2 / SPDY za podržane preglednike
  8. Omogućuje postavljanje HSTS-a (HTTP stroga transportna sigurnost)

Prije nego što započnemo trebat će vam nekoliko stvari:

  1. Github račun
  2. Cloudflare račun
  3. Pristup prilagođenoj domeni. Možete ga kupiti od bilo kojeg Registra domena, poput: Namecheap, GoDaddy, BigRock itd.

Ako vas je sve ovo pobudilo, krenimo!

Korak 1 : Stvorite Github repo sa svojim kodom

  • Idite na //pages.github.com
  • Odaberite opciju Project Site da biste pronašli upute o tome kako stvoriti osnovnu stranicu od nule ili prilagođenu temu

Korak 2. Postavljanje Github stranica za spremište

Idite na Postavke za vaše spremište. U odjeljku Github Pages odaberite glavnu granu iz koje će se služiti vaše web mjesto. Nakon što to učinite, možete otići na // ja> .gith u b.io/repo s itory vidjeti vaše web stranice u akciji kao što je prikazano u nastavku.

Korak 3. Dodajte prilagođenu domenu

Dodajte prilagođenu domenu koju ste kupili i spremite je. Vaša je web stranica sada spremna s vlastitom prilagođenom domenom? WOOT! ✨

Dakle, sve smo postavili na Githubu. Započet ćemo s postavljanjem Cloudflare-a kako bi vaše web mjesto obogatio svim moćnim značajkama koje sam spomenuo na početku ovog posta.

Korak 4: Postavite svoju domenu na Cloudflareu

Prijavite se u Cloudflare. Ako ga upotrebljavate prvi put, trebali biste vidjeti zaslon poput slike prikazane gore. Ako ste ga već koristili, na navigacijskoj traci u gornjem desnom kutu možete dodati opciju Dodaj web mjesto da biste dodali novu domenu. Unesite domenu kojom želite upravljati i kliknite Započni skeniranje .

Korak 5: Postavite DNS zapise za svoju domenu

U ovom koraku obavještavamo Cloudflare da usmjeri našu domenu na poslužitelj Github Pages pomoću dva DNS unosa A Record :

1. 192.30.252.153

2. 192.30.252.154

Nakon što ste postavili ovo gore, svi zahtjevi na vašu prilagođenu domenu tj yourcustomdomain.com će biti preusmjeren na Vašu web stranicu na GitHub na 3. koraku .

Uključen je još jedan korak prije nego što prijeđemo na sljedeću fazu. Često biste za svoje web mjesto željeli koristiti poddomenu kao što je www , tj. Www.yourcustomdomain.com. Za to ćete trebati dodati DNS zapis CNAME zapisa koji će vašu poddomenu (www) usmjeriti na vašu apex domenu (@).

Nakon što ovo postavite, svi zahtjevi za vašu prilagođenu poddomenu, tj. Www. yourcustomdomain.com bit će preusmjeren na vašu web stranicu na Githubu u 3. koraku .

NAPOMENA: Ne pokušavajte odmah pristupiti svojoj prilagođenoj domeni. Neće uspjeti. Izvršili smo samo postavljanje Cloudflare za Github. Još uvijek moramo obaviti DNS Registrar -> Cloudflare postavljanje. Ovo će se pojaviti u koraku 7.

Kliknite Nastavi da biste prešli na sljedeći korak.

6. korak: Odaberite besplatni Cloudflare plan

Besplatni plan za Cloudflare nudi puno sofisticiranih opcija o kojima je raspravljano u Zašto Cloudflare? odjeljak na početku.

Kliknite Nastavi da biste prešli na sljedeći korak.

Korak 7: Ažurirajte poslužitelje imena na vašem DNS Registru

Jednom kad ste na ovoj stranici, otvorite je na jednoj kartici, a na drugoj otvorite web mjesto svog DNS registra (mjesto odakle ste kupili domenu). Ako koristite jednog od sljedećih matičara, veze za razumijevanje načina promjene poslužitelja imena su:

  1. Bigrock
  2. Namecheap
  3. GoDaddy

Morate zamijeniti postojeće Nameservere u postavkama domene onim na Cloudflare stranici koja je otvorena na drugoj kartici.

YASSS! Uspješno ste postavili svoju prilagođenu domenu da koristi Cloudflare kao davatelja usluga DNS-a. Možete prijeći na opciju Pregled na vrhu i vidjet ćete da još uvijek čeka obradu vašeg promjena poslužitelja imena.

Jednom kada kartica Pregled kaže Status: aktivan ,sada možete pokušati posjetiti svoju stranicu koristeći svoju prilagođenu domenu, I TREBA SAMO RADITI ! ??

Korak 8: Konfigurirajte minifikaciju

U postavkama Brzina , u odjeljku Automatsko umanjivanje odaberite opciju automatskog umanjivanja svega: Javascript, CSS, HTML. To će učiniti Cloudflare u letu, a zatim će ga predmemorirati. Kad god se bilo koja vaša imovina promijeni, Cloudflare će to ponoviti za vas.

Prednost minifikacije je u tome što je veličina datoteke isporučene u vaš preglednik puno manja jer uklanja neželjene prostore i komentare.

Korak 9: Konfigurirajte istek predmemorije preglednika

Ako se pomaknete prema dolje na istoj stranici kao Auto Minify , pronaći ćete odjeljak Istek predmemorije preglednika . Trebalo bi ga postaviti na 30 dana / 1 mjesec, idealno bi bilo da WebpageTest ne daje upozorenje. Ono što ovo vrijeme ukazuje je da, nakon što se vaša web lokacija učita u bilo koji preglednik, tada preglednik neće zatražiti sredstva po drugi put dok za tu imovinu ne istekne vremensko razdoblje predmemorije preglednika.

Prije nego što prijeđemo na sljedeći korak, provjerite Crypto postavke na Cloudflareu. Valja reći Active certifikat u SSL dijelu. ( Napomena: Pokušajte ponovo učitati stranicu. Ponekad se ne ažurira ). U sljedeća dva koraka omogućit ćemo da se vaša web lokacija poslužuje putem HTTPS-a . Da bi to funkcioniralo bez problema, važno je da imate aktivni certifikat na Cloudflareu.

Korak 10: Konfigurirajte pravila stranice

U ovom ćemo koraku učiniti dvije stvari:

  1. Preusmjerite sve zahtjeve za www.yourcustomdomain.com na yourcustomdomain.com
  2. Preusmjerite sve zahtjeve za //yourcustomdomain.com na //yourcustomdomain.com

Idite na postavku Pravila stranice i kliknite Stvori pravilo stranice.

Za rukovanja s www.yourcustomdomain.com da yourcustomdomain.com preusmjeravanje, zamijenite tweetify.io s yourcustomdomain.com imenom. Kliknite Spremi i postavi .

Za rukovanja s //yourcustomdomain.com da //yourcustomdomain.com preusmjeravanje, zamijenite tweetify.io s yourcustomdomain.com imenom. Kliknite Spremi i postavi .

11. korak: Konfigurirajte HSTS

Idite na Crypto postavke i pomaknite se prema dolje do odjeljka HTTP Strict Transport Security (HSTS) . Kliknite Omogući HSTS . To će vas tražiti da priznate da znate što radite. Prije nego što odaberete Razumijem , dopustite mi da vam kažem zašto trebamo omogućiti ovu postavku:

Ako je korisnik otvorio vaše web mjesto u prošlosti, od tada nadalje, kad god korisnik pokuša pristupiti vašem web mjestu, uvijek će biti preusmjereni na HTTPS verziju vašeg web mjesta. To čini vašu web stranicu malo bržom pri sljedećim posjetima jer se preusmjeravanje HTTP na HTTPS događa na klijentu, a ne putem pravila Cloudflare stranice koje smo dodali u koraku 10.

Kad prijeđete na sljedeći korak, trebali biste omogućiti sve postavke kao što je prikazano u nastavku. Više detalja o ovim opcijama možete pročitati ovdje i ovdje

To je to. Sve ste spremni pokazati svijetu svoje web mjesto! ?? Ako vam se ovo učini korisnim, molim vas ❤️ podijelite ga.

Karan Thakkar vodeći je član Crowdfirea - vašeg super pametnog marketinškog pomagača . Njegov je članak prethodno objavljen na The Huffington Post. Voli isprobavati nove tehnologije u slobodno vrijeme, a izgradio je Tweetify (koristeći React Native) i Show My PR (koristeći Golang).

Ostali članci koje je napisao:

Kako sam narastao s 300 na 5 tisuća sljedbenika u samo 3 tjedna

#GrowthHacking moj Twitter račun za @Crowdfire Twitter Premier League blog.markgrowth.com Korištenje Let's Encrypt Certbota za dobivanje HTTPS-a na vašem Amazon EC2 NGINX box

Let's Encrypt novo je tijelo za izdavanje certifikata koje pruža besplatne SSL certifikate (do određenog ograničenja tjedno). To je ... medium.freecodecamp.com