Ubegrænset skala og gratis Hostingebhosting med GitHub-sider og Cloudflare

Jeg har en hemmelighed, der sparer mine klienter masser af penge, holder deres websiteebsted sikkert og har indbyggede sikkerhedskopier.

hemmeligheden: jeg gør deres hjemmeside statisk. Derefter, jeg gemme og vært det med GitHub, og bruge Cloudflare at tjene det over HTTPS, og gøre det hurtigt. Mine klienter betaler kun nogensinde for deres domænenavn, men de får meget mere, end de nogensinde forhandlede om.

hvorfor statisk indhold?

statiske .ebsteder er vidunderligt hurtige, da der ikke er nogen serverbehandlingstid involveret., Ved at begå en kodebase af statiske aktiver i et git-arkiv bliver rullende ændringer simpelthen et spørgsmål om at vende tilbage til en tidligere forpligtelse. Sikkerhedskopier er engit push væk, og du tjener i det væsentlige hele dit websiteebsted fra cachen, hvilket betyder, at din server næsten aldrig behøver at behandle en anmodning igen.

opbygning af et komplekst brugergrænseflade?

med fremkomsten af front-end-rammer, som React og dets kin, kan du skabe magiske oplevelser med intet andet end HTML/CSS og JavaScript., Du bliver nødt til at adskille din back-end logik fra din front-end selv, men selv Ruby on Rails skibe med en API-tilstand nu.hver gang jeg får kontrakt om at opbygge et websiteebsted, overvejer jeg, om et statisk .ebsted er nok til at imødekomme min klients behov, og i mange tilfælde er det det.lurer du på, hvilken slags brugssager jeg har i tankerne? Fedt! Lad os diskutere nogle situationer, når du måske vil overveje statisk indhold, og forklare, hvordan denne tilgang kan spare både dig og din klients tid.,

brochure .are hjemmesider

brochure .are hjemmesider er beregnet til at give oplysninger om en virksomhed, og ændrer ikke væsentligt i hele deres liv. En dynamisk applikation er helt klart overkill for sådanne sitesebsteder, og da disse .ebsteder ikke opretholdes i årevis og modtager få, hvis nogen opdateringer, er de normalt lette mål for hackere at godt hacke.statiske HTML-skabeloner er betydeligt billigere end deres CMS-modstykker, og de er lettere at finjustere i fremtiden. Udviklere bedt om at opdatere sådanne .ebsteder kræver ikke specialiseret viden om et bestemt CMS., Som regel laver jeg altid statiske websebsteder til Brochure .are-.ebsteder.

Bonus: små virksomheder elsker ikke at betale tilbagevendende månedlige hostinggebyrer. Indrømmet, hosting er ikke en enorm omkostning, men klienter behøver bare ikke gider at betale andet end domænet, hvilket er fantastisk.

Single-side applikationer

viser du en vidunderlig, cool ny app, der er afhængig af moderne front-end rammer?

din ansøgning er allerede for det meste statisk., Tag et par ekstra trin for at isolere enhver serversidelogik i en separat applikation, og få det fulde udbytte af at have din app serveret helt fra Cloudflare ‘ s cache.

din ansøgning vil være tilgængelig på alle tidspunkter.

Blogs

Dette er en hård sælge. Det er svært at overbevise folk om, at statiske sitesebsteder kan bruges til blogs, men Læs mig ud – jeg er ikke gået ud af den dybe ende.

Blogs er intet mere end indhold gengives med skabeloner. Du behøver simpelthen ikke en fuldblæst applikation, der analyserer hver anmodning og gengiver en ny side. En statisk .ebsted er perfekt til denne brug kasse.,overvej Jekyll. Du giver det flydende skabeloner og Markdo .n indhold, og det kombinerer dem sammen i en statisk hjemmeside. Ingen on-the-fly behandling kræves, og din blog føles pludselig betydeligt hurtigere.

denne arbejdsgang er især nyttig, fordi GitHub sider understøtter Jekyll bygger. Pludselig kan blogindlæg bidrage med pull-anmodninger, og alt dit indhold gemmes inden for versionskontrol. Ikke-udviklere kan stadig bidrage indlæg i Markdo .n ved at offentliggøre deres indlæg gennem Stackedit.faktisk bruger jeg Stackedit til at komponere dette indlæg lige nu!,

Hvis du vil have kommentarer til dine blogindlæg, giver dis .us dig et kraftfuldt kommentarsystem ved at indsætte et uddrag af JavaScript.

denne side, som du læser, bruger også dis .us.

GitHub sider

GitHub sider er GitHub svar på projektsider, og det giver dig mulighed for at tjene enhver statisk hjemmeside direkte fra din repository. Da GitHub-sider understøtter tilpassede domæner, kan du være vært for et statisk websiteebsted på GitHub-sider gratis, med udrulleringer direkte fra Git.

implementering til GitHub sider.

nok snak, lad os se det i aktion!,

Jeg har gået videre og lavet en enkelt side reagere app, der henter og viser den aktuelle valutakurs for den Pakistanske Rupee fra en offentlig API. Lad os implementere dette til GitHub sider.

lad os først oprette et nyt GitHub-arkiv.

GitHub sider, der er en gren kaldet gh-pages så lad os oprette et for mit projekt.

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

og lad os skubbe theebstedet op:

og vi er færdige!, På dette punkt hjemmesiden vil være tilgængelig på med gratis SSL:

det Vigtige ting at bemærke:

• GitHub sider serverer index.html fil i dit projekt gh-pages branch
• website bliver serveret på USERNAME.github.io/REPOSITORY-NAME

Tilpasning af domænenavnet.

det er fint at betjene Gebstedet fra GitHub, men ethvert anstændigt websiteebsted har brug for et brugerdefineret domænenavn. Heldigvis giver GitHub dig mulighed for at medbringe dit eget domæne til festen!,

lad os først oprette en speciel CNAME fil og placere vores domænenavn der. Dette vil lade GitHub vide, hvilket domænenavn der skal sendes til lageret.

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

for det Andet, lad os punkt et CNAME for vores underdomæne til GitHub DNS på USERNAME.github.io:

Forsigtighed: Brug IKKE denne til en apex-domæne! Tilføjelse af et CNAME Optag til roden dit domæne vil deaktivere dineMX ogTXT poster., Brug kun dette til dit underdomæne. Ape. – domæner diskuteres senere.

På dette punkt, at vores hjemmeside skal køre på vores brugerdefinerede domæne på HTTP:

det Vigtige ting at bemærke:

• standard *.github.io domæne er tjent gennem HTTPS.
• vores brugerdefinerede domænenavn serveres gennem usikker http.
• Brug ikke et CNAME optag på dit Ape. – domæne, medmindre du vil dræbe dine e-mails.

Begrænsninger af GitHub-sider:

• Repos skal være mindre end 1 GB i Filstørrelse.,
• Websebsteder skal være mindre end 1 GB i Filstørrelse.
• Månedlig båndbredde grænse er 100 GB. Vi vil omgå dette senere.

Brug en apex-domæne som dit brugerdefinerede domæne

Den nemmeste måde at komme omkring denne begrænsning er at bruge www som din underdomæne, og omdirigere alle HTTP-trafik fra apex til at www. I mit eksempel, jeg vil omdirigere gilani.me til , som peger på min statisk hjemmeside, men jeg kan ikke lide at gøre tingene på den nemme måde.,

Hvis du virkelig vil bruge et Ape. – domæne, skal du kontrollere, om din DNS-udbyder giver dig mulighed for at indstille ANAME poster. Disse er (forenklet) halvvejs mellem CNAME poster, da de lader dig pege på domæner og A poster, da de ikke ophæve andre poster på samme zone.

No ANAME? Den sidste mulighed er at skifte til en DNS-udbyder, der understøtter dette: indtast Cloudflare., Cloudflare giver CNAME udfladning på Ape. – domæner, hvilket svarer til enANAME rekord. Det er bedst at skifte lige nu, da vi dækker Cloudflare i næste afsnit.TLDR: Skift til Cloudflares gratis DNS, og indstil en CNAME på dit Ape. – domæne. De gør noget specielt med deres CNAME, der får det til at fungere.

SSL og Cloudflare

velkommen til post-sno .den æra., Alle vores værste frygt for regeringssanktioneret snooping og hacking er blevet bekræftet, og verden kæmper for at sikre data i transit og i ro.

som en moderne admebadministrator forventes du at levere mindst SSL på dit websiteebsted uden blandet indhold.

det er kommet til det punkt, hvor Google Chrome markerer almindelige HTTPS-websebsteder som usikre, og Google-søgning begynder at favorisere HTTPS-websebsteder mere fordelagtigt i deres placering. Vi diskuterer endnu flere strategier for at gøre din front-end sikker senere, men for nu dækker vi kun SSL.heldigvis har vi nu lad os kryptere.,

det er en non-profit og helt automatiseret Certificate Authority (CA), der lader dig programmatisk udstede kortvarige 90-dages SSL-certifikater for alle domæner, du kontrollerer. Det er en leg at bruge; det er open source; og projektet støttes af en overflod af virksomheder, herunder Mo .illa og Electronic Frontier Foundation.

anvendelse af Cloudflare til god brug

Cloudflare er en DNS -, CDN-og DDoS-beskyttelsestjeneste.

det cacher dit websiteebsted og serverer det til brugere fra servere geografisk tæt ved, hvilket gør dit websiteebsted hurtigere., Det har den ekstra fordel at holde dig under Githubs 100GB båndbreddegrænse, fordi selvom dit websiteebsted bliver sindssygt populært, vil de fleste anmodninger ramme cachen og aldrig nå serveren.udover dette tilbyder Cloudflare en service kaldet Universal SSL, hvor de udsteder et gratis SSL-certifikat fra deres CA-partnere, så du får HTTPS gratis… for evigt.

hvorfor Cloudflare?

Jeg ved hvad du tænker: Gilani, du har lige fortalt mig, hvor fantastisk lad os kryptere er. Hvorfor taler du om Cloudflare? Nå, det hele kommer ned på enkelhed.,

som en mental øvelse kan du forestille dig at oprette flere Ngin. – cache og reverse Pro .ies rundt om i verden, hvilket giver dem alle gyldige SSL-certifikater og betjener brugernes webebsider fra deres nærmeste placeringer.dette resulterer i, at dit websiteebsted bliver serveret via SSL, selvom origin-serveren ikke har et SSL-certifikat, selvom Cloudflare giver dig specielle selvsignerede certifikater, som du kan lægge på din origin-server for at sikre forbindelsen op til Cloudflares servere. Dette er, hvad Cloudflare giver dig en gratis plan, og du behøver ikke engang at forny dit certifikat hver 90 dage.,

som freelancer får jeg klienter, der ønsker, at et siteebsted skal køre for deres forretning så hurtigt som muligt. De forstår eller bekymrer sig ikke om sikkerhedsproblemer, plager det moderne webeb eller kryptering under transit. Nogle kunder kæmper for at forstå ideen om domænenavne, og finder det irriterende, når de skal betale et årligt gebyr på $15 “bare for at holde min hjemmeside kørende”. Så prøv at forklare dem, hvorfor de skal betale for en klynge af omvendte fuldmagter, der beskytter deres websiteebsted, der kører på selve gratis hosting.

opsætning af Cloudflare SSL

lad os få vores hænder beskidte igen., Den første ting at gøre, skal du skifte til routing al din trafik gennem Cloudflare:

Næste, under Crypto, sæt SSL-niveauet til “Fuld.”

Tving” automatisk https-omskrivning ” for at dræbe advarsler om blandet indhold.

På dette tidspunkt fungerer vores websiteebsted over både HTTP og HTTPS. Lad os tvinge HTTPS til alt på vores domæne.

alt udført., Vores hjemmeside skal altid indlæses over HTTPS med en grøn “sikker” rating i Chrome.

Sidste Ord og Sikkerhedsmæssige Overvejelser

Der er et par ting, jeg ikke diskutere ovenfor, og jeg vil gerne tage et øjeblik til at præcisere et par punkter.

kloge iblandt eder, som vil påpege, at der er et par åbenlyse sikkerhedsmæssige problemer med dette setup, nemlig at der ikke er nogen sikker HTTP-overskrifter som:

• Content-Security-Policy: masser af scripts og aktiver fra en whiteliste af værter, og kan afvise inline js.,
• X-Frame-Options: deaktiverer dit websiteebsted fra at blive indlæst i en iframe.

og du har ret. GitHub-sider og endda Cloudflare tillader dig ikke at tilpasse dine HTTP-overskrifter. Du kan dog indstille en CSP ved hjælp af HTML meta tag.

du skal Blot indsætte dette i din web-side:

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

Men i det øjeblik, der er nogen praktisk måde at sætte X-Frame-Options header på GitHub sider, hvilket betyder, at en hacker, kan lægge din webside i en særligt udformet iframe og træk et XSS-angreb., Hvis du er dedikeret, Kan du dog løse dette problem ved at bede brugerne om at bekræfte deres adgangskode eller 2FA-token ved enhver følsom handling eller ved at sende et CSRF-token ved hver godkendt anmodning.

en stor bekymring for nogle er, at ved at bruge de gratis offentlige lagre på GitHub, er dit websiteebsted og kildekode tilgængelig for alle, der ønsker at gaffel eller Do .nloade det. Så jeg tror, at bekymringen her er malplaceret.statisk indhold er ikke kildekode i den forstand, at det ikke kompileres eller behandles som et script, før det serveres til brugeren., Din bruger får nøjagtigt den samme statiske kopi af websiteebstedet, hvis de skulle køre en crawebcra .ler, der pegede på dit .ebsted. Mens hosting koden i en GitHub repository sikkert gør det lettere at do .nloade en kopi af dit websiteebsted, betyder det ikke udsætte noget, der ikke allerede var offentligt.

skalering, ubegrænset skalering

ideerne, der præsenteres i denne artikel, er ikke begrænset til gratis hostingebhosting af små applikationer.,

Du kan opbygge en front-end lag, der er baseret på en moderne JavaScript-framework, hook det op til en storstilet cloud-baseret Backend-as-a-Service (BaaS), som Firebase, og skabe komplekse applikationer uden at bekymre sig om servere, oppetid, eller enhver anden infrastruktur-relaterede spørgsmål.lav et nyt spændende webebbaseret spil?! Tjek GameSparks, og du er god til at gå.

resum., tilståelse og Links

i denne artikel fik jeg det til at se ud som om jeg manuelt offentliggjorde min React-app tilgh-pages. Det gjorde jeg ikke., Jeg arbejdede på master og da det kom tid til at implementere, jeg kørte npm run deploy, som sparkede et build script og skubbede bygge gh-pages. Se venligstmaster gren af mit arkiv for at se, hvordan det virker.,

Grillbarer

Fordele:

• Øjeblikkelig indsættelse
• Let samarbejde
• Sikker hosting miljø

Forbehold:

• Ingen adgang til HTTP-headere
• Let at hente en kopi af denne hjemmeside
• GitHub viden, der kræves
• Afhænger af teknologi leverandører

Links: