Onbeperkte schaal en gratis webhosting met GitHub Pages en Cloudflare

Ik heb een geheim dat mijn klanten een hoop geld bespaart, hun website veilig houdt en ingebouwde back-ups heeft.

Het geheim: Ik maak hun website statisch. Dan, ik opslaan en hosten met GitHub, en gebruik Cloudflare om het te dienen via HTTPS, en maak het snel. Mijn klanten betalen alleen voor hun domeinnaam, maar ze krijgen veel meer dan ze ooit verwacht hadden.

waarom statische inhoud?

statische sites zijn prachtig snel omdat er geen server verwerkingstijd betrokken., Ook, door een codebasis van statische assets in een git repository te committen, wordt het terugdraaien van wijzigingen simpelweg een kwestie van terugkeren naar een vorige commit. Backups zijn een git push weg, en je dient in wezen je hele website vanuit de cache, wat betekent dat je server bijna nooit meer een verzoek hoeft te verwerken.

een complexe UI bouwen?

met de komst van front-end frameworks, zoals React en zijn kin, kunt u magische ervaringen creëren met niets meer dan HTML/CSS en JavaScript., Je moet je back-end logica te scheiden van uw front-end al, maar zelfs Ruby on Rails schepen met een API-modus nu.

wanneer ik een contract krijg om een website te bouwen, overweeg ik of een statische site voldoende is om aan de behoeften van mijn cliënt te voldoen, en in veel gevallen is dat zo.

vraagt u zich af wat voor soort use cases ik in gedachten heb? Geweldig! Laten we een aantal situaties bespreken waarin u statische inhoud wilt overwegen en uitleggen hoe deze aanpak zowel u als de tijd van uw klant kan besparen.,

Brochurewarewebsites

Brochurewarewebsites zijn bedoeld om informatie over een bedrijf te verstrekken en veranderen niet significant gedurende hun hele leven. Een dynamische applicatie is duidelijk overkill voor dergelijke sites, en aangezien deze sites gaan unmaintained voor jaren, het ontvangen van weinig, als er updates, ze zijn meestal gemakkelijk doelen voor hackers om, goed, hack.

statische HTML-sjablonen zijn aanzienlijk goedkoper dan hun CMS-tegenhangers, en ze zijn in de toekomst gemakkelijker te tweaken. Ontwikkelaars gevraagd om dergelijke sites bij te werken vereisen geen gespecialiseerde kennis over een bepaald CMS., In de regel maak ik altijd statische websites voor brochureware sites.

Bonus: kleine bedrijven betalen graag geen terugkerende maandelijkse hostingkosten. Toegegeven, hosting is niet een enorme kosten, maar klanten gewoon niet de moeite te betalen iets anders dan het domein, dat is geweldig.

toepassingen met één pagina

pronkt u met een prachtige, coole nieuwe app die vertrouwt op moderne front-end frameworks?

uw toepassing is al grotendeels statisch., Neem een paar extra stappen om elke server side logica te isoleren in een aparte toepassing, en krijg het volledige voordeel van het hebben van uw app volledig geserveerd vanuit Cloudflare ‘ s cache.

uw toepassing zal te allen tijde beschikbaar zijn.

Blogs

Dit is een moeilijke verkoop. Het is moeilijk om mensen statische sites kunnen worden gebruikt voor blogs te overtuigen, maar lees me uit-Ik heb niet gegaan uit het diepe einde.

Blogs zijn niets meer dan inhoud weergegeven met sjablonen. Je hoeft gewoon niet een full-blown applicatie parsing elk verzoek en het renderen van een nieuwe pagina nodig. Een statische site is perfect voor deze use case.,

beschouw Jekyll. Je geeft het vloeibare sjablonen en Markdown content, en het combineert ze samen in een statische website. Geen on-the-fly verwerking vereist,en uw blog voelt plotseling aanzienlijk sneller.

deze workflow is vooral nuttig omdat GitHub pagina ‘ s Jekyll builds ondersteunen. Plotseling, blog posts kunnen worden bijgedragen met pull requests, en al uw inhoud wordt opgeslagen in versiebeheer. Niet-ontwikkelaars kunnen nog steeds bijdragen berichten in Markdown door het publiceren van hun berichten via Stackedit.

in feite gebruik ik Stackedit om dit bericht op dit moment samen te stellen!,

ook als u opmerkingen wilt over uw blogberichten, geeft Disqus u een krachtig commentaarsysteem door een fragment van JavaScript in te voegen.

deze pagina die u leest gebruikt ook Disqus.

GitHub Pages

GitHub Pages is GitHub ’s antwoord op projectpagina’ s, en het stelt je in staat om elke statische website rechtstreeks vanuit je repository te bedienen. Aangezien GitHub pages aangepaste domeinen ondersteunen, kun je GRATIS een statische website op GitHub pages hosten, met deploys rechtstreeks vanuit Git.

implementeren op GitHub-pagina ‘ s.

genoeg gepraat, laten we het in actie zien!,

Ik heb een enkele pagina React-app gemaakt die de huidige wisselkoers voor de Pakistaanse Roepie ophaalt en weergeeft vanuit een openbare API. Laten we dit op GitHub pagina ‘ s zetten.

laten we eerst een nieuwe GitHub repository maken.

GitHub-pagina ‘ s worden geserveerd vanuit een branch genaamd gh-pages dus laten we er een maken voor mijn project.

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

en laten we de site omhoog duwen:

en we zijn klaar!, Op dit punt de website beschikbaar zal zijn gratis SSL:

Belangrijke dingen op te merken:

• GitHub pagina ‘ s serveert de index.html bestand in uw project gh-pages branch
• De website wordt geserveerd in USERNAME.github.io/REPOSITORY-NAME

het Aanpassen van de domeinnaam.

de site van GitHub bedienen is prima, maar elke fatsoenlijke website heeft een aangepaste domeinnaam nodig. Gelukkig laat GitHub je je eigen domein meenemen naar het feest!,

laten we eerst een speciaal CNAME bestand aanmaken en onze domeinnaam daar plaatsen. Dit zal GitHub laten weten welke domeinnaam naar de repository moet worden gerouteerd.

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

ten tweede wijzen we een CNAME voor ons subdomein naar GitHub ‘ s DNS op USERNAME.github.io:

voorzichtig: gebruik dit niet voor een Apex domein! Het toevoegen van eenCNAME record aan de root van uw domein zal uwMX enTXT records uitschakelen., Gebruik dit alleen voor uw subdomein. Apex domeinen worden later besproken.

Op dit moment moet onze website draaien op ons eigen domein op HTTP:

belangrijke dingen om op te merken:

• De standaard *.github.io domein wordt geserveerd via HTTPS.
• onze aangepaste domeinnaam wordt bediend via onveilige HTTP.
• gebruik geen CNAME record op uw Apex domein tenzij u uw e-mails wilt beëindigen.

Beperkingen van GitHub-pagina ‘s:

• repo’ s moeten kleiner zijn dan 1 GB in Bestandsgrootte.,
• Websites moeten kleiner zijn dan 1 GB in Bestandsgrootte.
• maandelijkse bandbreedte limiet is 100 GB. We omzeilen dit later wel.

een apex-domein gebruiken als uw aangepaste domein

De makkelijkste manier om deze beperking te omzeilen is door www als uw subdomein te gebruiken, en al het HTTP-verkeer van de apex om te leiden naar www. In mijn voorbeeld zou ik gilani.me omleiden naar , wat verwijst naar mijn statische site, maar ik hou er niet van om dingen op de gemakkelijke manier te doen.,

Als u echt een apex-domein wilt gebruiken, controleer dan of uw DNS-provider u ANAME records laat instellen. Deze zijn (vereenvoudigd) halverwege tussen van CNAME records omdat ze je naar domeinen laten wijzen en A records omdat ze andere records in dezelfde zone niet vernietigen.

No ANAME? De laatste optie is om over te schakelen naar een DNS-provider die dit ondersteunt: voer Cloudflare in., Cloudflare biedt CNAME afvlakking op apex-domeinen, wat het equivalent is van een ANAME record. Het is het beste om nu over te schakelen omdat we Cloudflare in de volgende sectie zullen behandelen.

TLDR: schakel over naar Cloudflare ‘ s vrije DNS en stel een CNAME in op uw apex domein. Ze doen iets speciaals met hun CNAME waardoor het werkt.

SSL en Cloudflare

welkom in het post-Snowden-Tijdperk., Al onze ergste angsten van door de overheid gesanctioneerde snooping en hacking zijn bevestigd, en de wereld is aan het klauteren om gegevens te beveiligen tijdens het transport en in rust.

als moderne webbeheerder wordt er van u verwacht dat u op zijn minst SSL op uw website levert, zonder gemengde inhoud.

Het is gekomen tot het punt waar Google Chrome markeert gewone HTTPS-websites als onveilig en Google Search begint te begunstigen HTTPS-websites gunstiger in hun rankings. We zullen later nog meer strategieën bespreken om je front-end veilig te maken, maar voor nu, behandelen we alleen SSL.

gelukkig hebben we nu Let ‘ s Encrypt.,

het is een non-profit en volledig geautomatiseerde Certificate Authority (CA) waarmee u programmatisch korte termijn 90-dagen SSL certificaten kunt uitgeven voor alle domeinen die u beheert. Het is een eitje om te gebruiken; het is open source; en het project wordt ondersteund door een overvloed aan bedrijven, waaronder Mozilla en de Electronic Frontier Foundation.

Cloudflare goed gebruiken

Cloudflare is een DNS -, CDN-en DDoS-beschermingsdienst.

Het slaat uw website in de cache op en serveert deze aan gebruikers van servers in de buurt, waardoor uw website sneller wordt., Het heeft het extra voordeel dat u onder GitHub ‘ s 100GB bandbreedte limiet blijft, want zelfs als uw website waanzinnig populair wordt, zullen de meeste verzoeken de cache raken en nooit de server bereiken.

Bovendien biedt Cloudflare een service genaamd Universal SSL, waar ze u een gratis SSL certificaat van hun CA-partners geven, zodat u HTTPS gratis krijgt… voor altijd.

waarom Cloudflare?

Ik weet wat je denkt: Gilani, je vertelde me net hoe geweldig Let ‘ s Encrypt is. Waarom heb je het over Cloudflare? Nou, het komt allemaal neer op eenvoud.,

stel je voor dat je als mentale oefening meerdere Nginx cache en reverse proxies over de hele wereld opzet, waarbij je ze allemaal geldige SSL certificaten geeft en gebruikers webpagina ‘ s van hun dichtstbijzijnde locatie bedient.

Dit zorgt ervoor dat uw website via SSL wordt bediend, zelfs als de origin-server geen SSL-certificaat heeft, hoewel Cloudflare u speciale zelfondertekende certificaten geeft die u op uw origin-server kunt zetten om de verbinding met de servers van Cloudflare te beveiligen. Dit is wat Cloudflare geeft u met een gratis plan, en je hoeft niet eens om uw certificaat te vernieuwen om de 90 dagen.,

als freelancer, krijg ik klanten die willen dat een site up and running voor hun bedrijf zo snel mogelijk. Ze begrijpen niet of de zorg over de veiligheid zorgen, teistert het moderne web, of encryptie tijdens de doorvoer. Sommige klanten worstelen om het idee van domeinnamen te begrijpen, en vinden het vervelend als ze een $ 15 jaarlijkse vergoeding moeten betalen “gewoon om mijn website draaiende te houden”. Dus probeer uit te leggen aan hen waarom ze moeten betalen voor een cluster van reverse proxies beschermen van hun website die draait op Gratis hosting zelf.

Cloudflare instellen SSL

laten we onze handen weer vuil maken., Het eerste wat je moet doen, is overschakelen naar het routeren van al je verkeer via Cloudflare:

stel vervolgens onder Crypto het SSL-niveau in op “Full.”

Forceer” Automatic HTTPS Rewrite ” om waarschuwingen voor gemengde inhoud te stoppen.

Op dit moment zal onze website werken via zowel HTTP als HTTPS. Laten we https forceren voor alles op ons domein.

alles gereed., Onze website moet altijd laden via HTTPS met een groene “Secure” rating in Chrome.

laatste woorden en veiligheidsoverwegingen

Er zijn een paar dingen die ik hierboven niet heb besproken, en ik zou graag een moment nemen om een paar punten te verduidelijken.

de scherpte onder u zal erop wijzen dat er een paar opvallende beveiligingsproblemen zijn met deze setup, namelijk dat er geen beveiligde HTTP headers zijn zoals:

• Content-Security-Policy: laadt scripts en assets van een witte lijst van hosts, en kan inline js niet toestaan.,
• X-Frame-Options: hiermee wordt het laden van uw website in een iframe uitgeschakeld.

en je hebt gelijk. GitHub pagina ‘ s en zelfs Cloudflare staan je niet toe om je HTTP headers aan te passen. U kunt echter een CSP instellen met de html meta tag.

plaats dit gewoon in uw webpagina:

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

Op dit moment is er echter geen praktische manier om de X-Frame-Options header op GitHub-pagina ‘ s in te stellen, wat betekent dat een aanvaller uw webpagina kan laden in een speciaal vervaardigde iframe en een XSS-aanval kan uitvoeren., Als u echter toegewijd bent, kunt u dit probleem oplossen door gebruikers te vragen hun wachtwoord of 2FA-token te bevestigen bij elke gevoelige actie, of door een CSRF-token over te geven bij elke geverifieerde aanvraag.

een belangrijke zorg voor sommigen is dat door het gebruik van de gratis publieke repositories op GitHub, je website en broncode beschikbaar is voor iedereen die het wil forken of downloaden. Dus ik denk dat de bezorgdheid hier misplaatst is.

statische inhoud is geen broncode in die zin dat het niet gecompileerd of verwerkt wordt als een script voordat het aan de gebruiker wordt aangeboden., Uw gebruiker krijgt exact dezelfde statische kopie van de website als ze een webcrawler gericht op uw website draaien. Hoewel het hosten van de code in een GitHub repository het zeker makkelijker maakt om een kopie van je website te downloaden, maakt het niets bloot dat nog niet openbaar was.

schaling, onbeperkte schaling

de ideeën die in dit artikel worden gepresenteerd, zijn niet beperkt tot gratis webhosting van kleine applicaties.,

u kunt een front-end laag bouwen op basis van een modern JavaScript framework, deze aansluiten op een grootschalige cloud-based Backend-as-a-Service (BaaS), zoals Firebase, en complexe toepassingen maken zonder u zorgen te maken over servers, uptime of andere infrastructuurgerelateerde problemen.

een nieuw spannend webgebaseerd spel maken?! Check out GameSparks, en je bent klaar om te gaan.

samenvatting, bekentenis en Links

in dit artikel liet ik het lijken alsof ik mijn React-app handmatig publiceerde op gh-pages. Dat heb ik niet gedaan., Ik werkte aan master en toen het tijd was om te implementeren, liep ik npm run deploy die een build script aftrapte en de build naar gh-pagespushte. Zie demaster branch van mijn repository om te zien hoe het werkt.,

afhaalmaaltijden

Pros:

• Instant deployment
• gemakkelijke samenwerking
• veilige hostingomgeving

Caveats:

• geen toegang tot HTTP-headers
• gemakkelijk om een kopie van de website te downloaden
• GitHub kennis vereist
• hangt af van technologieleveranciers
• /LI>

links: