Hosten Sie Ihre Website Made in Hugo KOSTENLOS auf Netlify

Du weißt, dass ich verliebt bin Hugo um einfache Websites zu erstellen, die keine dynamischen Inhalte erfordern.

Und eine der Funktionen, die mir am besten gefällt, ist, dass es viele Dienste gibt, die uns anbieten, die in Hugo erstellten Websites kostenlos zu hosten.

Heute komme ich, um über einen dieser Dienste zu sprechen: Netlify

Wenn Sie mehr über Hugo erfahren möchten, In der Premium-Zone haben Sie einen vollständigen Kurs

Lass dich davon nicht täuschen Netlify Hugo ließ uns unsere Website kostenlos hosten.

Netlify ist ein professioneller und qualitativ hochwertiger Service.

Ich sage es dir im Video

Warum lassen sie uns unsere Website kostenlos hosten?

Ganz einfach: Sie evangelisieren 🙂

Wie viele Leute kennen Sie, die ihre Website nicht in WordPress erstellen? Sehr wenige richtig?

Dienste wie Netlify, Cloudflare, DigitalOcean bieten an, Ihre statische Website kostenlos zu hosten, um Marktanteile zu gewinnen, und wenn sie es bekommen, wird es sicher nicht kostenlos sein.

Tatsache ist, dass wir jetzt unsere Website erstellen und auf den besten Servern hosten können, und das alles kostenlos 😉

Was brauchen Sie, um Ihre Website auf Netlify zu hosten?

In diesem Tutorial werde ich nicht erklären, wie es geht Hugo installieren noch irgendetwas, was wir bereits in der erklärt haben Hugo macht natürlich Static Webs.

In diesem Tutorial werden wir sehen, wie man eine Website in zwei Minuten erstellt und wie wir sie auf Netlify hosten können.

Also gehe ich mal davon aus:

• Sie haben Hugo auf Ihrem Computer installiert
• Haben Sie ein Konto für Github
• Haben Sie einen Code-Editor wie z Visual Studio Code

Erstellen meiner Website in Hugo

Ich betrete das Terminal meines Computers, gehe in das Verzeichnis, in dem ich meine Website erstellen werde, und schreibe:

hugo new site nombre-mi-web

Und ich bekomme folgende Meldung:

Jetzt werde ich meiner Website ein Template hinzufügen, dazu gehe ich in den THEMES-Ordner und hole das Template von Github mit dem folgenden Befehl:

git clone https://github.com/halogenica/beautifulhugo.git

Hier ist die Aufnahme dieses Prozesses:

Jetzt kopiere ich den Inhalt des Ordners /themes/beautifulhugo/exampleSite in das Stammverzeichnis meiner Website.

Es wird mir sagen, ob ich überschreiben möchte, ich sage ja.

Dies ist das:

Nach dem Kopieren in das Stammverzeichnis unserer Website können wir den lokalen Server von Hugo ausführen, um zu sehen, ob die Website funktioniert.

Wir müssen den Befehl im Stammverzeichnis unserer Website ausführen:

hugo server

Und wir müssen so etwas sehen, um zu sehen, dass alles in Ordnung ist:

Wenn alles gut gegangen ist, gehen wir zu der Adresse, die im Terminal erscheint. Dies ist normalerweise http://localhost:1313/

Und wir sollten so etwas sehen:

Laden Sie die Website auf Github hoch

Bevor wir unsere Website auf Netlify hosten, müssen wir unsere lokal erstellte Website in ein Repository auf Github hochladen.

Dafür verwenden wir Git:

git init
git add .
git commit -m "mi primera versión"

Wir erstellen ein leeres Repository in Github und Github selbst teilt uns die Befehle mit, die wir verwenden müssen, um unser Repository hochzuladen:

In meinem speziellen Fall sind die zu verwendenden Befehle die folgenden:

git remote add origin git@github.com:tolentinomh/netlify-prueba.git
                                git branch -M main
                                git push -u origin main

Und jetzt, da wir alles bereit haben, ist es an der Zeit, unsere Website auf Netlify zu hosten.

Laden Sie unsere Website auf Netlify hoch

Wenn Sie kein Netlify-Konto haben, ist es Zeit, es zu erstellen

Meine Empfehlung ist, dass Sie ein Konto bei GitHub erstellen und so Ihre Github-Repositories einfacher in Netlify importieren können.

Sobald wir unser Konto erstellt und mit Githug verbunden haben, werden wir eine neue Website erstellen:

Wir klicken auf Importieren Sie ein vorhandenes Projekt

Auf dem nächsten Bildschirm wählen wir das Repository unserer Website und lassen alles standardmäßig:

Jetzt klicken wir auf Deploy Site und …

WIRD SCHEITERN 😭

Aber keine Sorge, wir beheben das ganz einfach.

Sie erhalten eine Fehlermeldung wie die folgende:

Das Gute ist, dass der Fehler sehr beschreibend ist und uns sagt, was falsch ist.

Wir müssen in das Stammverzeichnis unserer Website gehen und eine Datei namens .gitmodules erstellen.

In meinem Fall mache ich es von Visual Studio Code aus

Der Inhalt ist wie folgt:

[submodule "themes/beautifulhugo"]
    path = themes/beautifulhugo
    url = https://github.com/halogenica/beautifulhugo

Sobald die Änderungen mit Git hochgeladen wurden, denken Sie daran, git add., git commit -m "your message", git push, wir kehren zu Netlify zurück und werden sehen, dass es nach ein paar Sekunden oder Minuten erneut versucht, unsere Website zu generieren und Wenn jetzt alles gut gelaufen ist, wird es nicht scheitern und es Ihnen sagen. Veröffentlicht:

Und wenn Sie versuchen, auf die von Netlify generierte temporäre URL zuzugreifen, können Sie Ihre Website bereits sehen, aber mit einem kleinen Problem: Formate und Bilder erscheinen nicht gut

Dies liegt daran, dass Sie in der Konfigurationsdatei configur.toml Ihrer Website die URL auf die URL ändern müssen, die Netlify uns gibt, und später auf die echte Domain:

Und sobald die Änderungen vorgenommen und in das Repository hochgeladen wurden, haben wir unsere flammende Website hochgeladen:

Konfigurieren Sie die endgültige Domäne in Netlify

Jetzt, da unsere Website auf Netlify funktioniert, müssen wir unsere Domain damit verknüpfen.

Dazu müssen wir nur den DNS konfigurieren

Wenn wir auf Schritt XNUMX klicken Benutzerdefinierte Domain einrichten, werden wir gefragt, welche Domain wir unserem Projekt zuordnen möchten.

Wenn die Domain nicht existiert, werden wir gefragt, ob wir sie kaufen möchten, und wenn sie existiert, sagt sie uns, dass wir sie konfigurieren müssen.

Wenn wir auf DNS-Konfiguration prüfen klicken, wird uns das DNS mitgeteilt, das wir konfigurieren müssen:

Und das war's, wenn Sie so weit gekommen sind, haben Sie Ihre Website bereits mit Hugo erstellt und auf Netlify gehostet 😉

Ich hoffe, es war nützlich für Sie.

Wenn Sie mehr über Hugo erfahren möchten, In der Premium-Zone haben Sie einen vollständigen Kurs