So erstellen Sie eine statische, persönliche Website für weniger als 1 US-Dollar pro Monat

Das Ziel dieses Beitrags ist es, Ihnen zu zeigen, wie Sie für weniger als 1 US-Dollar pro Monat Ihre eigene statische persönliche Website erstellen können. Ich weiß, Sie denken wahrscheinlich: „Habe ich das gerade richtig gelesen?“ Du machtest! Natürlich gibt es Vorbehalte, um dieses Ziel zu erreichen, aber zu Beginn der Reise Ihrer Website sollte das Hosten Ihrer eigenen statischen Website wirklich nur 0,01 US-Dollar pro Monat kosten. Die Zielgruppe für diesen Beitrag ist jeder mit JavaScript-Erfahrung und einem allgemeinen Verständnis der Webentwicklung. Wenn Sie nicht über diesen Hintergrund verfügen, machen Sie sich keine Sorgen! Ich werde mein Bestes tun, um die Ideen und Konzepte in diesem Beitrag zu erklären, damit jeder folgen kann!

Bevor wir beginnen, wollen wir uns mit einigen Definitionen befassen, die uns helfen sollen, die verschiedenen Begriffe zu verstehen, die wir zum Erstellen unserer ersten Website verwenden werden. Sie können sich gerne auf diese Definitionen beziehen, während wir unsere Website zu Google Cloud hinzufügen:

• Website-Domain: eine Adresse, die zur Identifizierung einer Website im Internet verwendet wird, z. B. yelp.com
• Domain-Registrierungsanbieter: ein Domain-Anbieter, bei dem Sie eine benutzerdefinierte Domain kaufen können
• Statische Website: eine Website, die mit einer festen Anzahl beliebiger Kombinationen von HTML-, CSS- und JavaScript-Dateien erstellt wurde
• Next.js: ein React.js-Framework, das serverseitiges Rendering und statische Site-Generierung unterstützt
• Speicherobjekt: eine Entität, die zum Speichern verwendet wird, z. B. Fotos oder Videos oder eigentlich jede andere Art von Datei
• Google Cloud: eine Cloud-Computing-Plattform, die eine Vielzahl von Diensten bietet, wir kümmern uns um die Speicherung
• Google Cloud Storage: Der Objektspeicherdienst von Google Cloud. Wir verwenden ihn zum Speichern der statischen Dateien unserer Website
• Bucket (Google Cloud Storage): ein Container, der die Dateien Ihrer Website enthält

In diesem Artikel wird davon ausgegangen, dass der Leser über grundlegende Kenntnisse in der Website-Entwicklung und -Programmierung verfügt. Ich gehe davon aus, dass jeder Leser Folgendes hat:

• Ein grundlegendes Verständnis der Website-Entwicklung – Einführung in die Webentwicklung (freecodecamp.org)
• Erfahrung mit NPM
• Anfängerkenntnisse von React.js und Next.js
• Komfort mit einer CLI
• Eine auf Ihrem Computer installierte IDE – VSCode ist das, was ich zum Beispiel verwende

Ich neige dazu, besser zu denken, indem ich ein Ziel in inkrementelle Arbeitsabschnitte aufteile. Lassen Sie uns unsere Aufgaben bei der Erstellung unserer Website so gestalten:

1. Aufstellen
2. Startercode für unsere Website
3. Konfigurieren eines Buckets für unsere Site
4. Nächste Schritte 😎

Aufstellen

Wenn Sie Ihre eigene persönliche Website erstellen möchten, benötigen Sie zunächst eine Domain. Obwohl wir es zunächst nicht verwenden werden, lohnt es sich, dies jetzt zu tun, damit wir die benutzerdefinierte Domäne in einem späteren Artikel verwenden können. Für mich war meine Domain afro-cloud.com , aber Sie können wirklich alles auswählen, was Ihnen in den Sinn kommt, solange ein Registrierungsanbieter die Domain verfügbar hat. Es gibt eine Reihe von Domainregistrierungsanbietern, die Sie nutzen können. Ich persönlich habe GoDaddy verwendet, aber hier ist eine Teilmenge der verfügbaren Optionen (ich bin mit keinem dieser Dienste verbunden):

• Los Papa
• Bluehost
• Squarespace

Nachdem wir nun unsere Domain eingerichtet haben, erstellen wir ein Google Cloud-Konto und aktivieren die Abrechnung.

1. Navigieren Sie zur Google Cloud Console
2. Verwenden Sie ein vorhandenes Google-Konto oder erstellen Sie ein neues, um auf die Konsole zuzugreifen (dies ist für die Verwendung von Google Cloud erforderlich).
3. Erstellen Sie ein neues Projekt, indem Sie auf das Dropdown-Menü zur Projektauswahl in der oberen Leiste des Bildschirms klicken
4. Navigieren Sie zu „Abrechnung“
5. Erstellen Sie ein neues Rechnungskonto, indem Sie den Anweisungen von Google Cloud folgen

Großartig! Da die Abrechnung nun aktiviert ist, können wir mit der Nutzung der Google Cloud-Dienste beginnen. Mit dieser Registerkarte sind wir vorerst fertig, aber wir werden später in diesem Artikel auf diese Seite zurückkommen, also halten Sie sie griffbereit.

Startercode für unsere Website

Wenn Sie beim Befolgen der Schritte in diesem Artikel Probleme haben, nehmen Sie bitte Kontakt mit uns auf. Ich werde mein Bestes tun, um Ihnen bei der Behebung des Problems behilflich zu sein. Ok, wenn das geklärt ist, machen wir weiter. Wir werden Next.js im Gegensatz zu anderen React.js-Frameworks (oder einfach nur React) verwenden, da diese den statischen Export unterstützen. Es gibt eine Reihe verschiedener Bereitstellungsoptionen für das Hosten einer React.js-Anwendung, aber ich habe mich aufgrund der SEO-Vorteile und Kosteneinsparungen für den Ansatz von Google Cloud Storage und Next.js entschieden. Bei statischen Exporten von Next.js wird beim Erstellen eines Produktions-Builds pro Route eine HTML-Datei zusammen mit den statischen Assets (CSS- und JS-Dateien) erstellt, die der HTML-Datei in verschiedenen Blöcken entsprechen. Dies ist wichtig, da dadurch das Laden unnötiger JavaScript-Bundles für die angezeigte Seite vermieden werden kann, was zu schnelleren Seitenladevorgängen führt. Alle beim Ausführen von „next build“ generierten Dateien werden in den Ordner „out“ exportiert. Aber dazu später mehr. Lassen Sie uns die App erstellen.

Lassen Sie uns zunächst ein Starter-Next.js-Projekt auf unserem Computer installieren. Glücklicherweise verfügt Next.js über ein „Create-Next-App“-Dienstprogramm, genau wie „Create React App“ für diejenigen, die es verwendet haben. Um den Workflow zu starten, können wir den folgenden Befehl ausführen:

npx create-next-app@latest

Der Befehl führt uns durch einige Konfigurationsoptionen für unser Projekt (Sie können jederzeit auswählen, was Sie möchten; wir benötigen lediglich die Codegenerierung). Ich habe die Optionen, die ich für diesen Artikel verwenden werde, fett markiert:

• Wie heißt Ihr Projekt? meine App
• Möchten Sie TypeScript verwenden? Nein Ja
• Möchten Sie ESLint verwenden? Nein Ja
• Möchten Sie Tailwind CSS verwenden? Nein Ja
• Möchten Sie das Verzeichnis „src/“ verwenden? Nein Ja
• Möchten Sie App Router verwenden? (empfohlen) Nein / Ja
• Möchten Sie den Standard-Importalias (@/*) anpassen? Nein Ja

Schön, wir haben jetzt Code! Sie werden feststellen, dass unser Ordner „node_modules“ gefüllt ist, sodass wir alle Abhängigkeiten installiert haben, die wir zum Ausführen unserer Anwendung benötigen. Führen Sie im selben Terminalfenster, das Sie zum Erstellen des Projekts verwendet haben, den folgenden Befehl aus: npm run dev . Dadurch wird der Next.js-Entwicklungsworkflow gestartet, sodass wir unsere Anwendung lokal anzeigen können. Next.js stellt eine URL bereit, um das Projekt auf Ihrem Computer anzuzeigen. In den meisten Fällen ist dies http://localhost:3000 , aber wenn Sie eine andere Web-App ausführen, wählt diese möglicherweise einen anderen Port wie 3001 aus. Wenn Sie auf den Link klicken, sollten Sie etwa Folgendes sehen:

Hübsch! Wir haben eine Starter-Anwendung im Einsatz! Aber lassen wir die Startseite weg, um das klassischere „Hello World“-Beispiel zu verwenden. Aktualisieren Sie die Datei src/app/page.tsx (oder page.jsx) so, dass sie Folgendes enthält:

 import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> </div> </main> ); }

Speichern Sie die Datei, gehen Sie zurück zum Browser-Tab, auf dem unsere Anwendung ausgeführt wird, und laden Sie die Seite neu. Auf Ihrem Bildschirm sollte „Hallo Welt“ angezeigt werden! Kehren wir nun dazu zurück, statische Exporte zum Laufen zu bringen. Wir müssen unsere next.config-Datei konfigurieren, um die Funktion zu aktivieren. Aktualisieren Sie die nextConfig-Deklaration wie folgt:

const nextConfig = { output: "export", };

Dadurch wird Next.js während des Build-Prozesses angewiesen, einzelne HTML-Dateien zu erstellen, die jeder Route innerhalb unserer Anwendung entsprechen. Da wir vorerst nur eine Seite haben, fügen wir eine weitere Seite hinzu, um die Vorteile statischer Exporte zu veranschaulichen. Erstellen Sie im Verzeichnis app/ ein neues Verzeichnis mit dem Namen „test“. Fügen Sie im neu erstellten Verzeichnis eine Datei „page.tsx“ (oder „page.jsx“) hinzu und fügen Sie den folgenden Code hinzu:

 export default function Test() { return ( <main> <p>Hello test!</p> </main> ); }

Nachdem wir nun eine Testseite haben, fügen wir von unserer Homepage einen Link dazu hinzu. Öffnen Sie src/app/page.tsx (oder page.jsx) und aktualisieren Sie die Datei so, dass sie wie folgt aussieht:

 import Link from "next/link"; import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href="/test">Test Page!</Link> </div> </main> ); }

Speichern Sie die neu aktualisierten Dateien, gehen Sie zurück zum Browser-Tab, auf dem unsere Anwendung ausgeführt wird, und laden Sie die Seite neu. Sie sollten einen neuen Link mit „Testseite!“ sehen. und wenn Sie auf diesen Link klicken, sollte sich der Inhalt auf dem Bildschirm ändern und „Hallo Test!“ anzeigen. Gute Arbeit, jetzt haben wir zwei Routen in unserer Anwendung. Schauen wir uns nun die Ausgabe der statischen Exportfunktion an, über die wir gesprochen haben. Gehen Sie zurück zu Ihrem Terminalfenster und führen Sie „npm run build“ aus. Dieser Befehl führt den Befehl „nächster Build“ aus, der einen produktionsbereiten Build für unsere Arbeit erstellt und das Ergebnis in einem Verzeichnis im Stammverzeichnis unseres Projekts speichert. Wenn wir das Out-Verzeichnis untersuchen, sollten wir etwa Folgendes sehen:

• _next: enthält die statischen Assets, die wir zum Betrieb unserer Website benötigen, einschließlich JavaScript- und CSS-Blöcken für jede HTML-Seite (z. B. 404.html: ist die standardmäßige 404-Seite, die Next.js für uns generiert).
• favicon.ico: das Website-Symbol für unsere Website
• index.html: die HTML-Datei für unsere Stammseite (src/app/page.tsx oder page.jsx)
• index.txt: Datei, die Zuordnungen für Ressourcen für die Seite index.html enthält
• test.html: die HTML-Datei für unsere Stammseite (src/app/test/page.tsx oder page.jsx)
• test.txt: Datei, die Zuordnungen für Ressourcen für die Seite test.html enthält

Tolle Arbeit, Leute. Lassen Sie uns nun den Gang wechseln und unseren Code in Google Cloud hochladen, damit wir die Website live sehen können.

Konfigurieren eines Buckets für unsere Site

Da wir nun unseren Code fertig haben, müssen wir ihn in Google Cloud Storage hochladen, damit Google Cloud unsere Website im Internet bereitstellen kann. Gehen wir zurück zur Registerkarte „Google Cloud“.

Öffnen Sie das Hamburger-Menü auf der linken Seite des Bildschirms und wählen Sie „Cloud-Speicher“. Oben auf dem Bildschirm sollte eine Schaltfläche „ERSTELLEN“ angezeigt werden. Wir klicken darauf, um den Erstellungsworkflow zu starten. Da wir noch keine benutzerdefinierte Domäne verwenden, benennen Sie den Bucket nach Ihren Wünschen, beachten Sie jedoch die Eindeutigkeitsbeschränkung. Für mich verwende ich „somerandombucket123“. Als Nächstes verwenden wir die Multiregionen-Option innerhalb der USA (dort schreibe ich diesen Beitrag), können diese aber gerne an Ihren Anwendungsfall anpassen. Anschließend wählen wir die standardmäßige Standardklassenoption aus, die für Sie vorab ausgefüllt sein sollte. Die nächste Option hat damit zu tun, ob unser Bucket über das Internet öffentlich zugänglich sein soll oder nicht. In diesem Fall möchten wir, da wir diese Dateien unseren Zuschauern bereitstellen möchten, die Option „Verhinderung des öffentlichen Zugriffs für diesen Bucket erzwingen“ deaktivieren, damit alle Dateien über das Internet zugänglich sind. Wir wählen die Zugangskontrolle „Einheitlich“ und verzichten auf die Angebote „Datenschutz“, um die Kosten niedrig zu halten. Dann klicken wir auf die Schaltfläche „Erstellen“.

Nachdem wir den Bucket erstellt haben, müssen wir eine neue Berechtigung hinzufügen, damit Benutzer unsere Bucket-Dateien anzeigen können. Wählen Sie die Registerkarte „Berechtigungen“ und klicken Sie auf die Schaltfläche „Zugriff gewähren“. Geben Sie in der Eingabe „Neue Prinzipale“ „allUsers“ ein und wählen Sie die Rolle unter „Cloud Storage“ für „Environment and Storage Object Viewer“ aus.

Es öffnet sich ein Dialog, in dem Sie gefragt werden, ob wir unseren Bucket öffentlich machen möchten, was wir auch tun, also wählen Sie „Öffentlichen Zugriff zulassen“. Wählen Sie also „Öffentlichen Zugriff zulassen“. Jetzt sind die Dateien dieses Buckets öffentlich zugänglich. Kehren Sie zur Übersichtsseite zurück, indem Sie auf der Bucket-Detailseite auf den Zurück-Pfeil klicken. Sie sollten Ihren neu erstellten Bucket mit den von uns verwendeten Konfigurationsoptionen sehen. Als nächstes müssen wir den Bucket unserer Website anweisen. Dies können wir tun, indem wir auf die drei Punkte in der Zeile des neu erstellten Buckets klicken. Wählen Sie „Website-Konfiguration bearbeiten“ und Sie sollten etwa Folgendes sehen:

Geben Sie für die Eingabe der Indexseite „index.html“ und für die Eingabe der Fehlerseite „404.html“ ein. Sie werden feststellen, dass diese Dateien mit der Build-Ausgabe unserer Next.js-Anwendung übereinstimmen, die wir wollen und in Kürze verwenden werden. Schließen Sie die Änderung ab, indem Sie auf Speichern klicken.

Jetzt müssen wir unsere im Out-Verzeichnis unseres Codes enthaltenen Dateien in diesen Bucket hochladen, damit unsere Website live sein kann! Wir können dies manuell tun, indem wir zur Bucket-Detailseite für unseren Bucket navigieren und jede Datei oder jeden Ordner einzeln auswählen. Aber lassen Sie uns programmatisch vorgehen und dafür Code schreiben. Gehen Sie zurück zu Ihrer IDE oder dorthin, wo Sie Aktualisierungen an Ihrem Code vornehmen, und erstellen wir eine neue Datei namens upload.sh im Stammverzeichnis unseres Projekts. Fügen Sie den folgenden Inhalt hinzu:

 #!/bin/bash # ADD YOUR BUCKETNAME HERE (no quotes necessary) # For example: # BUCKETNAME=somerandombucket123 BUCKETNAME=somerandombucket123 echo "Removing out folder..." sleep 1; rm -rf out echo "Creating production build..." sleep 1; npm run build echo "Uploading assets to the cloud..." sleep 1; gsutil cp out/404.html gs://$BUCKETNAME gsutil cp out/favicon.ico gs://$BUCKETNAME gsutil cp out/index.html gs://$BUCKETNAME gsutil cp out/index.txt gs://$BUCKETNAME gsutil cp out/test.html gs://$BUCKETNAME gsutil cp out/test.txt gs://$BUCKETNAME gsutil cp -r out/_next gs://$BUCKETNAME

Ersetzen Sie „somerandombucket123“ unbedingt durch Ihren Bucket-Namen. Machen Sie sich hier nicht zu viele Gedanken über die Semantik des Codes. Im Wesentlichen machen wir Folgendes:

1. Entfernen aller veralteten Produktions-Builds
2. Erstellen eines neuen Produktions-Builds
3. Verwenden Sie die Google Cloud CLI, um den Inhalt unseres Produktions-Builds in unseren Bucket hochzuladen

Bevor wir dieses Skript ausführen können, müssen wir die Google Cloud CLI herunterladen. Sie können den Anweisungen hier folgen. Nach der Installation müssen Sie gcloud auth login in Ihrem Terminal ausführen. Dadurch wird uns der Zugriff auf die Google Cloud CLI gestattet. Weitere Anweisungen und Hintergrundinformationen dazu finden Sie in der Dokumentation . Sobald Sie die Autorisierung erfolgreich abgeschlossen haben, fügen wir unserer package.json ein neues Ausführungsskript hinzu. Fügen Sie einen neuen Skripteintrag im Objekt „scripts“ hinzu, um unser Upload-Skript zu registrieren:

"upload": "sh upload.sh"

Als nächstes testen wir es. Öffnen Sie Ihr Terminal erneut und führen Sie Folgendes aus: „npm run upload“. Dadurch wird unser Skript ausgeführt und Sie sollten eine Ausgabe über die in Ihrem Bucket stattfindenden Uploads sehen. Wenn wir zur Google Cloud Storage-Seite zurück navigieren und Ihren Bucket öffnen, sollten Sie die Dateien sehen, die wir gerade hochgeladen haben. Wenn Sie zu https://storage.googleapis.com/YOUR_BUCKET_NAME/index.html navigieren (wobei YOUR_BUCKET_NAME der Name Ihres Buckets ist), sollten Sie die Website sehen. Sie werden jedoch feststellen, dass der Standard-Next.js-Stil verschwunden ist und der Link zu unserer Testseite defekt ist. Irgendwelche Ideen warum?

Wenn Sie Ihre Browserkonsole öffnen, sollten viele Fehlermeldungen angezeigt werden, dass die Ressource nicht gefunden wurde. Mit anderen Worten: Der Browser kann die Dateien, die er für Ihre Website laden sollte, nicht finden. Wenn Sie genau hinschauen, können Sie erkennen, dass die URL für die Ressource nicht ganz stimmt, da unser Bucket-Name im Pfad fehlt. Wenn wir eine benutzerdefinierte Domäne verwendet und DNS richtig konfiguriert hätten, wäre dieses Problem nicht aufgetreten. Für die Zwecke dieses Beitrags fügen wir jedoch zusätzlichen Code hinzu, um das Routing zu korrigieren. Öffnen Sie src/app/page.tsx (oder page.jsx) und aktualisieren Sie die Datei so, dass sie wie folgt aussieht:

 import Link from "next/link"; import styles from "./page.module.css"; // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href={isProd ? '/BUCKET_NAME/test.html' : "/test"}> Test Page! </Link> </div> </main> ); }

Ersetzen Sie „somerandombucket123“ unbedingt durch Ihren Bucket-Namen. Aktualisieren Sie als Nächstes die Datei next.config so, dass sie wie folgt aussieht:

 // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; /** @type {import('next').NextConfig} */ const nextConfig = { assetPrefix: isProd ? 'https://storage.googleapis.com/BUCKET_NAME/' : undefined, output: "export", }; export default nextConfig;

Ersetzen Sie auch hier unbedingt „somerandombucket123“ durch Ihren Bucket-Namen. Im obigen Codeausschnitt werden Sie feststellen, dass wir zusätzliche Logik hinzugefügt haben, um unseren Bucket-Namen zu berücksichtigen, wenn die Knotenumgebungsvariable „Produktion“ ist (festgelegt durch Next.js). Wir fügen ein Asset-Präfix hinzu, um die Fehler „Ressource nicht gefunden“ in der Konfigurationsdatei zu beheben und den Routing-Fehler auf unserer Homepage zu berücksichtigen, indem wir der Route unseren Bucket-Namen voranstellen. Laden wir jetzt unseren Code hoch und sehen, ob er funktioniert. Noch einmal: Anstoß: npm run upload. Gehen Sie zurück zu Ihrer Website und laden Sie die Seite neu. Wie haben wir das gemacht? Die Website sollte das widerspiegeln, was wir jetzt vor Ort haben. Wenn wir zu Beginn des Prozesses den Bucket so erstellen würden, dass er unserem Domänennamen entspricht, kämen zwar Ressourcenfehler, aber immer noch das Client-Routing-Problem. Ein Nachteil dieses Ansatzes besteht leider darin, dass zusätzlicher Code erforderlich ist, um das Suffix .html zu Routen für die Produktionsbereitstellung hinzuzufügen.

Nächste Schritte 😎

Zu einem späteren Zeitpunkt werde ich mich mit dem Hinzufügen der DNS-Einträge und Konfigurationsänderungen befassen, die zu unserem Bucket erforderlich sind, um eine benutzerdefinierte Domäne bereitzustellen, sowie mit der Konfiguration von SSL für unsere Website. Hoffentlich haben Sie heute etwas gelernt und ich werde in Zukunft einige Ideen zu folgenden Themen besprechen:

• Nutzung des kostenlosen Kontingents von Cloudflare für Seitenumleitungen und SSL
• Konfigurieren von Google Analytics und Optimieren von SEO

Danke fürs Lesen und Prost!