Illusztrált útmutató a webhely beállításához a Github & Cloudflare használatával

Olvassa el ezt, ha…

  1. Ingyenes egyéni átirányításokat vagy más szerver-konfigurációkat szeretne beállítani
  2. Szeretné, hogy webhelye HTTPS-en legyen, de nem tudja, hol kezdje
  3. Túlterhelt a választási lehetőségek száma (például Netlify, Surge, BitBalloon, Now)

Miért Github?

  1. Könnyű beállítani és elkezdeni a Github Pages alkalmazást
  2. Az azonnali telepítés új kód megadására szolgál

Miért Cloudflare?

  1. Ez ingyenes
  2. Jellemzője az SSL (HTTPS) támogatása. (A HTTPS miért számít itt.)
  3. Szuper egyszerű DNS-kezelés
  4. Képesség a böngésző gyorsítótárának lejártának beállítására az eszközök számára
  5. A statikus eszközök automatikus kicsinyítése
  6. Egyéni oldalszabályok az átirányítások beállításához, mindig HTTPS stb.
  7. HTTP2 / SPDY a támogatott böngészőkhöz
  8. Lehetővé teszi a HSTS (HTTP Strict Transport Security) beállítását

Mielőtt belekezdenénk, szüksége lesz néhány dologra:

  1. Github-fiók
  2. Cloudflare-fiók
  3. Hozzáférés egy egyéni tartományhoz. Bármelyik domain név-nyilvántartótól megvásárolhatja, például: Namecheap, GoDaddy, BigRock stb.

Ha mindez felkeltette az érdeklődését, akkor kezdjük!

1. lépés : Hozzon létre Github repót a kóddal

  • Nyissa meg a //pages.github.com webhelyet
  • Válassza a Projekt webhely lehetőséget, hogy megtalálja az alapvető oldal létrehozásának alapjait vagy egy egyedi témát tartalmazó utasításokat

2. lépés. Állítsa be a Github oldalakat a tárházhoz

Lépjen a tárház beállításaihoz . A Github Pages szakaszban válassza ki a fiókot , amelyből a webhelyét kiszolgálja. Miután ezt megtette, elmehet a // én> .gith u b.io/repo Az alábbiakban látható, hogy webhelye működésben van.

3. lépés: Adjon hozzá egyéni tartományt

Adja hozzá a megvásárolt egyéni domaint, és mentse el. Webhelye készen áll a saját egyéni domainjével? WOOT! ✨

Tehát mindent meg tudunk állítani a Githubon. Kezdjük azzal, hogy beállítjuk a Cloudflare-t, hogy jazz-e a webhelyet az összes erőteljes funkcióval, amelyet a bejegyzés elején említettem.

4. lépés: Állítsa be a domainjét a Cloudflare szolgáltatásban

Jelentkezzen be a Cloudflare szolgáltatásba. Ha először használja, akkor a fent látható képhez hasonló képernyőt kell látnia. Ha korábban már használta, új domain hozzáadásához a jobb felső sarokban található navigációs sávon kattintson a Webhely hozzáadása lehetőségre. Írja be a kezelni kívánt domaint, és kattintson a Begin Scan gombra .

5. lépés: Állítsa be a domain DNS-rekordjait

Ebben a lépésben tájékoztatjuk a Cloudflare-t, hogy két A Record DNS-bejegyzéssel irányítsa tartományunkat a Github Pages szerverre :

1. 192.30.252.153

2. 192.30.252.154

Miután beállította ezt, az egyéni domainjéhez, azaz a yourcustomdomain.com címre kerülő összes kérelem átkerül a webhelyére a Githubon a 3. lépésben .

Van még egy lépés, mielőtt továbblépnénk a következő szakaszba. Gyakran olyan aldomaint szeretne használni, mint a www , a www.yourcustomdomain.com. Ehhez hozzá kell adnia egy CNAME rekord DNS bejegyzést, amely az aldomainjét (www) az apex tartományához (@) irányítja.

Miután beállította ezt, az összes kérelem az egyéni aldomainhez, azaz a www. A yourcustomdomain.com webhelyét a Github webhelyére irányítjuk a 3. lépésben .

MEGJEGYZÉS: Ne próbáljon azonnal hozzáférni az egyéni domainjéhez. Nem fog menni. Csak a Cloudflare - Github telepítést hajtottuk végre. Még mindig meg kell végeznünk a DNS-regisztrátort -> Cloudflare beállítást. Ez a 7. lépésben merül fel .

A folytatáshoz kattintson a Folytatás gombra .

6. lépés: Válassza ki az Ingyenes Cloudflare tervet

A Cloudflare ingyenes terve sok kifinomult lehetőséget kínál, amint azt a Miért Cloudflare? szakasz elején.

A folytatáshoz kattintson a Folytatás gombra .

7. lépés: Frissítse a névszervereket a DNS-regisztrátorán

Miután ezen az oldalon tartózkodik, tartsa nyitva az egyik fülön, és nyissa meg a DNS-regisztrátor webhelyét (azt a helyet, ahonnan a domainjét vásárolta) egy másik oldalon. Ha a következő regisztrátorok egyikét használja, akkor a Névszerver módosításának megértéséhez a linkek találhatók:

  1. Nagy szikla
  2. Namecheap
  3. Hajrá apa

A tartománybeállításokban meglévő névszervereket le kell cserélnie a Cloudflare oldalon találhatóakra, amelyek nyitva vannak a másik fülön.

YASSS! Sikeresen beállította az egyéni tartományt a Cloudflare DNS-szolgáltatóként történő használatához. A tetején lévő Áttekintés lehetőségre léphet, és azt fogja találni, hogy még mindig várja a Névszerver változásának feldolgozását.

Miután az Áttekintés fülön az Állapot: Aktív ,most megpróbálhatja meglátogatni webhelyét az egyedi domain használatával, ÉS CSAK MŰKÖDNI kellene ! ??

8. lépés: Konfigurálja a kicsinyítést

A Speed Beállítások lehetőséget, az Auto Kicsinyítse részben válassza ki a lehetőséget, hogy az automatikus minify mindent: Javascript, CSS, HTML. Ezt a Cloudflare egyszeri menet közben fogja megtenni, majd gyorsítótárba tenni. Amikor bármelyik eszköz megváltozik, a Cloudflare ezt újra megteszi helyetted.

A kicsinyítés előnye, hogy a böngészőbe juttatott fájl mérete sokkal kisebb, mivel eltávolítja a nem kívánt tereket és megjegyzéseket.

9. lépés: Konfigurálja a böngésző gyorsítótárának lejártát

Ha lefelé görget ugyanazon az oldalon, mint az Automatikus kicsinyítés , megtalálja a Böngésző gyorsítótárának lejárata szakaszt. Ideális esetben 30 napra / 1 hónapra kell állítani, hogy a WebpageTest ne adjon figyelmeztetést. Ez az idő azt jelzi, hogy ha webhelye bármelyik böngészőbe betöltődik, akkor a böngésző nem kér másodszor semmilyen eszközt, amíg le nem jár a böngésző gyorsítótárának időtartama.

Mielőtt továbblépnénk a következő lépésre, ellenőrizze a Cloudflare Crypto beállításait. Meg kell mondani, Active Certificate az SSL oldalán. ( Megjegyzés: Próbálja újra betölteni az oldalt. Néha nem frissül ). A következő két lépésben a webhelyet mindig HTTPS-en keresztül fogjuk szolgálni . Annak érdekében, hogy ez problémamentesen működjön, fontos, hogy rendelkezzen egy aktív tanúsítvánnyal a Cloudflare-en.

10. lépés: Az oldalszabályok konfigurálása

Ebben a lépésben két dolgot fogunk tenni:

  1. A www.yourcustomdomain.com összes kérését irányítsa át a yourcustomdomain.com webhelyre
  2. Átirányítsa az összes kérelmet a // az Ön egyéni domainhez

Lépjen az Oldalszabályok beállításra, és kattintson az Oldalszabály létrehozása elemre .

Kezelésére irányuló www.yourcustomdomain.com hogy yourcustomdomain.com átirányítás, cserélje tweetify.io a yourcustomdomain.com nevét. Kattintson a Mentés és telepítés gombra .

Kezelésére irányuló //yourcustomdomain.com hogy //yourcustomdomain.com átirányítás, cserélje tweetify.io a yourcustomdomain.com nevét. Kattintson a Mentés és telepítés gombra .

11. lépés: Konfigurálja a HSTS-t

Lépjen a Crypto beállításaihoz, és görgessen le a HTTP Strict Transport Security (HSTS) szakaszig. Kattintson a HSTS engedélyezése elemre . Ez arra kéri Önt, hogy nyugtázza, hogy tudja, mit csinál. Mielőtt kiválasztaná az Értem , hadd mondjam el, miért kell engedélyeznünk ezt a beállítást:

Ha egy felhasználó korábban megnyitotta az Ön webhelyét, onnantól kezdve, amikor a felhasználó megpróbálja elérni az Ön webhelyét, mindig a webhely HTTPS verziójára kerül. Ez kissé gyorsabbá teszi webhelye betöltését a következő látogatások során, mert a HTTP-HTTPS átirányítás az ügyfélen történik, és nem a 10. lépésben hozzáadott Cloudflare oldalszabályon keresztül.

Miután a következő lépésre lép, engedélyeznie kell az összes beállítást az alábbiak szerint. Ezekről a lehetőségekről itt és itt olvashat bővebben

Ez az. Minden készen áll arra, hogy megmutassa webhelyét a világ számára! ?? Ha hasznosnak találta, kérem, ❤️ ossza meg és ossza meg.

Karan Thakkar a frontend vezetője a Crowdfire-nél - az Ön szuper-intelligens marketing oldala . Cikkét korábban már a The Huffington Post is közölte. Szereti szabadidejében kipróbálni az új technológiákat, és építette a Tweetify-t (a React Native használatával) és a Show My PR-eket (a Golang használatával).

Egyéb írásai:

Hogyan nőttem 300-ról 5 ezer követőre mindössze 3 hét alatt

#GrowthHacking a Twitter-fiókomhoz a @Crowdfire Twitter Premier League blog.markgrowth.com webhelyhez A Let's Encrypt Certbot használatával HTTPS-t szerezhet az Amazon EC2 NGINX dobozába

A Let's Encrypt egy új tanúsító hatóság, amely ingyenes SSL tanúsítványokat biztosít (hetente egy bizonyos határig). Ez… medium.freecodecamp.com