Der kostenlose Leitfaden zur Erstellung einer Website: Automatisierte Bereitstellung mit GitHub und Cloudflare

In der heutigen Welt der Webentwicklung ist das schnelle und kostenlose Hosting von persönlichen oder geschäftlichen Websites auf leistungsstarken Cloud-Plattformen zu einer gängigen Wahl geworden.Cloudflare Das Unternehmen ist nicht nur für seine führenden CDN- und Sicherheitsdienste bekannt, sondern auch für seine Cloudflare Pages Der Dienst bietet Entwicklern auch eine Reihe von Diensten, die in Verbindung mit dem Git integrierte automatisierte Bereitstellungslösungen. In diesem Artikel zeigen wir anhand eines realen Beispiels, wie eine moderne Toolchain genutzt werden kann, um ein KI-gestütztes Website-Projekt nahtlos auf dem Cloudflare Pages und ermöglichen den globalen Zugriff.

Vorbereitung: KI-unterstützte Kodierung und Domänenkonfiguration

In der Startphase eines Projekts können Entwickler mit Hilfe von KI-Programmierassistenten die Effizienz erheblich steigern. Zum Beispiel, indem Cursor Dies ist die Art von Editor, der die KI-Funktionalität integriert und die Claude Fortgeschrittene Sprachmodelle, z. B. die Fähigkeit, das anfängliche Codegerüst einer Website auf der Grundlage von Anforderungen schnell zu erstellen.

Nach mehreren Iterationen der Kommunikation und Anpassungen mit der KI kann ein voll funktionsfähiger Website-Prototyp fertiggestellt werden. Zu diesem Zeitpunkt generiert das KI-Tool nicht nur den Front-End-Code, sondern liefert auch eine detaillierte Dokumentation der Implementierungsschritte und legt damit die Grundlage für die weitere Arbeit.

Vor der Bereitstellung müssen zwei grundlegende Vorbereitungen getroffen werden: Zum einen muss ein Domänenname vorbereitet werden, zum anderen muss ein Domänenname auf dem Cloudflare Die Plattform fügt den Domänennamen hinzu und konfiguriert DNS.

Erstens: Einloggen Cloudflare Wählen Sie in der Konsole "Site hinzufügen" und geben Sie den vorbereiteten Domainnamen ein.

Cloudflare Das kostenlose Paket bietet eine breite Palette von Paketen und enthält bereits ein leistungsstarkes CDN, SSL und DDoS-Schutz, der den Anforderungen der meisten persönlichen Projekte und kleinen bis mittelgroßen Websites gerecht wird. Wählen Sie einen kostenlosen Plan, um fortzufahren.

Nächste.Cloudflare Es werden zwei benutzerdefinierte Nameserver-Adressen bereitgestellt. Die Benutzer müssen sich an den Administrator ihrer Domänennamenregistrierungsstelle (z. B. GoDaddy, Namecheap usw.) wenden und die DNS-Serveradresse ihres Domänennamens ändern in Cloudflare Diese beiden Adressen werden zur Verfügung gestellt. Nachdem Sie die Änderungen vorgenommen haben, müssen Sie in der Regel einige Minuten bis einige Stunden warten, bis die DNS-Einstellungen wirksam werden.

Wichtigste Schritte: Automatisieren der Bereitstellung mit Git-Repositories

Website-Code braucht eine Plattform für Versionskontrolle und Speicherung.GitHub ist die gängigste Option. Laden Sie den Projektcode hoch auf GitHub Lagerhallen, nicht nur zur Vereinfachung der Verwaltung, sondern auch zur Verwirklichung von Cloudflare Pages Der Schlüssel zur automatisierten Bereitstellung.

Warum wir es empfehlen Git Repository zu verwenden, anstatt statische Dateien direkt hochzuladen? Weil die meisten modernen Webentwicklungen einen Build-Schritt beinhalten. Beispielsweise muss Code, der mit Frameworks wie React, Vue oder Svelte geschrieben wurde, kompiliert und verpackt werden, um statische HTML-, CSS- und JavaScript-Dateien zu erzeugen, die im Browser ausgeführt werden.Cloudflare Pages s Git-Integrationsmodell, das automatisch den neuesten Code abruft und Builds auf der Grundlage vorgegebener Anweisungen für kontinuierliche Integration und Bereitstellung (CI/CD) ausführt. Die Entwickler übermitteln den Code einfach an GitHub(math.) GattungCloudflare Es erledigt automatisch alle nachfolgenden Verteilungsarbeiten und vereinfacht so den Freigabeprozess erheblich.

existieren Cloudflare Navigieren Sie in der Systemsteuerung zur Option "Workers and Pages", wählen Sie "Create an application" und klicken Sie dann auf "Connect to Git" unter dem Reiter "Pages". Verbinden mit Git" unter der Registerkarte "Seiten".

Wählen Sie, um eine Verbindung mit dem GitHubund ermächtigen Cloudflare Besuchen Sie Ihr GitHub Konten.

Nach erfolgreicher Autorisierung wählen Sie die gewünschte Bereitstellung aus GitHub Lagerhaus.

Der nächste Schritt ist der kritische Schritt "Setup, Build und Bereitstellung".

• Name des Projektsfür Ihr Cloudflare Pages Projektbenennung.
• Branche ProduktionDer für den Einsatz als Produktionsumgebung ausgewählte Zweig ist in der Regel der main vielleicht master.
• Rahmenvorgaben::Cloudflare Erkennt automatisch gängige Frameworks (z. B. React, Vue, Hugo usw.) und füllt empfohlene Build-Einstellungen auf.
• Befehl "BuildWenn das Projekt kompiliert werden muss, geben Sie hier den Build-Befehl ein. Zum Beispiel, ein Projekt, das auf create-react-app Projekt, lautet der Befehl normalerweise npm run build.
• Erstellung des AusgabeverzeichnissesGeben Sie den Namen des Ordners ein, in dem die nach der Ausführung des Build-Befehls erzeugten statischen Dateien gespeichert werden. Zum Beispiel.create-react-app Das Ausgabeverzeichnis der /buildDas Projekt Vite hingegen ist /dist.

Wenn es sich bei dem Projekt um eine reine statische HTML-Datei ohne Build-Schritte handelt, können Sie den Build-Befehl leer lassen und das Ausgabeverzeichnis auf das Stammverzeichnis setzen /Füllen Sie diese Informationen je nach Konfiguration des AI-Tools oder des Projekts selbst korrekt aus. Nachdem Sie die Informationen je nach Konfiguration des KI-Tools oder des Projekts selbst korrekt ausgefüllt haben, klicken Sie auf "Speichern und bereitstellen".

Cloudflare Wir beginnen mit dem Ziehen von Code, dem Erstellen des Projekts und der Bereitstellung.

Nach erfolgreichem Einsatz wird dieCloudflare liefert eine Datei mit dem Format your-project-name.pages.dev Der vorläufige Domänenname der Website ist jetzt über diesen Link zugänglich.

Abschlusssitzung: Binden von benutzerdefinierten Domains

Der letzte Schritt besteht darin, die zuvor vorbereitete persönliche Domäne an dieses bereitgestellte Projekt zu binden. Gehen Sie auf der Seite "Projektmanagement" auf die Registerkarte "Benutzerdefinierte Domänen" und klicken Sie auf "Benutzerdefinierte Domänen einrichten".

Geben Sie Ihren Domänennamen ein und fahren Sie fort.

Da die Nameserver für die Domäne zuvor auf CloudflareDie Plattform überprüft automatisch den Besitz der Domäne und konfiguriert die entsprechenden CNAME-Auflösungseinträge.

Die Validierung von DNS-Einträgen ist in der Regel schnell erledigt.

Nachdem der Status auf "Gültig" geändert wurde, können Sie die Website über Ihren eigenen Domänennamen aufrufen.

Wenn Sie bei der Domänenbindung auf Probleme stoßen, können Sie die Cloudflare DNS-Einstellungen darauf achten, dass Sie auf den pages.dev Der CNAME-Eintrag wurde korrekt hinzugefügt und ist in Kraft.

passieren (eine Rechnung oder Inspektion etc.) GitHub zusammen mit Cloudflare Pages Kombination können Entwickler ein effizientes, kostenloses und automatisiertes Webhosting-Verfahren entwickeln. Jedes Mal, wenn neuer Code an die GitHub der Produktionszweig derCloudflare Alle lösen automatisch neue Bereitstellungen aus und sorgen dafür, dass die Online-Site immer auf dem neuesten Stand ist. Dieser moderne Workflow steigert die Produktivität und ermöglicht es den Entwicklern, sich mehr auf die eigentliche Erstellung zu konzentrieren.