Ich bin ein absoluter Noob, wenn es um Webentwicklung geht, aber ich verbessere meine technischen Fähigkeiten jeden Tag. Ich habe versucht, diesen Beitrag so einfach wie möglich zu halten, damit er Anfängern wie mir helfen kann. Ich habe mich um alle Schritte und Codes gekümmert, die ich in diesem Blogbeitrag erwähnt habe, aber wenn Sie Fehler finden oder etwas vorschlagen möchten, können Sie dies gerne kommentieren. Ich wäre Ihnen dankbar.
Statische Websites sind schnell, sicher, flexibel und zuverlässig. Sie müssen sich keine Sorgen machen, dass bösartiger Code in Ihre Website eingeschleust wird. Die Hosting-Kosten für statische Websites sind deutlich günstiger. Ich werde zu diesem Thema nicht ins Detail gehen, aber hier ist ein großartiger Artikel über statische Websites von Scotch.
In diesem Blogbeitrag werde ich eine statische Website auf Google Firebase bereitstellen, und das ebenfalls KOSTENLOS. Der Beitrag ist eine Schritt-für-Schritt-Anleitung und wird insbesondere für Technik-Neulinge hilfreich sein.
Firebase wurde 2014 von Google übernommen. Es basiert auf der Google-Infrastruktur und hilft Ihnen, schnell hochwertige Apps zu erstellen, und das auch ohne Infrastrukturverwaltung. Mit Google Firebase können Sie Ihre statischen Inhalte im Rahmen des Spark-Plans kostenlos hosten. Lesen Sie mehr über Firebase-Hosting.
Voraussetzungen
Wie gesagt, diese Anleitung ist nur für Anfänger. Um Ihre statische Site zu hosten, benötigen Sie daher nur:
- Ein Google-Konto
- Ein Laptop oder Desktop mit Windows-Betriebssystem
- Vertrautheit mit grundlegenden Tastaturfunktionen Ihres Laptops oder Desktops
Das ist es. Fangen wir an.
Schritt 1:Erstellen Sie ein Projekt in Google Firebase
Registrieren Sie Ihr Konto bei Google Firebase. Erstellen Sie ein Google-Konto, falls Sie noch keins haben. Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen.
Geben Sie einen Projektnamen und eine Projekt-ID ein (optional, da Firebase Ihrem Firebase-Projekt automatisch eine eindeutige ID zuweist). Verwenden Sie vorerst die Standardeinstellungen und klicken Sie auf Projekt erstellen.
Sobald das Projekt erstellt ist, klicken Sie auf die Schaltfläche „Weiter“ und Sie werden zu Ihrem Firebase-Dashboard weitergeleitet. Ein paar Details finden Sie hier:
1. Das aktuelle Projekt ist „thenewspaper-tech-demo“. Klicken Sie auf das Dropdown-Menü, um alle Ihre Projekte anzuzeigen, wenn Sie mehr als eines erstellt haben.
2. Das aktuelle Projekt ist auf „thenewspaper-tech-demo“ eingestellt.
3. Sie können die Einstellungen für das aktuelle Projekt konfigurieren, indem Sie auf das Projekteinstellungssymbol klicken. Lass es erstmal so wie es ist.
4. Wir verwenden diese Registerkarte "Hosting", um unsere statische Website bereitzustellen.
5. Ihr Firebase-Plan ist Spark, der kostenlos ist. Sehen Sie sich alle Firebase-Pläne und -Preise an.
Schritt 2:Richten Sie die erforderlichen Tools ein
Um Ihre Website zu hosten, müssen Sie die Firebase-Befehlszeilentools installieren.
1. Laden Sie Node.js für Mac/Linux/Windows herunter und installieren Sie es. Ich verwende Windows 10 64-Bit. Stellen Sie sicher, dass Sie die LTS-Version herunterladen, die für die meisten Benutzer empfohlen wird.
2. Öffnen Sie Windows PowerShell. Drücken Sie zum Öffnen gleichzeitig die Tasten Windows + X auf Ihrer Tastatur und klicken Sie dann auf „Windows PowerShell Admin“. Klicken Sie auf Ja, wenn Sie von der Benutzerkontensteuerung dazu aufgefordert werden.
3. Installieren Sie die Firebase-Befehlszeilentools, indem Sie den folgenden Befehl in der PowerShell ausführen:
$ npm install -g firebase-tools
Dieser Befehl installiert den global verfügbaren Firebase-Befehl. Wenn der obige Befehl nicht funktioniert, ändern Sie die npm-Berechtigungen und führen Sie den Befehl erneut aus. Um sicherzustellen, dass Sie über die neueste Version der Firebase CLI (Befehlszeilenschnittstelle) verfügen, führen Sie den obigen Befehl erneut aus, auch wenn Sie die Befehlszeilentools zuvor installiert haben.
Schritt 3:Erstellen Sie Ihre Website lokal mit Firebase
Führen Sie im bereits geöffneten Terminal den folgenden Befehl aus, um sich bei Google anzumelden.
$ firebase login
Wenn Sie diesen Befehl ausführen, wird Ihr Standardbrowserfenster geöffnet und Sie werden aufgefordert, Google Mail Zugriff auf Firebase zu gewähren. Klicken Sie auf die Schaltfläche Zulassen und verbinden Sie sich mit Ihrer E-Mail. Wenn Sie kein Google Mail-Konto haben, erstellen Sie eines. Möglicherweise erhalten Sie einen Pop der Windows-Firewall für den Zugriff. Einfach zulassen oder auf Ja klicken.
Dieser Befehl verbindet Ihren lokalen Computer mit Firebase und gewährt Ihnen Zugriff auf Ihre Firebase-Projekte. In der Shell wird die Meldung „Erfolg:angemeldet als …“ angezeigt.
Führen Sie den nächsten Befehl aus, um zu testen, ob die Authentifizierung funktioniert hat (und um alle Ihre Firebase-Projekte aufzulisten). Die angezeigte Liste sollte mit den Firebase-Projekten übereinstimmen, die in der Firebase-Konsole aufgeführt sind.
$ firebase list
Um Ihr lokales Projekt mit Ihrem Firebase-Projekt zu verbinden, führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen Projektverzeichnisses aus.
$ firebase init
Sobald Sie den obigen Befehl ausgeführt haben, sehen Sie Ihr Projektverzeichnis. Das Projektverzeichnis befindet sich in einem Ordner unter diesem Pfad „C:\Windows\System32“. Der Name des Arbeitsordners ist wie immer Sie ihn benennen. Standardmäßig benennt Firebase es als „öffentlich“. Wir werden das gleich sehen. Geben Sie jetzt J oder Ja ein und drücken Sie die Eingabetaste, um mit den Schritten fortzufahren.
Der Firebase-Init-Befehl bietet Ihnen eine Reihe von Konfigurationsoptionen. Sie müssen Hosting auswählen. Gehen Sie nach unten, indem Sie auf Ihrer Tastatur die Pfeiltaste nach unten drücken, und drücken Sie dann die Leertaste, um die Hosting-Funktion auszuwählen. Drücken Sie die Eingabetaste, um fortzufahren.
Jetzt wird Ihnen das Projekt-Setup angezeigt.
Wählen Sie Ihr Projekt aus, das Sie zuvor in der Firebase-Konsole erstellt haben. Der von mir erstellte Projektname war „thenewspaper-tech-demo“. Sie können von hier aus auch ein neues Projekt erstellen.
Im weiteren Verlauf wird Ihnen das Hosting-Setup angezeigt. Sie müssen Ihr Projektverzeichnis auswählen. Geben Sie ein Verzeichnis an, das als Ihr öffentliches Stammverzeichnis verwendet werden soll. Geben Sie zum Angeben public ein und drücken Sie die Eingabetaste. Beachten Sie, dass Sie anstelle von „öffentlich“ auch einen anderen Namen eingeben können (z. B. „mein_erstes_Projekt“). Geben Sie an dieser Stelle Ihr öffentliches Stammverzeichnis an, aber Sie können es auch später angeben, indem Sie Ihre firebase.json-Konfigurationsdatei bearbeiten.
Um weitere Firebase-Produkte einzurichten, können Sie Firebase init später ausführen. Der Standard für das öffentliche Stammverzeichnis heißt public und befindet sich hier „C:\Windows\System32\public“. Es ist interessant festzustellen, dass Firebase einige intelligente Dinge automatisch ausführt:
1. Es erstellt ein öffentliches Verzeichnis, wenn Sie es nicht erstellen.
2. Es erstellt eine index.html-Datei und eine 404.html-Datei im Verzeichnis. Öffnen Sie einen öffentlichen Ordner, um beide Dateien anzuzeigen.
Als Nächstes müssen Sie eine Konfiguration für Ihre Website auswählen.
Wenn Sie sich für die Erstellung einer One-Page-App entscheiden, fügt Firebase automatisch Rewrite-Konfigurationen für Sie hinzu. Da ich keine URLs neu schreiben möchte, wähle ich N und drücke die Eingabetaste.
Dadurch wird der Firebase-Initialisierungsprozess abgeschlossen. Beachten Sie, dass der Befehl firebse init dem Stammverzeichnis der lokalen Website einige Dateien hinzufügt:
– Eine JSON-Datei, firebase.json , die die Projektkonfiguration anzeigt.
– Eine .firebaserc-Datei, die Informationen zu Projektaliasnamen bereitstellt.
Lassen Sie uns nun den lokalen Server für die Entwicklung starten. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen App-Verzeichnisses aus:
$ firebase serve
Dieser Befehl stellt das Hosten von Dateien aus dem öffentlichen Verzeichnis bereit und startet einen lokalen Server.
Öffnen Sie Ihren Browser und geben Sie Folgendes ein:http://localhost:5000
Sie haben also Ihre Website lokal erstellt, die den Inhalt enthält, wie Sie im obigen Screenshot sehen.
Lassen Sie uns nun den Inhalt der Site ändern und die Site neu erstellen, um die aktualisierten Inhalte anzuzeigen. Gehen Sie zunächst zum bereits geöffneten Windows PowerShell-Popup. Fahren Sie den lokalen Server herunter. Klicken Sie dazu auf eine beliebige Stelle im Popup-Bereich und drücken Sie die STRG+C-Taste. Es wird heruntergefahren.
Wie ich bereits gezeigt hatte, befinden sich die HTML-Dateien hier „C:\Windows\System32\public“. Gehen Sie in den Ordner, kopieren Sie die Index-HTML-Datei und fügen Sie die Datei auf Ihrem Desktop ein. Klicken Sie nun mit der rechten Maustaste und öffnen Sie die Index-HTML-Datei mit einem beliebigen Texteditor. Ich verwende Visual Studio Code. Standardmäßig sehen Sie Notepad in Ihrem Rechtsklick-Popup. Wenn Sie den Notizblock nicht sehen, wählen Sie eine andere App-Option, scrollen Sie am Ende nach unten und wählen Sie Weitere Apps aus. Wählen Sie dort Editor aus.
Sobald die HTML-Indexdatei geöffnet ist, ändern Sie das Wort „Welcome“ in „Hello World.“
Speicher die Datei. Drücken Sie zum Speichern einfach STRG+S. Die Ausgabe sieht folgendermaßen aus:
Kopieren Sie nun die geänderte Indexdatei und fügen Sie sie in den öffentlichen Ordner ein. Dazu müssen Sie der Administrator des Computers sein. Geben Sie die Berechtigung zum Einfügen. Führen Sie den folgenden Befehl erneut aus, um den lokalen Server zu starten
$ firebase serve
Dieser Befehl stellt das Hosten von Dateien aus dem öffentlichen Verzeichnis bereit und startet einen lokalen Server. Öffnen Sie Ihren Browser und geben Sie Folgendes ein:http://localhost:5000. Sie werden Ihre Änderungen sehen.
Schritt 4:Stellen Sie Ihre Website bereit
Jetzt werden wir dieses Projekt bereitstellen. Aber fahren Sie zuerst den lokalen Server herunter, wie ich es zuvor angewiesen habe.
Führen Sie zur Bereitstellung in unserem Firebase-Projekt „thenewspaper-tech-demo“ den folgenden Befehl aus Ihrem Projektverzeichnis aus:
$ firebase deploy
Dieser Firebase-Bereitstellungsbefehl stellt eine Version auf den Standard-Hosting-Sites Ihres Firebase-Projekts bereit:
project-id.web.app project-id.firebaseapp.com
Sie sehen also Ihre Websites, die diesen URLs ähneln:
https://thenewspaper-tech-demo.web.app https://thenewspaper-tech-demo.firebaseapp.com
Sie können diese URLs auch sehen, wenn Sie zum Hosting-Bereich Ihrer Firebase-Konsole gehen.
Herzlichen Glückwunsch! Sie haben Ihre erste statische Site mit Firebase bereitgestellt, und das auch noch kostenlos.
Hinweis :Sie sollten beachten, dass sich unser Projekt vorerst auf Laufwerk C befindet. Als ich zum ersten Mal versuchte, meine statischen Dateien bereitzustellen, folgte ich dem offiziellen Firebase-Tutorial. Und da ich selbst ein Neuling bin, bin ich einfach mit dem Strom geschwommen. Aber als ich versuchte, ein echtes Projekt in einem anderen Laufwerk zu initialisieren, hat es bei mir nie funktioniert. Wenn Sie das gleiche Problem haben, finden Sie hier die Lösung. Dort heißt es:„Wenn Firebase-Init ausgeführt wird, geht es im Verzeichnisbaum nach oben und sucht nach einem übergeordneten Verzeichnis, das bereits als Firebase-Projekt initialisiert wurde.“
- Suchen Sie am Speicherort /Users/SEB nach einer firebase.json-Datei.
- Löschen Sie diese Datei, falls sie existiert.
- Das Problem wird behoben
Um all diese Probleme zu vermeiden, schlage ich vor, dass Sie ein Projekt in Ihrem gewünschten Ordner initialisieren, bevor Sie Firebase-Befehle ausführen. Dazu müssen Sie zuerst PowerShell in diesem Ordner öffnen. Hier ist die Kurzanleitung zum Öffnen von PowerShell im gewünschten Ordner.