Scară nelimitată și găzduire web gratuită cu pagini Github și Cloudflare

am un secret care salvează clienții mei o tonă de bani, păstrează site-ul lor securizat și are copii de rezervă încorporate.secretul: fac site-ul lor static. Apoi, am stoca și găzdui cu GitHub, și de a folosi Cloudflare să-l servească peste HTTPS, și să-l rapid. Clienții mei plătesc doar pentru numele lor de domeniu, dar primesc mult mai mult decât au negociat vreodată.

De ce conținut Static?

Site-urile statice sunt minunat de rapide, deoarece nu există timp de procesare a serverului implicat., De asemenea, prin comiterea unei baze de cod de active statice într-un depozit git, schimbarea modificărilor devine pur și simplu o chestiune de revenire la o comitere anterioară. Copiile de rezervă sunt ungit push și, în esență, serviți întregul site web din cache, ceea ce înseamnă că serverul dvs. nu va mai trebui să proceseze niciodată o solicitare.

construirea unui UI complex?odată cu apariția cadrelor front-end, cum ar fi React și rudele sale, puteți crea experiențe magice cu nimic mai mult decât HTML/CSS și JavaScript., Va trebui să vă separați logica de back-end de front-end, dar chiar și Ruby on Rails se livrează cu un mod API acum.ori de câte ori am contractat pentru a construi un site web, mă gândesc dacă este sau nu un site static este suficient pentru a satisface nevoile clientului meu, și în multe cazuri, este.vă întrebați ce fel de cazuri de utilizare am în minte? Grozav! Să discutăm câteva situații în care poate doriți să luați în considerare conținutul static și să explicați modul în care această abordare vă poate salva atât pe dvs., cât și pe clientul dvs.,

Brochureware site-uri

Brochureware site-uri sunt menite să ofere informații despre o afacere, și nu se schimbă în mod semnificativ de-a lungul vieții lor. O aplicație dinamică este în mod clar nejustificată pentru astfel de site-uri și, din moment ce aceste site-uri nu sunt întreținute de ani de zile, primind puține, dacă există actualizări, de obicei sunt ținte ușoare pentru hackeri să, bine, hack.șabloanele HTML statice sunt semnificativ mai ieftine decât omologii lor CMS și sunt mai ușor de modificat în viitor. Dezvoltatorii solicitați să actualizeze astfel de site-uri nu necesită cunoștințe de specialitate despre un anumit CMS., De regulă, fac întotdeauna site-uri statice pentru site-urile brochureware.bonus: întreprinderile mici adoră să nu plătească taxe lunare recurente de găzduire. Acordat, găzduirea nu este un cost imens, dar clienții nu trebuie să se deranjeze să plătească altceva decât domeniul, ceea ce este minunat.

aplicații cu o singură pagină

vă arătați o aplicație minunată și nouă, care se bazează pe cadre moderne de front-end?

aplicația dvs. este deja în mare parte statică., Faceți câțiva pași suplimentari pentru a izola orice logică din partea serverului într-o aplicație separată și beneficiați pe deplin de faptul că aplicația dvs. este servită în întregime din memoria cache a Cloudflare.aplicația dvs. va fi disponibilă în orice moment.

bloguri

aceasta este o vânzare grea. Este greu să convingi oamenii că site – urile statice pot fi folosite pentru bloguri, dar Citește-mă-nu am plecat de la capăt.

blogurile nu sunt altceva decât conținut redat cu șabloane. Pur și simplu nu aveți nevoie de o aplicație completă care să analizeze fiecare solicitare și să redea o nouă pagină. Un site static este perfect pentru acest caz de utilizare.,

luați în considerare Jekyll. Îi oferiți șabloane lichide și conținut de marcare și le combină într-un site web static. Nu este necesară procesarea din zbor, iar blogul dvs. se simte brusc semnificativ mai rapid.

acest flux de lucru este deosebit de util, deoarece paginile GitHub acceptă construcțiile Jekyll. Dintr-o dată, postările de pe blog pot fi contribuite cu solicitări pull și tot conținutul dvs. este stocat în controlul versiunii. Non-dezvoltatorii pot contribui în continuare posturi în Markdown prin publicarea postările lor prin Stackedit.

de fapt, folosesc Stackedit pentru a compune această postare chiar acum!,de asemenea, dacă doriți comentarii la postările de pe blog, Disqus vă oferă un sistem puternic de comentarii prin introducerea unui fragment de JavaScript.

Această pagină pe care o citiți utilizează Disqus prea.

pagini GitHub

paginile Github sunt răspunsul GitHub la paginile proiectului și vă permite să serviți orice site web static direct din depozitul dvs. Deoarece paginile GitHub acceptă domenii personalizate, puteți găzdui gratuit un site web static pe paginile GitHub, cu implementări direct de la Git.

implementarea paginilor GitHub.

destul de vorbit, să-l vedem în acțiune!,

am mers mai departe și a făcut o singură pagină React app care preia și afișează rata de schimb curentă pentru Rupia pakistanez de la un API publice. Să implementăm acest lucru la paginile GitHub.

Mai întâi, să creăm un nou depozit GitHub.

GitHub pagini sunt servite de la o ramură numită gh-pages deci, haideți să creeze unul pentru proiectul meu.

$ git checkout -b gh-pagesSwitched to a new branch 'gh-pages'

și să împingem site-ul în sus:

și am terminat!, În acest moment site-ul va fi disponibil la cu SSL gratuit:

Importante lucruri de reținut:

• GitHub pagini servește index.html fișier în proiectul dumneavoastră e gh-pages ramură
• site-ul este servit la USERNAME.github.io/REPOSITORY-NAME

Personalizarea nume de domeniu.

servirea site-ului de pe GitHub este bine, dar orice site decent are nevoie de un nume de domeniu personalizat. Din fericire, GitHub vă permite să vă aduceți propriul domeniu la petrecere!,

Mai întâi, să creăm un fișier special CNAME și să plasăm numele de domeniu acolo. Acest lucru va permite GitHub să știe ce nume de domeniu să se îndrepte către depozit.

$ echo 'pricecheck.gilani.me' > CNAME$ git add .$ git commit -m 'Add a custom domain'...$ git push...

în al Doilea rând, să-litera a CNAME pentru subdomeniu la GitHub DNS la USERNAME.github.io:

Atenție: NU folosi acest lucru pentru un apex domeniu! Adăugarea unui CNAME record la rădăcină de domeniu va dezactiva dvs. MX și TXT înregistrări., Utilizați acest lucru numai pentru subdomeniul dvs. Domeniile Apex sunt discutate mai târziu.

În acest moment, site-ul nostru ar trebui să ruleze pe domeniu personalizat pe HTTP:

lucruri Importante de reținut:

• implicit *.github.io domeniu este servit prin HTTPS.
• numele nostru de domeniu personalizat este servit prin HTTP nesigur.
• nu utilizați o înregistrare CNAME pe domeniul dvs.

limitări ale paginilor GitHub:

• repo-urile trebuie să aibă o dimensiune mai mică de 1 GB.,
• Site-urile web trebuie să aibă o dimensiune a fișierului mai mică de 1 GB.
• limita lunară de lățime de bandă este de 100 GB. Vom trece peste asta mai târziu.

Folosind un apex domeniu ca domeniu particularizat

Cel mai simplu mod de a obține în jurul valorii de această limitare este de a utiliza www ca subdomeniu, și redirecționează tot traficul HTTP de la apex la www. În exemplul meu, aș redirecționa gilani.mela , ceea ce indică site-ul meu static, dar nu-mi place să fac lucrurile ușor.,dacă doriți cu adevărat să utilizați un domeniu apex, verificați dacă furnizorul DNS vă permite să setați înregistrări ANAME. Acestea sunt (simplificate) la jumătatea distanței dintre înregistrările CNAME, deoarece vă permit să indicați domenii și A, deoarece nu anulează alte înregistrări din aceeași zonă.

nu ANAME? Ultima opțiune este să treceți la un furnizor DNS care acceptă acest lucru: introduceți Cloudflare., Cloudflare oferă CNAMEaplatizarea pe domenii apex, care este echivalentul unui ANAME înregistrare. Cel mai bine este să faceți comutatorul chiar acum, deoarece vom acoperi Cloudflare în secțiunea următoare.

TLDR: treceți la DNS-ul gratuit al Cloudflare și setați un CNAME pe domeniul dvs. Ei fac ceva special cu CNAME care o face să funcționeze.bine ați venit la epoca post-Snowden., Toate temerile noastre cele mai grave de snooping sancționate de guvern și hacking au fost confirmate, iar lumea este de codare pentru a asigura date în tranzit și în repaus.ca Administrator web modern, este de așteptat să furnizați cel puțin SSL pe site-ul dvs. web, fără conținut mixt.a ajuns la punctul în care Google Chrome marchează site-urile HTTPS simple ca fiind nesigure, iar Căutarea Google începe să favorizeze site-urile HTTPS mai favorabil în clasamentul lor. Vom discuta și mai multe strategii pentru a vă securiza front-end-ul mai târziu, dar deocamdată, vom acoperi doar SSL.din fericire ,acum avem să criptăm.,

este o autoritate de certificare (ca) non-profit și complet automatizată, care vă permite să emiteți programatic certificate SSL pe termen scurt de 90 de zile pentru orice domenii pe care le controlați. Este o briză de utilizat; este open source; iar proiectul este susținut de o multitudine de companii, inclusiv Mozilla și Electronic Frontier Foundation.

punerea Cloudflare la o bună utilizare

Cloudflare este un serviciu de protecție DNS, CDN și DDoS.acesta memorează în cache site-ul dvs. web și îl servește utilizatorilor de pe servere apropiate din punct de vedere geografic, ceea ce face site-ul dvs. web mai rapid., Are avantajul suplimentar de a vă menține sub limita de lățime de bandă de 100 GB a GitHub, deoarece, chiar dacă site-ul dvs. devine incredibil de popular, majoritatea cererilor vor atinge memoria cache și nu vor ajunge niciodată pe server.în plus, Cloudflare oferă un serviciu numit universal SSL, unde vă eliberează un certificat SSL gratuit de la partenerii lor CA, astfel încât să obțineți HTTPS gratuit… pentru totdeauna.

de ce Cloudflare?

știu la ce te gândești: Gilani, tocmai mi-ai spus cât de minunat este să criptăm. De ce vorbești despre Cloudflare? Ei bine, totul se reduce la simplitate.,ca un exercițiu mental, imaginați-vă configurarea mai multor cache Nginx și proxy-uri inverse din întreaga lume, oferindu-le toate certificatele SSL valide și servind paginile web ale utilizatorilor din locațiile lor cele mai apropiate.acest lucru duce la difuzarea site-ului dvs. prin SSL, chiar dacă serverul de origine nu are un certificat SSL, deși Cloudflare vă oferă certificate speciale auto-semnate pe care le puteți pune pe serverul de origine pentru a asigura conexiunea până la serverele Cloudflare. Aceasta este ceea ce Cloudflare vă oferă un plan gratuit și nici măcar nu trebuie să vă reînnoiți certificatul la fiecare 90 de zile.,

în calitate de freelancer, primesc clienți care doresc un site funcțional pentru afacerea lor cât mai repede posibil. Ei nu înțeleg sau nu le pasă de problemele de securitate, care afectează web-ul modern sau criptarea în timpul tranzitului. Unii clienți se luptă să înțeleagă ideea numelor de domenii și consideră că este enervant atunci când trebuie să plătească o taxă anuală de $15 „doar pentru a-mi menține site-ul în funcțiune”. Așa că încercați să le explicați de ce trebuie să plătească pentru un grup de proxy-uri inverse care protejează site-ul lor web care rulează pe găzduire gratuită în sine.

Configurarea Cloudflare SSL

să ne murdărim din nou mâinile., Primul lucru de făcut, comutator de rutare toate de trafic prin Cloudflare:

Apoi, sub Crypto, setați SSL nivel pentru a „Completa.”

Forța „Automat HTTPS Rescrie” să-l omoare conținut mixt avertismente.

În acest moment, site-ul nostru va funcționa atât HTTP și HTTPS. Să forțăm HTTPS pentru tot ce este pe domeniul nostru.

Toate făcut., Site-ul nostru web ar trebui să se încarce întotdeauna prin HTTPS cu un rating Verde „sigur” în Chrome.

ultimele Cuvinte și cu Considerentele de Securitate

Există câteva lucruri pe care n-am discutat mai sus, și aș dori să ia un moment pentru a clarifica câteva puncte.

abil printre vă va arăta că există câteva evidente probleme de securitate cu acest setup, și anume că nu există secure HTTP, cum ar fi:

• Content-Security-Policy: o mulțime de script-uri și materiale dintr-o listă albă de gazde, și poate interzice inline js.,
• X-Frame-Options: dezactivează site-ul dvs. de a fi de încărcare într-un iframe.

și ai dreptate. Paginile GitHub și chiar Cloudflare nu vă permit să personalizați anteturile HTTP. Cu toate acestea, puteți seta un CSP folosind eticheta HTML meta.

pur și Simplu introduceți acest lucru în pagina web:

<meta http-equiv="Content-Security-Policy" content="default-src https:">

cu toate Acestea, în momentul de față, nu există nici o modalitate practică de a seta X-Frame-Options antet pe GitHub pagini, adică un atacator poate încărca pagina web într-un special conceput iframe și scoate un atac XSS., Dacă sunteți dedicat, totuși, puteți rezolva această problemă solicitând utilizatorilor să-și confirme parola sau tokenul 2FA la fiecare acțiune sensibilă sau trecând un jeton CSRF la fiecare solicitare autentificată.

o preocupare majoră pentru unii este că, folosind depozitele publice gratuite de la GitHub, site-ul dvs. web și codul sursă sunt disponibile pentru oricine dorește să-l bifurce sau să-l descarce. Deci, cred că preocuparea aici este deplasată.

conținutul Static nu este cod sursă în sensul că nu este compilat sau procesat ca un script înainte de a fi servit utilizatorului., Utilizatorul dvs. va primi exact aceeași copie statică a site-ului web dacă ar rula un crawler web indicat pe site-ul dvs. web. În timp ce găzduiți codul într-un depozit GitHub, cu siguranță, este mai ușor să descărcați o copie a site-ului dvs. web, acesta nu expune nimic care nu era deja public.

scalare, scalare nelimitată

ideile prezentate în acest articol nu se limitează la găzduirea web gratuită a aplicațiilor mici.,puteți construi un strat front-end bazat pe un cadru JavaScript modern, conectați-l la un Backend-as-a-Service (BaaS) pe scară largă, cum ar fi Firebase, și puteți crea aplicații complexe fără să vă faceți griji cu privire la servere, timp de funcționare sau orice altă problemă legată de infrastructură.a face un nou joc captivant bazat pe web?! Check out GameSparks, și sunteți bine să plec.

rezumat, mărturisire, și link-uri

în acest articol, am făcut să apară ca și cum am publicat manual Aplicația mea React la gh-pages. Nu am făcut așa ceva., Am lucrat pe master și când a venit timpul pentru a implementa, am fugit npm run deploy care a început-o de a construi script-ul și a împins pentru a construi gh-pages. Vă rugăm să consultați ramuramaster din depozitul meu pentru a vedea cum funcționează.,

Efecte

Avantaje:

• Instant de implementare
• Ușor de colaborare
• Sigur spațiu de găzduire de mediu

Limitări:

• acces la HTTP
• Ușor de a descărca o copie a site-ului
• GitHub cunoștințele necesare
• Depinde de furnizorii de tehnologie

Link: