van egy titok, hogy megmenti az ügyfelek egy csomó pénzt, tartja a honlap biztonságos, és beépített biztonsági mentéseket.
The secret: azt, hogy a honlap statikus. Ezután a GitHub segítségével tárolom és tárolom, majd a Cloudflare segítségével HTTPS-en keresztül kiszolgálom, és gyorsabbá teszem. Az ügyfeleim csak valaha fizetnek a domain nevükért, mégis sokkal többet kapnak, mint amire valaha is számítottak.
miért statikus tartalom?
a statikus webhelyek csodálatosan gyorsak, mivel nincs kiszolgáló feldolgozási ideje., Továbbá, a statikus eszközök kódbázisának elkövetésével a git-tárolóban, a változások visszavezetése egyszerűen egy korábbi elkövetéshez való visszatérés kérdésévé válik. A biztonsági mentések egygit push távolságra vannak, és lényegében a teljes webhelyet a gyorsítótárból szolgálja ki, ami azt jelenti, hogy a kiszolgálónak szinte soha többé nem kell feldolgoznia a kérést.
épület egy komplex UI?
Az advent a front-end keretek, mint a React és a rokon, akkor létrehozhat mágikus élmények nem más, mint a HTML / CSS és a JavaScript., Meg kell különíteni a back-end logika a front-end bár, de még Ruby on Rails hajók API módban most.
amikor szerződést kapok egy weboldal építésére, mérlegelem, hogy egy statikus webhely elegendő-e az ügyfelem igényeinek kielégítéséhez, sok esetben pedig az.
kíváncsi, hogy milyen felhasználási esetekre gondolok? Zseniális! Beszéljünk néhány olyan helyzetről, amikor érdemes megfontolni a statikus tartalmat, és elmagyarázzuk, hogy ez a megközelítés hogyan mentheti meg mind az Ön, mind az ügyfél idejét.,
Brochureware weboldalak
Brochureware weboldalak célja, hogy információt nyújtson egy üzleti, és nem változik jelentősen egész életük során. A dinamikus alkalmazás egyértelműen túlzás az ilyen oldalak, és mivel ezek az oldalak megy karbantartatlan évekig, részesülő kevés, ha bármilyen frissítést, ők általában könnyű célpontok hackerek, jól, hack.
A statikus HTML sablonok lényegesen olcsóbbak, mint a CMS társaik, és a jövőben könnyebben módosíthatók. A fejlesztők kérték, hogy frissítse az ilyen oldalak nem igényelnek speciális ismereteket egy adott CMS., Általános szabály, hogy mindig statikus webhelyeket készítek a brosureware webhelyek számára.
Bónusz: a kisvállalkozások szeretik, ha nem fizetnek ismétlődő havi hosting díjakat. Megadott, hosting nem egy hatalmas költség, de az ügyfelek csak nem kell bajlódni fizet semmi más, mint a domain, ami nagyszerű.
egyoldalas alkalmazások
egy csodálatos, hűvös új alkalmazást mutat be, amely a modern front-end keretrendszerekre támaszkodik?
az alkalmazás már többnyire statikus., Tegyen néhány további lépést, hogy elkülönítse a szerver oldali logikát egy külön alkalmazásba, és teljes mértékben kihasználja, hogy az alkalmazás teljes egészében a Cloudflare gyorsítótárából származik.
az alkalmazás mindenkor elérhető lesz.
blogok
Ez egy kemény eladás. Nehéz meggyőzni az embereket, hogy a statikus webhelyeket blogokhoz lehet alkalmazni, de olvassa el – nem mentem le a mélyről.
A blogok nem más, mint a sablonokkal megjelenített tartalom. Egyszerűen nem kell egy teljes értékű alkalmazás elemzés minden kérést, majd teszi egy új oldalt. A statikus webhely tökéletes erre a használati esetre.,
fontolja meg a Jekyll-t. Folyékony sablonokat és Markdown tartalmakat ad hozzá, és ezeket egy statikus weboldalba egyesíti. Nincs szükség on-the-fly feldolgozásra, a blogod pedig hirtelen lényegesen gyorsabban érzi magát.
Ez a munkafolyamat különösen hasznos, mivel a GitHub oldalak támogatják a Jekyll buildeket. Hirtelen, blogbejegyzések is hozzájárult a pull kérések, és az összes tartalom belül tárolt verzió ellenőrzés. A nem fejlesztők továbbra is hozzájárulhatnak a Markdown hozzászólásaihoz azáltal, hogy a Stackedit-en keresztül közzéteszik hozzászólásaikat.
valójában a Stackedit segítségével készítem ezt a bejegyzést most!,
is, ha azt szeretnénk, megjegyzéseket a blogbejegyzések, Disqus ad egy erős Megjegyzés rendszer beillesztésével egy részlet a JavaScript.
Ez az oldal, amit olvas, Disqusokat is használ.
GitHub Pages
a GitHub Pages a GitHub válasza a projektoldalakra, és lehetővé teszi, hogy bármilyen statikus weboldalt közvetlenül az adattárból kiszolgáljon. Mivel a GitHub oldalak támogatják az egyéni domaineket,a GitHub oldalain ingyenesen fogadhat statikus webhelyet, a telepítések közvetlenül a Git-től.
A GitHub oldalakra való telepítés.
elég beszélgetés, lássuk akcióban!,
készítettem egy page React alkalmazást, amely lekéri és megjeleníti a Pakisztáni rúpia aktuális árfolyamát egy nyilvános API-ból. Telepítsük ezt a GitHub oldalakra.
először hozzunk létre egy új GitHub tárolót.
a GitHub oldalakat egy gh-pages nevű ág szolgálja ki.
$ git checkout -b gh-pagesSwitched to a new branch 'gh-pages'és nyomjuk fel az oldalt:
és végeztünk!, Ezen a ponton a honlapon lesz elérhető a ingyenes SSL:
Fontos dolgot kell megjegyezni:
- a GitHub pages szolgál a
index.htmlfájl a projektgh-pageság - A honlap szolgált
USERNAME.github.io/REPOSITORY-NAME
Testreszabása a domain név.
A webhely kiszolgálása a Githubon kívül rendben van, de minden tisztességes webhelynek egyedi domain névre van szüksége. Szerencsére GitHub lehetővé teszi, hogy a saját Domain a párt!,
először hozzunk létre egy speciális CNAME fájlt, majd helyezzük el a domain nevet. Ez lehetővé teszi a GitHub számára, hogy megtudja, melyik domain nevet kell a tárolóhoz vezetni.
$ echo 'pricecheck.gilani.me' > CNAME$ git add .$ git commit -m 'Add a custom domain'...$ git push...Second, Let ‘ s point a CNAME mert a subdomain a GitHub DNS USERNAME.github.io:
vigyázat: ne használja ezt Apex domainhez! CNAME rekord hozzáadása a gyökérhez a domain letiltja a MX és TXT rekordokat., Ezt csak az aldomainhez használja. Az Apex domaineket később tárgyaljuk.
ezen A ponton, a honlapon kell futtatni az egyéni domain-on: HTTP:
Fontos megjegyzés:
- Az alapértelmezett
*.github.iodomain szolgált keresztül HTTPS. - az egyéni domain név a nem biztonságos HTTP-n keresztül kerül kiszolgálásra.
- ne használjon
CNAMErekordot a apex domain, kivéve, ha meg akarja ölni az e-maileket.
a GitHub oldalak korlátozásai:
- a Repóknak kevesebbnek kell lenniük, mint 1 GB fájlméret.,
- a webhelyeknek kevesebbnek kell lenniük, mint 1 GB fájlméretben.
- a havi sávszélesség-határérték 100 GB. Ezt később megkerüljük.
apex domain használata egyéni tartományként
a korlátozás megkerülésének legegyszerűbb módja a aldomainként történő használata, valamint az összes HTTP forgalom átirányítása a csúcsról . Az én példámban átirányítanám a gilani.me – t – ra, amely a statikus webhelyemre mutat, de nem szeretem a dolgok egyszerű módját.,
ha valóban apex domaint szeretne használni, ellenőrizze, hogy a DNS-szolgáltató lehetővé teszi-e a ANAME rekordok beállítását. Ezek (egyszerűsített) félúton vannak a CNAME rekordok között, mivel lehetővé teszik, hogy a domainekre mutasson, és a A rekordok, mivel nem semmisítenek meg más rekordokat ugyanazon a zónában.
No ANAME? Az utolsó lehetőség az, hogy egy DNS-szolgáltatóra váltson, amely ezt támogatja: írja be a Cloudflare-t., A Cloudflare a CNAME Apex domaineken történő laposodást biztosítja, ami egy ANAME rekordnak felel meg. A legjobb, ha most kapcsolja be a kapcsolót, mivel a következő részben a Cloudflare-t fedjük le.
TLDR: váltson át a Cloudflare ingyenes DNS-jére, és állítson be egy CNAME értéket az apex domainen. Valami különlegeset csinálnak a CNAME ezzel működik.
SSL és Cloudflare
Üdvözöljük a Snowden utáni korszakban., A kormány által szankcionált kémkedéssel és hackeléssel kapcsolatos félelmeinket megerősítették, és a világ arra törekszik, hogy a tranzitban és nyugalomban lévő adatokat biztosítsa.
modern webes adminisztrátorként elvárható, hogy legalább SSL-t biztosítson webhelyén, vegyes tartalom nélkül.
elérkezett az a pont, ahol a Google Chrome a sima HTTPS webhelyeket bizonytalannak jelöli, a Google Search pedig a HTTPS webhelyeket kedvezőbben részesíti előnyben a rangsorban. Még több stratégiát fogunk megvitatni a front-end biztonságossá tételére, de egyelőre csak az SSL-t fedjük le.
szerencsére most már titkosítjuk.,
Ez egy non-profit és teljesen automatizált Certificate Authority (CA), amely lehetővé teszi, hogy programozottan kiadja a rövid távú 90 napos SSL tanúsítványokat az Ön által ellenőrzött domainekhez. A projektet számos cég támogatja, köztük a Mozilla és az Electronic Frontier Foundation.
A Cloudflare használata
a Cloudflare egy DNS, CDN és DDoS védelmi szolgáltatás.
gyorsítótárazza az Ön weboldalát, és földrajzilag a közelben lévő szerverekről szolgálja ki a felhasználók számára, így a webhelye gyorsabb lesz., További előnye, hogy a GitHub 100 GB-os sávszélesség-korlátja alatt tartja Önt, mert még akkor is, ha webhelye őrülten népszerűvé válik, a legtöbb kérés eléri a gyorsítótárat, soha nem éri el a szervert.
Ezen felül a Cloudflare egy Universal SSL nevű szolgáltatást kínál, ahol ingyenes SSL tanúsítványt ad ki CA partnereitől, így ingyenesen HTTPS-t kap… örökre.
miért Cloudflare?
tudom, mire gondolsz: Gilani, csak azt mondtad, milyen félelmetes titkosítani van. Miért beszélsz a Cloudflare-ről? Nos, minden az egyszerűségre vezethető vissza.,
Mint egy mentális gyakorlat, képzeld el, beállítása több Nginx cache vagy a reverse proxy szerte a világon, így csak érvényes SSL tanúsítványok s z a felhasználók a weboldalak a legközelebbi helyen.
az eredmény a honlapon tálalva, SSL-kapcsolaton keresztül is, ha a származási kiszolgáló nem SSL-tanúsítvány, bár Cloudflare ad különleges önaláírt tanúsítványok, hogy ha a származási kiszolgáló biztonságos kapcsolatot akár Cloudflare szerverein. Ez az, amit a Cloudflare ad Önnek egy ingyenes tervvel, és nem is kell 90 naponta megújítania a tanúsítványt.,
szabadúszóként olyan ügyfeleket kapok, akik a lehető leggyorsabban szeretnének egy webhelyet működtetni vállalkozásuk számára. Nem értik vagy törődnek a biztonsági aggályokkal, sújtja a modern internetet, vagy titkosítás a tranzit során. Egyes ügyfelek küzdenek, hogy megértsék az ötlet a domain nevek, és ez bosszantó, ha meg kell fizetni a $ 15 éves díj “csak azért, hogy a honlapom fut”. Így próbálja elmagyarázni nekik, hogy miért kell fizetni a klaszter fordított proxy védi a honlapon, hogy fut a szabad tárhely magát.
Cloudflare SSL beállítása
tegyük újra piszkos kezünket., Az első dolog, váltson át az összes forgalom átirányítására a Cloudflare-en keresztül:
ezután a Crypto alatt állítsa az SSL szintet “Teljes” értékre.”
erő” automatikus HTTPS átírása ” megölni vegyes tartalom figyelmeztetések.
Ezen a ponton weboldalunk mind a HTTP-n, mind a HTTPS-en működik. Kényszerítsük a HTTPS-t mindenre a domainünkön.
minden kész., Weboldalunknak mindig a HTTPS-en keresztül kell betöltenie a zöld” biztonságos ” minősítést a Chrome-ban.
záró szavak és Biztonsági megfontolások
van néhány dolog, amit nem tárgyaltam fent, és szeretnék egy pillanatra tisztázni néhány pontot.
A ravasz között fog rámutatni, hogy van néhány kirívó biztonsági problémák ezzel a beállítással, nevezetesen, hogy nincsenek biztonságos HTTP-fejléceket, mint:
-
Content-Security-Policy: rengeteg szöveget, eszközök egy whitelist-hosts, lehet letiltja a beépített js., -
X-Frame-Options: letiltja a webhely betöltését egy iframe-ben.
és igaza van. GitHub oldalak, sőt Cloudflare nem teszi lehetővé, hogy testre a HTTP fejlécek. Azonban beállíthat egy CSP-t a HTML meta címke segítségével.
egyszerűen illessze be ezt a weboldalába:
<meta http-equiv="Content-Security-Policy" content="default-src https:">jelenleg azonban nincs gyakorlati mód a X-Frame-Options fejléc beállítására a GitHub oldalakon, ami azt jelenti, hogy a támadó betöltheti weboldalát egy speciálisan kialakított iframe
XSS támadás., Ha azonban elkötelezett, akkor megkerülheti ezt a problémát azzal, hogy felkéri a felhasználókat, hogy minden érzékeny műveletnél erősítsék meg a jelszavukat vagy a 2FA tokent, vagy átadjanak egy CSRF tokent minden hitelesített kérésre.
egyesek számára fontos szempont, hogy a GitHub ingyenes nyilvános adattárainak használatával az Ön weboldala és forráskódja bárki számára elérhető, aki meg akarja tölteni vagy letölteni. Tehát úgy gondolom, hogy az aggodalom itt helytelen.
A statikus tartalom nem forráskód abban az értelemben, hogy a felhasználónak történő kézbesítés előtt nem állítja össze vagy dolgozza fel szkriptként., A felhasználó pontosan ugyanazt a statikus példányt kapja meg a webhelyről, ha webrobotot futtatna az Ön webhelyén. Miközben a kódot a GitHub adattárban tárolja, minden bizonnyal megkönnyíti a webhely másolatának letöltését, nem tesz ki semmit, ami még nem volt nyilvános.
méretezés, korlátlan méretezés
Az ebben a cikkben bemutatott ötletek nem korlátozódnak a kis alkalmazások ingyenes webtárhelyére.,
új, izgalmas web alapú játék készítése?! Nézze meg a GameSparks-ot, és mehet.
összefoglaló, gyónás és linkek
ebben a cikkben úgy tüntettem fel, mintha manuálisan publikáltam volna a React alkalmazást a gh-pages – ra. Nem tettem ilyet., Dolgoztam master és amikor eljött az ideje, hogy telepíteni, futottam npm run deploy amely elindította a build script tolta a build gh-pages. Kérjük, olvassa el amaster fióktelep én adattár, hogy hogyan működik.,
Átvétel
Előnyök:
- Azonnali telepítés
- Könnyű együttműködés
- Biztonságos üzemeltetési környezet
Kifogások:
- Nem fér hozzá, hogy a HTTP fejlécek
- Könnyű-hoz letölt egy példányát a weboldal
- a GitHub tudás nem szükséges
- attól Függ, technológia, forgalmazók
Linkek: