Ubegrenset Omfang og Gratis Web Hosting med GitHub Pages og Cloudflare

jeg har en hemmelighet som sparer kundene mine massevis av penger, holder sin nettside sikre, og har innebygd backup.

hemmelighet: jeg gjøre deres hjemmeside statisk. Så, jeg lagre og vert det med GitHub, og bruke Cloudflare til å tjene det over HTTPS, og gjøre det raskt. Mine kunder noensinne betale for deres domenenavn, men de får mye mer enn de noensinne forhandlet for.

Hvorfor Statisk Innhold?

Statiske nettsteder er fantastisk rask siden det er ingen server saksbehandlingstid som er involvert., Også, ved å begå en kode base av statisk eiendeler i et git repository, rulle tilbake endringer bare blir et spørsmål om å gå tilbake til en tidligere begått. Sikkerhetskopier er en git push unna, og du egentlig tjene hele nettstedet fra hurtigbufferen, noe som betyr at serveren vil nesten aldri har til å behandle en anmodning om igjen.

å Bygge en kompleks UI?

Med fremveksten av front-end rammeverk, som Reagerer og dens pårørende, kan du opprette magiske opplevelser med noe mer enn HTML/CSS og JavaScript., Vil du ha til din egen back-end-logikk fra front-end, men, men, selv Ruby on Rails skip med en API-modus nå.

Når jeg får i oppdrag å bygge et nettsted, vil jeg vurdere om eller ikke en statisk side er nok til å møte min klients behov, og i mange tilfeller er det.

lurer du på hva slags bruk tilfellene jeg har i tankene? Flott! La oss diskutere noen situasjoner da du kanskje ønsker å vurdere statisk innhold, og forklare hvordan denne tilnærmingen kan spare både deg og kunden din tid.,

Brochureware nettsteder

Brochureware nettsteder er ment å gi informasjon om en virksomhet, og ikke endre seg betydelig gjennom deres liv. Et dynamisk program er klart overkill for slike områder, og siden disse nettstedene gå unmaintained for år, mottar få, om noen oppdateringer, de er vanligvis enkle mål for hackere å, vel, hack.

Statisk HTML-maler som er betydelig billigere enn deres CMS kolleger, og de er lettere å justere i fremtiden. Utviklere bedt om å oppdatere slike områder ikke krever spesialisert kunnskap om et bestemt CMS., Som regel har jeg alltid gjøre statiske nettsider for brochureware nettsteder.

Bonus: Små bedrifter kjærlighet ikke å betale månedlig hosting avgifter. Gitt, hosting er ikke en stor kostnad, men klienter bare ikke å bry meg med å betale for noe annet enn den domenet, noe som er flott.

Single-side-programmer

Er du vise frem en flott, kule, nye app som baserer seg på moderne front-end rammer?

Din søknad er allerede det meste statisk., Ta noen ekstra skritt for å isolere noen server-side logikk inn i et eget program, og få full nytte av å ha din app serveres helt fra Cloudflare cache.

Din søknad vil være tilgjengelig til enhver tid.

Blogger

Dette er en tøff selge. Det er vanskelig å overbevise folk statiske nettsteder kan være ansatt for blogger, men leste meg ut – jeg har ikke gått av den dype enden.

Blogger er ikke noe mer enn innhold gjengitt med maler. Du rett og slett ikke trenger en full-blåst programmet parsing hver forespørsel, og gjengi en ny side. En statisk side, er perfekt for dette use case.,

Tenk Jekyll. Du gir den Flytende maler og Markdown innhold, og det kombinerer dem sammen til en statisk nettside. Ingen on-the-fly foredling som kreves, og bloggen din plutselig føles betydelig raskere.

Denne arbeidsflyten er spesielt nyttig fordi GitHub pages støtte Jekyll bygger seg opp. Plutselig, blogginnlegg kan bli bidratt med trekk forespørsler, og alt innholdet er lagret i versjonen kontroll. Ikke-utviklere kan fortsatt bidra med innlegg i Markdown ved å publisere sine innlegg via Stackedit.

faktisk, jeg bruker Stackedit til å skrive dette innlegget akkurat nå!,

Også, hvis du vil ha kommentarer på dine blogginnlegg, Disqus gir deg en kraftig kommentar systemet ved å stikke inn en bit av JavaScript.

Denne siden du leser bruker Disqus også.

GitHub Pages

GitHub Pages er GitHub svar til prosjektet sider, og det gir deg mulighet til å tjene noen statisk nettside rett fra depotet. Siden GitHub pages støtte egne domener, du kan være vert for et statisk nettsted på GitHub pages gratis, med distribuerer direkte fra Git.

Distribusjon til GitHub Pages.

Nok prat, la oss se det i aksjon!,

jeg har gått foran og gjort en enkelt side Reagerer app som henter og viser den gjeldende valutakursen for den Pakistanske Rupi fra en felles API. La oss distribuere dette til GitHub Pages.

Først, la oss lage en ny GitHub depotet.

GitHub pages serveres fra en gren kalt gh-pages så la oss lage en for mitt prosjekt.

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

Og la oss presse siden opp:

Og vi er ferdig!, På dette punktet nettstedet vil være tilgjengelig på med gratis SSL -:

Viktig ting å merke seg:

• GitHub pages serverer index.html fil i prosjektets gh-pages gren
• nettstedet serveres på USERNAME.github.io/REPOSITORY-NAME

Tilpasse domenenavn.

som Serverer siden av GitHub er fint, men noen anstendig nettstedet er behov for et egendefinert domenenavn. Heldigvis, GitHub kan du Ta med Ditt Eget Domene til festen!,

Først, la oss lage en spesiell CNAME fil og legger vår domene navn der. Dette vil la GitHub vite hvilket domene navn til ruten til depotet.

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

for det Andre, la oss peke på et CNAME for våre underdomene til GitHub DNS på USERNAME.github.io:

Advarsel: IKKE bruk denne for en apex domene! Legge til en CNAME spill inn til roten av ditt domene vil deaktivere MX og TXT oppføringer., Bruk dette bare for dine underdomene. Apex domener som er omtalt senere.

På dette punktet, vil vår nettside skal kjøre på vårt eget domene på HTTP:

Viktig ting å merke seg:

• standard *.github.io domene serveres gjennom HTTPS.
• Våre egendefinert domenenavn serveres gjennom usikre HTTP.
• IKKE bruk en CNAME spill inn på din apex domene hvis du ønsker å drepe din e-post.

Begrensninger på GitHub Pages:

• Repos må være mindre enn 1 GB i fil-størrelse.,
• Nettsteder må være mindre enn 1 GB i fil-størrelse.
• Månedlig Båndbredde grense er 100 GB. Vi vil omgå dette senere.

ved Hjelp av en apex domene som ditt egendefinerte domene

Den enkleste måten å komme rundt denne begrensningen er å bruke www som underdomene, og omdirigere all HTTP-trafikk fra apex til www. I mitt eksempel, jeg ville omdirigere gilani.me til , som peker til min statisk side, men jeg liker ikke å gjøre ting på en enkel måte.,

Hvis du virkelig ønsker å bruke en apex domene, sjekk om DNS-leverandøren din kan du angi ANAME oppføringer. Disse er (forenklet) halvveis mellom av CNAME poster siden de la du peker til domener og A oppføringer, siden de ikke opphever andre poster i samme sone.

Ingen ANAME? Det siste alternativet er å endre til en DNS-leverandør som støtter dette: skriv inn Cloudflare., Cloudflare gir CNAME utflating på apex domener, noe som tilsvarer en ANAME spill inn. Det er best å gjøre overgangen akkurat nå siden vi skal dekke Cloudflare i neste avsnitt.

TLDR: Bytt til Cloudflare gratis DNS og angi en CNAME på apex domene. De gjør noe spesielt med deres CNAME som gjør at det fungerer.

SSL og Cloudflare

Velkommen til post-Snowden tid., Alle våre verste frykt for statlig sanksjonert snusing og hacking har blitt bekreftet, og verden er desperat å sikre data i transitt og i ro.

Som en moderne web admin, du er forventet å gi minst SSL på din nettside, med ingen blandet innhold.

Det er kommet til det punktet hvor Google Chrome merker vanlig HTTPS nettsteder som usikre og Google-Søk er i ferd med å favør HTTPS nettsteder mer positivt i sine rangeringer. Vi vil diskutere enda flere strategier for å gjøre din front-end sikkert senere, men for nå, vi vil bare dekke SSL.

Heldigvis, har vi nå La oss Kryptere.,

Det er en non-profit og helt automatisert Certificate Authority (CA) som lar deg programmatisk problemet kortsiktig 90-dagers SSL-sertifikater for alle domener som du kontrollerer. Det er lett å bruke, det er open source, og prosjektet er støttet av en mengde firmaer, inkludert Mozilla og Electronic Frontier Foundation.

å Sette Cloudflare til God Bruk

Cloudflare er en DNS, CDN, og DDoS protection service.

Det cacher ditt nettsted, og serverer den til brukere fra servere som er geografisk nær ved, noe som gjør nettstedet raskere., Det har den ekstra fordelen av å holde deg under GitHub er 100 GB båndbredde grense, fordi hvis nettstedet ditt blir sykt populære, de fleste forespørsler vil treffe cache, og aldri kommer til server.

På toppen av dette, Cloudflare tilbyr en tjeneste som heter Universal SSL hvor de gi deg en gratis SSL-sertifikat fra sine CA partnere, slik at du får HTTPS gratis… for alltid.

Hvorfor Cloudflare?

jeg vet hva du tenker: Gilani, du fortalte meg hvor fantastisk La oss Kryptere er. Hvorfor snakker du om Cloudflare? Vel, det hele kommer ned til enkelhet.,

Som en mental trening, tenk deg å sette opp flere Nginx cache og omvendt proxy-servere rundt om i verden, å gi dem alle gyldig SSL-sertifikater, og serverer brukere web-sider fra sine nærmeste steder.

Dette resulterer i at ditt nettsted blir servert via SSL-selv om den opprinnelige serveren ikke har en SSL-sertifikat, selv om Cloudflare gir deg spesialtilbud på hoteller i selv-signerte sertifikater som du kan sette på din opprinnelige serveren for å sikre tilkoblingen opp til Cloudflare servere. Dette er hva Cloudflare gir du med en gratis plan, og du trenger ikke engang å fornye sertifikatet hver 90 dager.,

Som frilanser, får jeg kunder som ønsker et nettsted oppe og kjører for deres virksomhet så raskt som mulig. De ikke forstår eller bryr seg om sikkerhet bekymringer, plager det moderne nettet, eller kryptering av under transporten. Noen klienter sliter med å forstå ideen av domenenavn, og synes det er irriterende når de må betale en $15 årsavgiften «bare for å holde min hjemmeside kjører». Så kan du prøve og forklare dem hvorfor de må betale for en klynge av reverse proxy som beskytter deres hjemmeside som kjører på gratis hosting seg selv.

Sette opp Cloudflare SSL

La oss få hendene skitne igjen., Den første tingen å gjøre, bytte til ruting alle dine internett-trafikk gjennom Cloudflare:

Neste, under Crypto, sett SSL-nivå for å «Fulle.»

Force «Automatisk HTTPS Skrive» å drepe blandet innhold advarsler.

På dette punktet, vil vår nettside arbeid over både HTTP og HTTPS. La oss tvinge HTTPS for alt på vår domene.

Alle gjort., Vår nettside bør alltid belastning over HTTPS-med en grønn «Sikre» rating i Chrome.

Siste Ord-og sikkerhetsvurderinger

Det er et par ting jeg ikke diskutere over, og jeg vil gjerne ta et øyeblikk for å avklare noen punkter.

gløgg blant dere vil peke på at det er noen åpenbare security problemer med dette oppsettet, nemlig at det er ingen sikker HTTP-overskrifter som:

• Content-Security-Policy: laster skript og eiendeler fra en hviteliste, allhers gud, og kan ikke tillate inline js.,
• X-Frame-Options: deaktiverer ditt nettsted fra å legge inn i en iframe.

Og du har rett. GitHub-sider og til og med Cloudflare ikke tillate deg å tilpasse HTTP-overskrifter. Du kan imidlertid angi en CSP ved hjelp av HTML meta – tag-en.

Bare sett dette i din web-side:

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

Men i øyeblikket, det er ingen praktisk måte å sette X-Frame-Options topptekst på GitHub sider, noe som betyr at en angriper kan laste inn nettsiden din inn i en spesiallaget iframe og trekk av en XSS-angrep., Hvis du er dedikert, skjønt, du kan omgå dette problemet ved å spørre brukerne til å bekrefte deres passord eller 2FA merke på hver sensitive handling, eller ved å sende et CSRF merke på hver godkjent forespørsel.

En stor bekymring for mange er at ved å bruke den offentlige arkiver på GitHub, ditt nettsted og kildekoden er tilgjengelig for alle som ønsker å gaffel eller laste den ned. Så jeg tror bekymring her er feilplassert.

Statisk innhold som ikke er kildekoden i den forstand at det ikke er utarbeidet eller behandlet som et skript før de blir levert til brukeren., Brukeren vil få nøyaktig samme statisk kopi av websiden, hvis de var å kjøre en web-crawler pekte på ditt nettsted. Mens hosting koden i en GitHub depotet sikkert gjør det enklere å laste ned en kopi av ditt nettsted, er det ikke utsett noe som ikke allerede er offentlig.

Skalering, Ubegrenset Skalering

ideene som presenteres i denne artikkelen er ikke begrenset til gratis web hosting for små-programmer.,

Du kan bygge en front-end lag basert på en moderne JavaScript-rammeverk, koble den opp til en stor skala, sky-basert Backend-as-a-Service (BaaS), som Firebase, og lage komplekse programmer uten å bekymre deg for servere, oppetid, eller noen annen infrastruktur relatert problem.

Gjør et nytt spennende web-basert spill?! Sjekk ut GameSparks, og du er godt å gå.

Sammendrag, Bekjennelse, og Lenker

I denne artikkelen, jeg laget det til å virke som om jeg manuelt publisert min Reagerer app til gh-pages. Jeg gjorde ingen slike ting., Jeg jobbet på master og når tiden kom til å distribuere, jeg kjørte npm run deploy som sparket av en bygge skript og presset på å bygge gh-pages. Vennligst se master gren av min depotet for å se hvordan det fungerer.,

Takeaways

Fordeler:

• Instant distribusjon
• Lett samarbeid
• Sikre hosting miljø

Begrensninger:

• Ingen tilgang til HTTP-overskrifter
• det er Enkelt å laste ned en kopi av nettstedet
• GitHub nødvendig kunnskap
• Avhenger av teknologi leverandører

Lenker: