Unbegrenztes 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 schnell zu machen. Meine Kunden zahlen immer nur für ihren Domain-Namen, aber sie bekommen viel mehr, als sie jemals erwartet haben.

Warum Statische Inhalte?

Statische Sites 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 einem vorherigen Commit. Backups sind ein git push entfernt, und Sie bedienen im Wesentlichen Ihre gesamte Website aus dem Cache, was bedeutet, dass Ihr Server fast nie eine Anfrage erneut verarbeiten muss.

Erstellen einer komplexen Benutzeroberfläche?

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

Wenn ich einen Vertrag zum Erstellen einer Website erhalte, überlege ich, ob eine statische Site ausreicht, um die Anforderungen meines Kunden zu erfüllen, und in vielen Fällen auch.

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

Brochureware-Websites

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

Statische HTML-Vorlagen sind deutlich billiger als ihre CMS-Pendants und in Zukunft einfacher zu optimieren. 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 Brochureware-Sites.

Bonus: Kleine Unternehmen zahlen keine wiederkehrenden monatlichen Hosting-Gebühren. Zugegeben, Hosting ist keine großen Kosten, aber Kunden müssen sich einfach nicht darum kümmern, etwas anderes als die Domain zu bezahlen, was großartig ist.

Einseitige Anwendungen

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

Ihre Anwendung ist bereits größtenteils statisch., Führen Sie einige zusätzliche Schritte aus, um serverseitige Logik in einer separaten Anwendung zu isolieren, und profitieren Sie davon, dass Ihre App vollständig aus dem Cloudflare-Cache bereitgestellt wird.

Ihre Anwendung wird jederzeit verfügbar sein.

Dies ist ein harter Verkauf. Es ist schwer, Leute davon zu überzeugen, dass statische Websites für Blogs verwendet werden können, aber lesen Sie mich vor – ich bin nicht aus dem tiefen Ende gegangen.

Blogs sind nichts anderes als Inhalte, die mit Vorlagen gerendert werden. Sie benötigen einfach keine vollständige Anwendung, die jede Anforderung analysiert und eine neue Seite rendert. Eine statische Site ist perfekt für diesen Anwendungsfall.,

Betrachte Jekyll. Sie geben ihm flüssige Vorlagen und Markdown-Inhalte und kombinieren sie zu einer statischen Website. Keine On-the-fly-Verarbeitung erforderlich, und Ihr Blog fühlt sich plötzlich deutlich schneller.

Dieser Workflow ist besonders hilfreich, da GitHub-Seiten Jekyll-Builds unterstützen. Plötzlich können Blog-Posts mit Pull-Anfragen beigetragen 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 Stackedit, um diesen Beitrag gerade zu verfassen!,

Wenn Sie Kommentare zu Ihren Blog-Posts wünschen, erhalten Sie außerdem ein leistungsstarkes Kommentarsystem, indem Sie ein JavaScript-Snippet einfügen.

Diese Seite, die Sie gerade lesen, verwendet auch Foursquare.

GitHub Pages

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 eine statische Website auf GitHub-Seiten kostenlos hosten, wobei Sie direkt von Git bereitgestellt werden.

Bereitstellung auf GitHub-Seiten.

Genug geredet, lassen Sie uns sehen Sie es in Aktion!,

Ich habe eine Single Page React-App erstellt, die den aktuellen Wechselkurs für die pakistanische Rupie von einer öffentlichen API abruft und anzeigt. Stellen wir dies auf GitHub-Seiten bereit.

Erstellen wir zunächst ein neues GitHub-Repository.

GitHub-Seiten werden von einem Zweig namens gh-pages erstellt.

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

Und drücken wir die Seite hoch:

Und wir sind fertig!, Zu diesem Zeitpunkt ist die Website unter mit kostenlosem SSL verfügbar:

Wichtige Dinge zu beachten:

• GitHub pages dient der index.html – Datei in der gh-pages Zweig
• Die Website wird unter

Anpassen des Domainnamens bereitgestellt.

Das Bereitstellen der Site außerhalb von GitHub ist in Ordnung, aber jede anständige Website benötigt einen benutzerdefinierten Domainnamen. Glücklicherweise können Sie mit GitHub Ihre eigene Domain zur Party bringen!,

Erstellen wir zunächst eine spezielle CNAME – Datei und platzieren dort unseren Domainnamen. Dadurch weiß GitHub, welcher Domänenname an das Repository weitergeleitet werden soll.

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

Achtung: Verwenden Sie dies NICHT für eine Apex-Domain! Durch Hinzufügen einesCNAME – Datensatzes zum Stamm Ihrer Domäne werden IhreMX – undTXT – Datensätze deaktiviert., Verwenden Sie dies nur für Ihre Subdomain. Apex-Domänen werden später besprochen.

Zu diesem Zeitpunkt sollte unsere Website auf unserer benutzerdefinierten Domain unter HTTP:

Wichtige Dinge zu beachten:

• Die standardmäßige *.github.io – Domain wird über HTTPS bereitgestellt.
• Unser benutzerdefinierter Domainname wird über unsicheres HTTP bereitgestellt.
• Verwenden Sie KEINENCNAME – Datensatz in Ihrer Apex-Domain, es sei denn, Sie möchten Ihre E-Mails beenden.

Einschränkungen von GitHub-Seiten:

• Repos müssen weniger als 1 GB Dateigröße haben.,
• Webseiten müssen weniger als 1 GB groß sein.
• Monatliches Bandbreitenlimit beträgt 100 GB. Wir umgehen das 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-Datenverkehr vom Apex zu wwwumzuleiten. In meinem Beispiel würde ich gilani.me zu umleiten, was auf meine statische Site verweist, aber ich mag es nicht, Dinge auf einfache Weise zu tun.,

Wenn Sie wirklich eine Apex-Domäne verwenden möchten, überprüfen Sie, ob Sie mit Ihrem DNS-Anbieter ANAME – Datensätze festlegen können. Dies sind (vereinfacht) auf halbem Weg zwischen CNAME – Datensätzen, da Sie auf Domänen verweisen können, und A – Datensätzen, da sie andere Datensätze in derselben Zone nicht zunichte machen.

Nein ANAME? Die letzte Option besteht darin, zu einem DNS-Anbieter zu wechseln, der dies unterstützt: Geben Sie Cloudflare ein., Cloudflare bietet CNAME Abflachung in Apex-Domänen, was einem ANAME – Datensatz entspricht. Am besten wechseln Sie jetzt, da wir Cloudflare im nächsten Abschnitt behandeln werden.

TLDR: Wechseln Sie zum kostenlosen DNS von Cloudflare und legen Sie eine CNAME in Ihrer Apex-Domain fest. Sie machen etwas Besonderes mit ihrer CNAME, die es funktioniert.

SSL-und Cloudflare

Willkommen in der post-Snowden-ära., Alle unsere schlimmsten Befürchtungen vor staatlich sanktioniertem Schnüffeln und Hacken wurden bestätigt, und die Welt kämpft darum, Daten während des Transports und in Ruhe zu sichern.

Als moderner Webadministrator sollten Sie mindestens SSL auf Ihrer Website bereitstellen, ohne gemischten Inhalt.

Es ist zu dem Punkt gekommen, an dem Google Chrome einfache HTTPS-Websites als unsicher markiert und die Google-Suche beginnt, HTTPS-Websites in ihren Rankings günstiger zu bevorzugen. Wir werden später noch mehr Strategien besprechen, um Ihr Frontend sicher zu machen, aber im Moment decken wir nur SSL ab.

Zum Glück haben wir jetzt Let ‚ s Encrypt.,

Es handelt sich um eine gemeinnützige und vollständig automatisierte Zertifizierungsstelle, 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 gut nutzen

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

Es speichert Ihre Website zwischen 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 100-GB-Bandbreitenlimit von GitHub bleiben, denn selbst wenn Ihre Website wahnsinnig beliebt wird, werden die meisten Anfragen den Cache erreichen und niemals den Server erreichen.

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

Warum ist Cloudflare?

ich weiß, was Sie denken: Gilani, Sie hat mir nur gesagt, wie toll Let ‚ s Encrypt ist. Warum sprechen Sie über Cloudflare? Nun, es kommt alles auf Einfachheit an.,

Stellen Sie sich als mentale Übung das Einrichten mehrerer Nginx-Cache-und Reverse-Proxies auf der ganzen Welt vor, indem Sie ihnen alle gültigen SSL-Zertifikate geben und Benutzern Webseiten von ihren nächsten Standorten aus bereitstellen.

Dies führt dazu, dass Ihre Website über SSL bereitgestellt wird, auch 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 Cloudflares Servern zu sichern. Dies ist, was Cloudflare gibt Ihnen einen kostenlosen Plan, und Sie müssen nicht einmal Ihr Zertifikat alle 90 Tage erneuern.,

Als Freiberufler bekomme ich Kunden, die eine Website so schnell wie möglich für ihr Geschäft betreiben möchten. Sie verstehen oder kümmern sich nicht um Sicherheitsbedenken, plagen das moderne Web oder Verschlüsselung während des Transports. 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 einen Cluster von Reverse-Proxies bezahlen müssen, die ihre Website schützen, die auf kostenlosem Hosting selbst ausgeführt wird.

Cloudflare SSL einrichten

Machen wir uns wieder die Hände schmutzig., Wechseln Sie zunächst zum Routing Ihres gesamten Datenverkehrs über Cloudflare:

Stellen Sie als nächstes unter Crypto die SSL-Stufe auf „Voll“ ein.“

Erzwingen Sie“ Automatisches HTTPS-Umschreiben“, um Warnungen zu gemischten Inhalten abzubrechen.

An dieser Stelle funktioniert unsere Website sowohl über HTTP als auch über HTTPS. Lassen Sie uns HTTPS für alles auf unserer Domain erzwingen.

Alles fertig., Unsere Website sollte immer über HTTPS mit einer grünen „sicheren“ Bewertung in Chrome geladen werden.

Letzte 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 zu klären.

Der Kluge unter Ihnen wird 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 nicht zulassen.,
• X-Frame-Options: Deaktiviert das Laden Ihrer Website in einen iframe.

Und du hast Recht. GitHub Pages und sogar Cloudflare ermöglichen es Ihnen nicht, Ihre HTTP-Header anzupassen. Sie können jedoch ein CSP mit dem HTML – meta – tag.

Fügen Sie dies einfach in Ihre Webseite ein:

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

Derzeit gibt es jedoch keine praktische Möglichkeit, den X-Frame-Options – Header auf GitHub-Seiten festzulegen, was bedeutet, dass ein Angreifer Ihre Webseite in eine speziell erstellte iframe laden und einen XSS-Angriff ausführen kann., Wenn Sie jedoch dediziert sind, können Sie dieses Problem umgehen, indem Sie Benutzer auffordern, ihr Kennwort oder ihr 2FA-Token bei jeder sensiblen Aktion zu bestätigen, oder indem Sie bei jeder authentifizierten Anforderung ein CSRF-Token übergeben.

Ein Hauptanliegen einiger ist, dass Ihre Website und Ihr Quellcode durch die Verwendung der kostenlosen öffentlichen Repositorys auf GitHub für alle verfügbar sind, die sie verzweigen oder herunterladen möchten. Ich denke also, dass die Sorge hier fehl am Platz ist.

Statischer Inhalt ist nicht Quell-code in dem Sinne, dass es nicht kompiliert oder verarbeitet, als ein Skript vor dem servieren an den Benutzer., Ihr Benutzer erhält genau dieselbe statische Kopie der Website, wenn er einen Webcrawler ausführen würde, der auf Ihre Website verweist. Während das Hosten des Codes in einem GitHub-Repository das Herunterladen einer Kopie Ihrer Website sicherlich erleichtert, wird nichts veröffentlicht, was noch nicht öffentlich war.

Skalierung, unbegrenzte Skalierung

Die in diesem Artikel vorgestellten Ideen sind nicht auf das kostenlose Webhosting kleiner Anwendungen beschränkt.,

Sie können eine Front-End-Schicht basierend auf einem modernen JavaScript-Framework erstellen, sie an ein Cloud-basiertes Backend-as-a-Service (BaaS) wie Firebase in großem Maßstab anschließen und komplexe Anwendungen erstellen, ohne sich Gedanken über Server, Betriebszeiten oder andere Infrastrukturprobleme machen zu müssen.

Machen Sie ein neues aufregendes webbasiertes Spiel?! Schauen Sie sich GameSparks, und Sie sind gut zu gehen.

Zusammenfassung, Geständnis und Links

In diesem Artikel habe ich den Anschein erweckt, als hätte ich meine React-App manuell in gh-pages. Ich habe so etwas nicht getan., Ich habe an master gearbeitet und als es Zeit für die Bereitstellung war, habe ich npm run deploy was ein Build-Skript ausgelöst und den Build auf gh-pages. Bitte beachten Sie denmaster Zweig meines Repositorys, um zu sehen, wie es funktioniert.,

Takeaways

Pros:

• Sofortige Bereitstellung
• Einfache Zusammenarbeit
• Sichere Hosting-Umgebung

Vorbehalte:

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

Links: