Unbegrenzte Skalierung und kostenloses Webhosting mit GitHub Pages und Cloudflare

Ich habe ein Geheimnis, das meinen Kunden eine Menge Geld spart, ihre Website sicher hält und über integrierte Backups verfügt.

Das Geheimnis: Ich mache ihre Website statisch. Dann speichere und hoste ich es mit GitHub und verwende Cloudflare, um es über HTTPS bereitzustellen und es schnell zu machen. Meine Kunden zahlen immer nur für ihren Domainnamen, aber sie bekommen viel mehr, als sie je erwartet hätten.

Warum statische Inhalte?

Statische Websites sind wunderbar schnell, da keine Serververarbeitungszeit erforderlich ist. Durch das Festschreiben einer Codebasis statischer Assets in einem Git-Repository wird das Zurücksetzen von Änderungen einfach zu einer Frage der Rückkehr zu einem früheren Commit. Backups sind ein git push und Sie bedienen im Wesentlichen Ihre gesamte Website aus dem Cache, was bedeutet, dass Ihr Server fast nie wieder eine Anfrage verarbeiten muss.

Erstellen einer komplexen Benutzeroberfläche?

Mit dem Aufkommen von Front-End-Frameworks wie React und seinen Verwandten können Sie magische Erlebnisse mit nichts anderem als HTML/CSS und JavaScript erstellen. Sie müssen zwar Ihre Back-End-Logik von Ihrem Front-End trennen, aber sogar Ruby on Rails wird jetzt mit einem API-Modus ausgeliefert.

Wann immer ich beauftragt werde, eine Website zu erstellen, überlege ich, ob eine statische Website ausreicht, um die Bedürfnisse meiner Kunden zu erfüllen, und in vielen Fällen ist dies der Fall.

Fragen Sie sich, welche Art von Anwendungsfällen ich im Sinn habe? Toll! Lassen Sie uns einige Situationen besprechen, in denen Sie möglicherweise statische Inhalte in Betracht ziehen möchten, und erklären, wie dieser Ansatz sowohl Ihnen als auch Ihrem Kunden Zeit sparen kann.

Broschüren-Websites

Brochureware-Websites sollen Informationen über ein Unternehmen bereitstellen und sich während ihrer Lebensdauer nicht wesentlich ändern. Eine dynamische Anwendung ist für solche Sites eindeutig übertrieben, und da diese Sites jahrelang nicht gepflegt werden und nur wenige, wenn überhaupt, Updates erhalten, sind sie normalerweise leichte Ziele für Hacker, nun ja, zu hacken.

Statische HTML-Vorlagen sind deutlich billiger als ihre CMS-Gegenstücke und lassen sich in Zukunft leichter anpassen. Entwickler, die gebeten werden, solche Websites zu aktualisieren, benötigen keine speziellen Kenntnisse über ein bestimmtes CMS. In der Regel erstelle ich immer statische Websites für Broschüren-Websites.

Bonus: Kleine Unternehmen lieben es, keine wiederkehrenden monatlichen Hosting-Gebühren zu zahlen. Zugegeben, das Hosting ist nicht mit enormen Kosten verbunden, aber die Kunden müssen sich einfach nicht die Mühe machen, etwas anderes als die Domain zu bezahlen, was großartig ist.

Single-Page-Anwendungen

Präsentieren Sie eine wunderbare, coole neue App, die auf modernen Front-End-Frameworks basiert?

Ihre Anwendung ist bereits größtenteils statisch. Führen Sie ein paar zusätzliche Schritte aus, um jede serverseitige Logik in einer separaten Anwendung zu isolieren, und nutzen Sie den vollen Vorteil, dass Ihre Anwendung vollständig aus dem Cache von Cloudflare bereitgestellt wird.

Ihre Bewerbung ist jederzeit verfügbar.

Blogs

Das ist ein harter Verkauf. Es ist schwer, Leute davon zu überzeugen, dass statische Sites für Blogs verwendet werden können, aber lesen Sie mich vor – ich bin nicht übers Ohr gehauen.

Blogs sind nichts anderes als Inhalte, die mit Vorlagen gerendert werden. Sie brauchen einfach keine vollständige Anwendung, die jede Anfrage parst und eine neue Seite rendert. Eine statische Website ist perfekt für diesen Anwendungsfall.

Denken Sie an Jekyll. Sie geben ihm Liquid-Vorlagen und Markdown-Inhalte und es kombiniert sie zu einer statischen Website. Es ist keine spontane Verarbeitung erforderlich, und Ihr Blog fühlt sich plötzlich deutlich schneller an.

Dieser Workflow ist besonders hilfreich, da GitHub-Seiten Jekyll-Builds unterstützen. Plötzlich können Blog-Posts mit Pull-Requests beigesteuert werden, und alle Ihre Inhalte werden in der Versionskontrolle gespeichert. Nicht-Entwickler können weiterhin Beiträge in Markdown beitragen, indem sie ihre Beiträge über Stackedit veröffentlichen.

Tatsächlich verwende ich gerade Stackedit, um diesen Beitrag zu verfassen!

Wenn Sie Kommentare zu Ihren Blog-Beiträgen wünschen, bietet Ihnen Disqus ein leistungsstarkes Kommentarsystem, indem Sie ein JavaScript-Snippet einfügen.

Diese Seite, die Sie gerade lesen, verwendet ebenfalls Disqus.

GitHub-Seiten

GitHub Pages ist die Antwort von GitHub auf Projektseiten und ermöglicht es Ihnen, jede statische Website direkt aus Ihrem Repository bereitzustellen. Da GitHub-Seiten benutzerdefinierte Domänen unterstützen, können Sie kostenlos eine statische Website auf GitHub-Seiten hosten, mit Bereitstellungen direkt von Git.

Bereitstellen auf GitHub-Seiten.

Genug geredet, sehen wir es uns in Aktion an!

Ich habe weitergemacht und eine einseitige React-App erstellt, die den aktuellen Wechselkurs für die pakistanische Rupie von einer öffentlichen API abruft und anzeigt. Lassen Sie uns dies auf GitHub-Seiten bereitstellen.

Lassen Sie uns zunächst ein neues GitHub-Repository erstellen.

GitHub-Seiten werden von einem Zweig namens gh-pages bereitgestellt, also erstellen wir einen für mein Projekt.

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

Und lasst uns die Seite nach oben pushen:

 $ git remote add origin [email protected]:amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages

Und wir sind fertig! Ab diesem Zeitpunkt ist die Website unter https://amingilani.github.io/price-check mit kostenlosem SSL verfügbar:

Wichtige Dinge zu beachten:

• GitHub-Seiten stellt die index.html -Datei im gh-pages Zweig Ihres Projekts bereit
• Die Website wird unter USERNAME.github.io/REPOSITORY-NAME

Anpassen des Domänennamens.

Das Bereitstellen der Website von GitHub ist in Ordnung, aber jede anständige Website benötigt einen benutzerdefinierten Domänennamen. Glücklicherweise können Sie mit GitHub Ihre eigene Domain zur Party mitbringen!

Lassen Sie uns zunächst eine spezielle CNAME -Datei erstellen und dort unseren Domainnamen platzieren. Dadurch wird GitHub mitgeteilt, welcher Domänenname an das Repository weitergeleitet werden soll.

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

Zweitens richten wir einen CNAME für unsere Subdomain auf GitHubs DNS unter USERNAME.github.io :

Achtung: Verwenden Sie dies NICHT für eine Apex-Domain! Durch das Hinzufügen eines CNAME -Eintrags zum Stammverzeichnis Ihrer Domain werden Ihre MX und TXT -Einträge deaktiviert. Verwenden Sie dies nur für Ihre Subdomain. Apex-Domänen werden später besprochen.

An diesem Punkt sollte unsere Website auf unserer benutzerdefinierten Domain auf HTTP laufen:

Wichtige Dinge zu beachten:

• Die Standarddomäne *.github.io wird über HTTPS bereitgestellt.
• Unser benutzerdefinierter Domänenname wird über unsicheres HTTP bereitgestellt.
• Verwenden Sie KEINEN CNAME -Eintrag in Ihrer Apex-Domain, es sei denn, Sie möchten Ihre E-Mails löschen.

Einschränkungen von GitHub-Seiten:

• Repos müssen eine Dateigröße von weniger als 1 GB haben.
• Websites müssen eine Dateigröße von weniger als 1 GB haben.
• Das monatliche Bandbreitenlimit beträgt 100 GB. Das umgehen wir später.

Verwenden einer Apex-Domäne als benutzerdefinierte Domäne

Der einfachste Weg, diese Einschränkung zu umgehen, besteht darin, www als Subdomain zu verwenden und den gesamten HTTP-Verkehr vom Apex auf www umzuleiten. In meinem Beispiel würde ich gilani.me auf www.gilani.me , was auf meine statische Seite verweist, aber ich mag es nicht, Dinge auf die einfache Art und Weise zu machen.

Wenn Sie wirklich eine Apex-Domain verwenden möchten, prüfen Sie, ob Ihr DNS-Anbieter die Einrichtung ANAME Einträgen zulässt. Diese befinden sich (vereinfacht) auf halbem Weg zwischen CNAME -Einträgen, da sie Sie auf Domänen und A -Einträge verweisen lassen, da sie andere Einträge in derselben Zone nicht annullieren.

Kein ANAME ? Die letzte Möglichkeit besteht darin, zu einem DNS-Anbieter zu wechseln, der dies unterstützt: Geben Sie Cloudflare ein. Cloudflare bietet CNAME -Flattening auf Apex-Domains, was einem ANAME -Eintrag entspricht. Es ist am besten, den Wechsel jetzt vorzunehmen, da wir Cloudflare im nächsten Abschnitt behandeln werden.

TLDR : Wechseln Sie zum kostenlosen DNS von Cloudflare und legen Sie einen CNAME für Ihre Apex-Domain fest. Sie machen etwas Besonderes mit ihrem CNAME , damit es funktioniert.

SSL und Cloudflare

Willkommen in der Post-Snowden-Ära. Alle unsere schlimmsten Befürchtungen vor staatlich sanktioniertem Schnüffeln und Hacken haben sich bestätigt, und die Welt bemüht sich, Daten während der Übertragung und im Ruhezustand zu sichern.

Als moderner Webadministrator wird von Ihnen erwartet, dass Sie auf Ihrer Website mindestens SSL ohne gemischte Inhalte bereitstellen.

Es ist an dem Punkt angelangt, an dem Google Chrome einfache HTTPS-Websites als unsicher markiert und die Google-Suche damit beginnt, HTTPS-Websites in ihren Rankings stärker zu bevorzugen. Wir werden später noch mehr Strategien besprechen, um Ihr Front-End sicher zu machen, aber im Moment behandeln wir nur SSL.

Glücklicherweise haben wir jetzt Let's Encrypt.

Es handelt sich um eine gemeinnützige und vollständig automatisierte Zertifizierungsstelle (CA), mit der Sie programmgesteuert kurzfristige 90-Tage-SSL-Zertifikate für alle von Ihnen kontrollierten Domänen ausstellen können. Es ist ein Kinderspiel zu verwenden; es ist Open Source; und das Projekt wird von einer Vielzahl von Unternehmen unterstützt, darunter Mozilla und die Electronic Frontier Foundation.

Cloudflare sinnvoll einsetzen

Cloudflare ist ein DNS-, CDN- und DDoS-Schutzdienst.

Es speichert Ihre Website im Cache und stellt sie Benutzern von Servern in der Nähe zur Verfügung, wodurch Ihre Website schneller wird. Es hat den zusätzlichen Vorteil, dass Sie unter dem Bandbreitenlimit von 100 GB von GitHub bleiben, denn selbst wenn Ihre Website wahnsinnig beliebt wird, landen die meisten Anfragen im Cache und erreichen nie den Server.

Darüber hinaus bietet Cloudflare einen Dienst namens Universal SSL an, bei dem sie Ihnen ein kostenloses SSL-Zertifikat von ihren CA-Partnern ausstellen, sodass Sie HTTPS kostenlos erhalten … für immer.

Warum Cloudflare?

Ich weiß, was du denkst: Gilani, du hast mir gerade gesagt, wie großartig Let's Encrypt ist. Warum redest du von Cloudflare? Nun, es läuft alles auf Einfachheit hinaus.

Stellen Sie sich als mentale Übung vor, mehrere Nginx-Cache- und Reverse-Proxys auf der ganzen Welt einzurichten, ihnen alle gültigen SSL-Zertifikate zu geben und die Webseiten der Benutzer von ihren nächstgelegenen Standorten aus bereitzustellen.

Dies führt dazu, dass Ihre Website über SSL bereitgestellt wird, selbst wenn der Ursprungsserver kein SSL-Zertifikat hat, obwohl Cloudflare Ihnen spezielle selbstsignierte Zertifikate gibt, die Sie auf Ihrem Ursprungsserver ablegen können, um die Verbindung zu den Servern von Cloudflare zu sichern. Das bietet Ihnen Cloudflare mit einem kostenlosen Plan, und Sie müssen Ihr Zertifikat nicht einmal alle 90 Tage erneuern.

Als Freiberufler vermittle ich Kunden, die so schnell wie möglich eine Website für ihr Unternehmen zum Laufen bringen möchten. Sie verstehen oder kümmern sich nicht um Sicherheitsbedenken, die das moderne Internet plagen, oder die Verschlüsselung während der Übertragung. Einige Kunden haben Schwierigkeiten, die Idee von Domainnamen zu verstehen, und finden es ärgerlich, wenn sie eine jährliche Gebühr von 15 US-Dollar zahlen müssen, „nur um meine Website am Laufen zu halten“. Versuchen Sie also, ihnen zu erklären, warum sie für eine Gruppe von Reverse-Proxys bezahlen müssen, die ihre Website schützen, die selbst auf kostenlosem Hosting läuft.

Cloudflare-SSL einrichten

Machen wir uns wieder die Hände schmutzig. Wechseln Sie als Erstes dazu, Ihren gesamten Datenverkehr über Cloudflare zu leiten:

Stellen Sie als Nächstes unter Crypto das SSL-Level auf „Full“ ein.

Erzwingen Sie „Automatic HTTPS Rewrite“, um Warnungen zu gemischten Inhalten zu beenden.

Zu diesem Zeitpunkt funktioniert unsere Website sowohl über HTTP als auch über HTTPS. Lassen Sie uns HTTPS für alles in unserer Domain erzwingen.

Alles erledigt. Unsere Website sollte immer über HTTPS mit einer grünen „Sicher“-Bewertung in Chrome geladen werden.

Abschließende Worte und Sicherheitsüberlegungen

Es gibt ein paar Dinge, die ich oben nicht besprochen habe, und ich möchte mir einen Moment Zeit nehmen, um einige Punkte klarzustellen.

Die Schlauen unter Ihnen werden darauf hinweisen, dass es bei diesem Setup einige eklatante Sicherheitsprobleme gibt, nämlich, dass es keine sicheren HTTP-Header gibt wie:

• Content-Security-Policy : Lädt Skripte und Assets von einer Whitelist von Hosts und kann Inline-JS verbieten.
• X-Frame-Options : verhindert, dass Ihre Website in einem Iframe geladen wird.

Und du hast recht. Auf GitHub-Seiten und sogar Cloudflare können Sie Ihre HTTP-Header nicht anpassen . Sie können jedoch einen CSP mithilfe des HTML- meta -Tags festlegen.

Fügen Sie dies einfach in Ihre Webseite ein:

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

Im Moment gibt es jedoch keine praktische Möglichkeit, den X-Frame-Options Header auf GitHub-Seiten festzulegen, was bedeutet, dass ein Angreifer Ihre Webseite in einen speziell gestalteten iframe laden und einen XSS-Angriff durchführen kann. Wenn Sie jedoch engagiert sind, können Sie dieses Problem umgehen, indem Sie die Benutzer bitten, ihr Passwort oder 2FA-Token bei jeder sensiblen Aktion zu bestätigen, oder indem Sie bei jeder authentifizierten Anfrage ein CSRF-Token übergeben.

Eine große Sorge für einige ist, dass Ihre Website und Ihr Quellcode durch die Verwendung der kostenlosen öffentlichen Repositories auf GitHub für jeden verfügbar sind, der sie forken oder herunterladen möchte. Daher halte ich die Sorge hier für fehl am Platz.

Statischer Inhalt ist kein Quellcode in dem Sinne, dass er nicht als Skript kompiliert oder verarbeitet wird, bevor er dem Benutzer bereitgestellt wird. Ihr Benutzer erhält genau dieselbe statische Kopie der Website, wenn er einen Webcrawler ausführen würde, der auf Ihre Website zeigt. Während das Hosten des Codes in einem GitHub-Repository das Herunterladen einer Kopie Ihrer Website sicherlich erleichtert, wird nichts offengelegt, was nicht bereits öffentlich war.

Skalierung, unbegrenzte Skalierung

Die in diesem Artikel vorgestellten Ideen beschränken sich nicht auf das kostenlose Webhosting kleiner Anwendungen.

Sie können eine Front-End-Ebene basierend auf einem modernen JavaScript-Framework erstellen, sie mit einem groß angelegten Cloud-basierten Backend-as-a-Service (BaaS) wie Firebase verbinden und komplexe Anwendungen erstellen, ohne sich Gedanken über Server, Betriebszeit, oder andere infrastrukturbezogene Probleme.

Ein neues aufregendes webbasiertes Spiel erstellen?! Schauen Sie sich GameSparks an, und Sie können loslegen.

Zusammenfassung, Bekenntnis und Links

In diesem Artikel habe ich es so aussehen lassen, als hätte ich meine React-App manuell auf gh-pages . Ich habe nichts dergleichen getan. Ich habe an master gearbeitet und als es Zeit für die Bereitstellung war, habe ich npm run deploy , wodurch ein Build-Skript gestartet und der Build auf gh-pages wurde. Bitte sehen Sie sich den master Zweig meines Repositorys an, um zu sehen, wie es funktioniert.

Imbiss

Vorteile:

• Sofortige Bereitstellung
• Einfache Zusammenarbeit
• Sichere Hosting-Umgebung

Vorbehalte:

• Kein Zugriff auf HTTP-Header
• Einfaches Herunterladen einer Kopie der Website
• GitHub-Kenntnisse erforderlich
• Hängt von Technologieanbietern ab

Verbindungen:

• Den Quellcode meiner App finden Sie unter amingilani/price-check
• Diese App ist unter pricecheck.gilani.me live und sollte auf unbestimmte Zeit verfügbar sein.