Obegränsad skala och gratis webbhotell med GitHub Pages och Cloudflare

Jag har en hemlighet som sparar mina kunder massor av pengar, håller sin webbplats säker och har inbyggda säkerhetskopior.

hemligheten: jag gör deras hemsida statisk. Sedan lagrar jag och värd den med GitHub, och använder Cloudflare för att servera den över HTTPS, och gör det snabbt. Mina kunder betalar bara för sitt domännamn, men de får mycket mer än de någonsin förhandlat om.

varför statiskt innehåll?

statiska webbplatser är underbart snabba eftersom det inte finns någon serverbehandlingstid., Genom att begå en kodbas av statiska tillgångar i ett git-arkiv blir rullande tillbaka förändringar helt enkelt en fråga om att återgå till ett tidigare åtagande. Säkerhetskopior är engit push bort, och du tjänar i huvudsak hela din webbplats från cacheminnet, vilket innebär att din server nästan aldrig kommer att behöva behandla en förfrågan igen.

bygga ett komplext användargränssnitt?

med tillkomsten av front-end ramar, som React och dess anhöriga, kan du skapa magiska upplevelser med inget annat än HTML/CSS och JavaScript., Du måste skilja din back-end logik från din front-end dock, men även Ruby on Rails fartyg med ett API-läge nu.

När jag får kontrakt att bygga en webbplats, jag överväga om en statisk webbplats är tillräckligt för att möta min kunds behov, och i många fall är det.

undrar du vilken typ av användningsfall jag har i åtanke? Toppen! Låt oss diskutera vissa situationer när du kanske vill överväga statiskt innehåll och förklara hur detta tillvägagångssätt kan spara både dig och din klients tid.,

Brochureware webbplatser

Brochureware webbplatser är avsedda att ge information om ett företag, och inte förändras avsevärt under hela sitt liv. En dynamisk applikation är tydligt overkill för sådana webbplatser,och eftersom dessa webbplatser går obefläckade i flera år, får få, om några uppdateringar, de är oftast enkla mål för hackare att, ja, hacka.

statiska HTML-mallar är betydligt billigare än deras CMS motsvarigheter, och de är lättare att justera i framtiden. Utvecklare ombedd att uppdatera sådana webbplatser kräver inte specialiserad kunskap om ett visst CMS., Som regel gör jag alltid statiska webbplatser för broschyrwebbplatser.

Bonus: små företag älskar att inte betala återkommande månatliga hosting avgifter. Beviljas, hosting är inte en enorm kostnad, men kunderna behöver bara inte bry sig om att betala något annat än domänen, vilket är bra.

enkelsidiga program

visar du upp en underbar, cool ny app som bygger på moderna front-end ramar?

din ansökan är redan mestadels statisk., Ta några extra steg för att isolera någon serversidan logik i ett separat program, och få full nytta av att ha din app serveras helt från Cloudflare cache.

din ansökan kommer alltid att vara tillgänglig.

bloggar

det här är en tuff försäljning. Det är svårt att övertyga människor statiska webbplatser kan användas för bloggar, men Läs mig ut – Jag har inte gått av den djupa änden.

bloggar är inget annat än innehåll som återges med mallar. Du behöver helt enkelt inte en fullt utvecklad applikation som analyserar varje förfrågan och gör en ny sida. En statisk plats är perfekt för detta användningsfall.,

överväga Jekyll. Du ger det flytande mallar och Markdown innehåll, och det kombinerar dem tillsammans till en statisk webbplats. Ingen on-the-fly bearbetning krävs, och din blogg känns plötsligt betydligt snabbare.

det här arbetsflödet är särskilt användbart eftersom GitHub-sidor stöder Jekyll-byggnader. Plötsligt, blogginlägg kan bidra med pull förfrågningar, och allt ditt innehåll lagras i versionskontroll. Icke-utvecklare kan fortfarande bidra inlägg i Markdown genom att publicera sina inlägg via Stackedit.

faktum är att jag använder Stackedit för att komponera det här inlägget just nu!,

Även om du vill ha kommentarer på dina blogginlägg, Disqus ger dig ett kraftfullt kommentarsystem genom att infoga ett utdrag av JavaScript.

den här sidan som du läser använder Diskus också.

Github Pages

Github Pages är GitHubs svar på projektsidor, och det låter dig servera någon statisk webbplats direkt från ditt förråd. Eftersom GitHub-sidor stöder anpassade domäner kan du vara värd för en statisk webbplats på GitHub-sidor gratis, med distribuerar direkt från Git.

distribuera till Github sidor.

tillräckligt med prat, låt oss se det i aktion!,

Jag har gått vidare och gjort en enda sida reagera app som hämtar och visar den aktuella växelkursen för Pakistansk rupie från en offentlig API. Låt oss distribuera detta till GitHub sidor.

låt oss först skapa ett nytt GitHub-arkiv.

GitHub-sidor serveras från en gren som heter gh-pages så låt oss skapa en för mitt projekt.

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

och låt oss driva upp webbplatsen:

och vi är klara!, Vid denna tidpunkt kommer Webbplatsen att finnas tillgänglig på med gratis SSL:

viktiga saker att notera:

• GitHub-sidorna tjänar filen index.html I projektets index.html id=”b8bcb90adb”>gren
• webbplatsen serveras påUSERNAME.github.io/REPOSITORY-NAME

anpassa domännamnet.

att betjäna webbplatsen utanför GitHub är bra, men någon anständig webbplats behöver ett eget domännamn. Lyckligtvis kan GitHub du ta med din egen domän till festen!,

låt oss först skapa en speciellCNAME – fil och placera vårt domännamn där. Detta låter GitHub veta vilket domännamn som ska skickas till arkivet.

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

För det andra, låt oss peka aCNAME för vår underdomän till GitHubs DNS vidUSERNAME.github.io:

VARNING: Använd inte detta för en Apex-domän! Lägga till enCNAME post till roten din domän kommer att inaktivera dina MX och TXT poster., Använd detta endast för din underdomän. Apex domäner diskuteras senare.

vid denna tidpunkt bör vår webbplats köras på vår anpassade domän på HTTP:

viktiga saker att notera:

• standard *.github.io domän serveras via HTTPS.
• vårt anpassade domännamn serveras via osäker HTTP.
• använd inte enCNAME – post på din apex-domän om du inte vill döda dina e-postmeddelanden.

Begränsningar av GitHub sidor:

• Repos måste vara mindre än 1 GB i Filstorlek.,
• webbplatser måste vara mindre än 1 GB i Filstorlek.
• månatlig bandbredd gräns är 100 GB. Vi går förbi det här senare.

använda en apex-domän som din egen domän

det enklaste sättet att komma runt denna begränsning är att använda www som din underdomän och omdirigera all HTTP-trafik från apex till www. I mitt exempel skulle jag omdirigera gilani.me till , vilket pekar på min statiska webbplats, men jag gillar inte att göra saker på det enkla sättet.,

om du verkligen vill använda en apex-domän, kontrollera om din DNS-leverantör låter dig ställa inANAME poster. Dessa är (förenklade) halvvägs mellan CNAME poster eftersom de låter dig peka på domäner och A poster eftersom de inte upphäver andra poster i samma zon.

NejANAME? Det sista alternativet är att byta till en DNS-leverantör som stöder detta: ange Cloudflare., Cloudflare tillhandahåller CNAME flattning på apex-domäner, vilket motsvarar en ANAME – post. Det är bäst att göra omkopplaren just nu eftersom vi kommer att täcka Cloudflare i nästa avsnitt.

TLDR: Växla till Cloudflares gratis DNS och ställ in enCNAME på din apex-domän. De gör något speciellt med deras CNAME som gör att det fungerar.

SSL och Cloudflare

Välkommen till post-Snowden eran., Alla våra värsta farhågor om statligt sanktionerade snooping och hacking har bekräftats, och världen förvränger för att säkra data i transit och i vila.

som en modern webbadministratör förväntas du tillhandahålla minst SSL på din webbplats, utan blandat innehåll.

det har kommit till den punkt där Google Chrome markerar vanliga HTTPS-webbplatser som osäkra och Google-sökning börjar gynna HTTPS-webbplatser mer positivt i sin ranking. Vi kommer att diskutera ännu fler strategier för att göra din front-end säker senare, men för nu, vi kommer bara att täcka SSL.

lyckligtvis har vi nu låt oss kryptera.,

det är en ideell och helt automatiserad certifikatutfärdare (CA) som låter dig programmatiskt utfärda kortsiktiga 90-dagars SSL-certifikat för alla domäner du kontrollerar. Det är en bris att använda; det är öppen källkod; och projektet stöds av en uppsjö av företag, inklusive Mozilla och Electronic Frontier Foundation.

att Sätta Cloudflare till God Användning

Cloudflare är en DNS-CDN, och DDoS protection service.

det cachar din webbplats, och tjänar den till användare från servrar geografiskt i närheten, vilket gör din webbplats snabbare., Det har den extra fördelen att hålla dig under GitHub s 100GB bandbredd gräns eftersom även om din webbplats blir vansinnigt populär, de flesta förfrågningar kommer att träffa cache, och aldrig nå servern.

utöver detta erbjuder Cloudflare en tjänst som heter Universal SSL där de ger dig ett gratis SSL-certifikat från sina CA-partners, så du får HTTPS gratis… för alltid.

Varför Cloudflare?

Jag vet vad du tänker: Gilani, du berättade bara hur häftigt Låt oss kryptera är. Varför pratar du om Cloudflare? Tja, allt handlar om enkelhet.,

som en mental övning, Tänk dig att ställa in flera nginx-cache och omvänd proxies runt om i världen, vilket ger dem alla giltiga SSL-certifikat och betjänar användarnas webbsidor från sina närmaste platser.

detta resulterar i att din webbplats serveras via SSL även om ursprungsservern inte har ett SSL-certifikat, även om Cloudflare ger dig speciella självsignerade certifikat som du kan sätta på din ursprungsserver för att säkra anslutningen upp till Cloudflares servrar. Detta är vad Cloudflare ger dig en gratis plan, och du behöver inte ens förnya ditt certifikat var 90: e dag.,

som frilansare får jag kunder som vill ha en webbplats igång för sin verksamhet så fort som möjligt. De förstår inte eller bryr sig om säkerhetsproblem, plågar den moderna webben eller kryptering under transitering. Vissa kunder kämpar för att förstå idén om domännamn, och tycker att det är irriterande när de måste betala en $15 årsavgift ”bara för att hålla min webbplats igång”. Så försök förklara för dem varför de måste betala för ett kluster av omvända proxies som skyddar sin webbplats som körs på gratis värd själv.

ställa in Cloudflare SSL

låt oss få våra händer smutsiga igen., Det första du behöver göra, byt till routing all din trafik via Cloudflare:

nästa, under Crypto, sätt SSL-nivån till ”Full.”

tvinga ”automatisk HTTPS-omskrivning” för att döda varningar om blandat innehåll.

vid denna tidpunkt kommer vår hemsida att fungera över både HTTP och HTTPS. Låt oss tvinga HTTPS för allt på vår domän.

allt klart., Vår webbplats bör alltid ladda över HTTPS med en grön ”säker” betyg i Chrome.

slutliga ord och säkerhetshänsyn

det finns några saker jag inte diskuterade ovan, och jag skulle vilja ta en stund för att klargöra några punkter.

den skarpsinniga bland dig kommer att påpeka att det finns några uppenbara säkerhetsproblem med den här inställningen, nämligen att det inte finns några säkra HTTP-rubriker som:

• Content-Security-Policy: laddar skript och tillgångar från en vitlista av värdar och kan inte tillåta inline js.,
• X-Frame-Options: inaktiverar din webbplats från att laddas i en Iframe.

och du har rätt. GitHub-sidor och till och med Cloudflare tillåter dig inte att anpassa dina HTTP-rubriker. Du kan dock ställa in en CSP med HTML-taggen meta.

sätt bara in det här på din webbsida:

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

För närvarande finns det dock inget praktiskt sätt att ställa inX-Frame-Options – rubriken på GitHub-sidor, vilket innebär att en angripare kan ladda din webbsida i en speciellt utformadiframe och dra av en XSS-attack., Om du är dedikerad kan du dock lösa problemet genom att be användarna att bekräfta sitt lösenord eller 2FA-token vid varje känslig åtgärd, eller genom att skicka en CSRF-token vid varje autentiserad förfrågan.

en stor oro för vissa är att genom att använda gratis offentliga förråd på GitHub, din webbplats och källkod är tillgänglig för alla som vill gaffla eller ladda ner den. Så jag tror att oron här är felplacerad.

statiskt innehåll är inte källkod i den meningen att det inte kompileras eller bearbetas som ett script innan det serveras till användaren., Din användare kommer att få exakt samma statiska kopia av webbplatsen om de skulle köra en sökrobot pekade på din webbplats. Medan värd koden i en GitHub förvaret verkligen gör det lättare att ladda ner en kopia av din webbplats, det inte avslöja något som inte redan var offentligt.

skalning, obegränsad skalning

de idéer som presenteras i den här artikeln är inte begränsade till gratis webbhotell för små applikationer.,

Du kan bygga ett front-end-lager baserat på ett modernt JavaScript-ramverk, koppla det till en storskalig molnbaserad Backend-as-a-Service (BaaS), som Firebase, och skapa komplexa applikationer utan att oroa sig för servrar, drifttid eller någon annan infrastrukturrelaterad fråga.

gör ett nytt spännande webbaserat spel?! Kolla GameSparks, och du är bra att gå.

sammanfattning, bekännelse och länkar

i den här artikeln fick jag det att se ut som om jag manuellt publicerade min React-app tillgh-pages. Det gjorde jag inte., Jag arbetade på master och när det var dags att distribuera, sprang jag npm run deploy som startade ett byggskript och drev byggnaden till gh-pages. Semaster – grenen i mitt arkiv för att se hur det fungerar.,

Takeaways

fördelar:

• omedelbar distribution
• enkelt samarbete
• säker värdmiljö

Caveats:

• ingen tillgång till HTTP-rubriker
• lätt att ladda ner en kopia av webbplatsen
• GitHub kunskap krävs
• beror på teknikleverantörer

länkar: