Bereitstellen von Websites auf benutzerdefinierten Domänen mithilfe von Cloudflare und Github Pages

Haben Sie eine schöne Website erstellt? Möchten Sie es kostenlos mit einer benutzerdefinierten Domain hosten? Suchen Sie nicht weiter.

In diesem Artikel wird erläutert, wie Sie Ihre Website mit zwei großartigen kostenlosen Tools einrichten können: Github Pages und Cloudflare. Bevor wir beginnen, gehen wir einige der Grundlagen durch:

Wolkenfackel

Cloudflare ist ein CDN - ein Netzwerk zur Verbreitung von Inhalten. Es spiegelt Ihre Website auf seinen Servern auf der ganzen Welt. Das heißt, es ist schneller für alle, die darauf zugreifen möchten, unabhängig davon, wo sie sich befinden. Als Bonus schützt es Sie auch vor Leuten, die Ihre Site mit automatisierten Bots überlasten möchten, die versuchen, sie zu besuchen und Ihre Bandbreite zu verringern (DDOS-Angriffe).

Lesen Sie hier mehr darüber, wie sie sich selbst beschreiben.

Warum Cloudflare?

Es gibt mehrere Gründe, Cloudflare zu verwenden. Es ist kostenlos. Es verfügt über einen einfachen DNS-Manager, mit dem Sie E-Mails und Unterdomänen einrichten können. Es verfügt über eine integrierte HTTPS-Domänenverwaltung. Es minimiert automatisch statische Elemente Ihrer Website, beschleunigt den weltweiten Zugriff auf Ihre Website und schützt vor Ausfallzeiten. Hier sehen Sie die Optionen, die Sie einstellen können:

Über GitHub-Seiten:

GitHub ist am besten als Code-Repository bekannt, und GitHub Pages wurde ursprünglich als Möglichkeit für Open-Source-Projekte entwickelt, Seiten über sich selbst zu hosten. Seit seiner Veröffentlichung hat es sich zu einer äußerst vielseitigen Plattform für das Hosten von Inhalten in einer Produktionsumgebung entwickelt. Es ist zuverlässig, robust, schnell und eignet sich hervorragend für die Bereitstellung der meisten statischen Websites für Unternehmen und Privatpersonen. Ihre eigene Beschreibung bringt es am besten auf den Punkt: „GitHub Pages ist ein statischer Site-Hosting-Service. Es wurde entwickelt, um Ihre persönlichen, Organisations- oder Projektseiten direkt aus einem GitHub-Repository zu hosten. “

Sehen Sie hier mehr.

Was ist eine statische Site?

Statische Websites bestehen aus einfachem alten HTML, CSS und Javascript und verwenden keine Datenbanken. Im Gegensatz zu datenbankgestützten Websites mit sich ständig änderndem Inhalt, der vom Benutzer abhängt (wie Facebook oder Twitter), zeigen statische Websites jedem Besucher die gleichen Informationen.

Was müssen wir anfangen?

Bevor Sie beginnen, stellen Sie sicher, dass Sie:

  • Verwenden Sie ein Github-Repository und eine Bereitstellungsumgebung mit Github-Seiten. Sie generieren eine URL mit der folgenden Struktur: "https://username.github.io/nameoftherepository"
  • Cloudflare-Konto. Registrieren Sie sich unter https://www.cloudflare.com/a/sign-up
  • Benutzerdefinierte Domain, die Sie in einer Registrierung wie NameCheap gekauft haben

Schritt 1: Stellen Sie Ihre statische Website mit Github Pages bereit.

Wir sollten ein Github-Repository und eine Bereitstellungsumgebung mit Github Pages haben. Wir stellen mithilfe von Github Pages bereit, wenn wir einen Push-Vorgang zum Zweig "gh-pages" ausführen.

Schritt 2: Fügen Sie Ihre benutzerdefinierte Domain in die Github-Repository-Einstellungen ein

Wählen Sie in der Navigationsleiste des Repository die Option "Einstellungen". Dies ist die letzte Option. Wenn Sie sich in den "Einstellungen" befinden, navigieren Sie zum Bereich "Github Pages", fügen Sie Ihre benutzerdefinierte Domain ein und klicken Sie auf die Schaltfläche "Speichern".

Schritt 3: Richten Sie Ihre benutzerdefinierte Domain in Cloudflare ein

Melden Sie sich bei Ihrem Cloudflare-Konto an und fügen Sie Ihre benutzerdefinierte Domain ein, um DNS-Einträge zu scannen.

Nachdem Sie auf die Schaltfläche "DNS-Einträge scannen" geklickt haben, wird ein Fortschrittsbalken angezeigt. Sie sollten auf "Weiter" klicken, wenn der Fortschrittsbalken zu Ende ist. Fügen Sie dann den erforderlichen DNS und CNAME ein. Wir werden diese Struktur bekommen:

Hinweis:

Die A- und CNAME-Einträge sind die beiden gebräuchlichen Methoden, um einen Hostnamen einer oder mehreren IP-Adressen zuzuordnen.

Der A-Datensatz verweist einen Namen auf eine bestimmte IP, wenn die IP bekannt und stabil ist. In unserem Fall verweist der Name yourdomain.com auf den Server 192.30.252.153

Der CNAME-Eintrag verweist einen Namen auf einen anderen Namen anstelle einer IP. Die CNAME-Quelle stellt einen Alias ​​für den Zielnamen dar und erbt die gesamte Auflösungskette. In unserem Fall verwenden wir Github Pages und setzen www als CNAME von astephannie.github.io

In diesem Schritt stellen wir zwei "A Record DNS" ein. Dies ist erforderlich, da wir die Kommunikation zwischen Cloudflare und Github Pages herstellen. Ab sofort werden alle Anfragen an yourdomain.com an die statische Website von Github weitergeleitet. Klicken Sie auf "Weiter", um zum nächsten Schritt zu gelangen.

Schritt 4: Wählen Sie den Cloudflare-Plan aus

Wählen Sie den gewünschten Cloudflare-Plan aus. In unserem Fall wählen wir "Free Website" und klicken auf die Schaltfläche "Weiter".

Schritt 5: Aktualisieren Sie die Nameserver in Ihrem Domain-Dashboard

Kopieren Sie die Nameserver aus Cloudflare und fügen Sie sie in Ihr Domain-Dashboard ein.

In diesem Beispiel haben wir eine Domain von godaddy.com. Wir müssen auf unsere Domain zugreifen und die Nameserver ändern.

Sie haben dieses Ergebnis zu Beginn als ausstehend eingestuft:

Am Ende ändert sich der Status:

Schritt 6: Einrichten der Minimierung der Website-Assets

Wählen Sie die Option "Geschwindigkeit", die sich in der Cloudflare-Navigationsleiste befindet, und wählen Sie "Javascript - CSS - HTML", Dateien, die minimiert werden sollen.

Bei der Einrichtung von Cloudflare sind noch einige andere Optionen zu berücksichtigen. Wir haben die notwendigen Schritte unternommen, um unsere Website in der von uns eingerichteten Domain verfügbar zu machen. Sie können die Caching- und Seitenregeln überprüfen, um die Optionen von Cloudflare weiter zu erkunden und zu überprüfen, wie leistungsfähig Cloudflare sein kann.

Schritt 7: Fertig!

Ihre Website ist live. Sie können Änderungen direkt in Github in der gh-pages-Verzweigung vornehmen und sie werden direkt auf Ihrer Website angezeigt.

Das ist es!

Annie ist Frontend-Softwareentwicklerin bei Crowdbotics.

Erstellen eines Webs oder einer mobilen App?

Crowdbotics ist der schnellste Weg, um eine Anwendung zu erstellen, zu starten und zu skalieren.

Entwickler? Probieren Sie den Crowdbotics App Builder aus, um Apps mit einer Vielzahl von gängigen Frameworks schnell einzurichten und bereitzustellen.

Beschäftigt oder nicht technisch? Schließen Sie sich Hunderten glücklicher Teams an, die mit Crowdbotics-PMs und erfahrenen Entwicklern Software entwickeln. Mit Crowdbotics Managed App Development kostenlos Zeitplan und Kosten einhalten.