Schritt-für-Schritt-Anleitung zur Bereitstellung von Hugo auf Vercel

Dieser Leitfaden führt Sie durch die Bereitstellung einer Hugo-Website in Vercel.
Ich sorge dafür, dass Sie mindestens einen häufigen Fehler vermeiden.

1. Erstellen Sie Ihre Hugo-Site lokal

Vorausgesetzt, Hugo ist bereits installiert:

Hugo neue Website

---

2. Pushen Sie Ihre Hugo-Site auf GitHub

Dann richten Sie ein Git-Repository für die Site ein.

git init

Commit hinzufügen und Ihre Projektdateien übertragen:

git add .
git commit
git push -u origin master

---

3.Fügen Sie ein Thema für Ihre Hugo-Site hinzu.

Zum Beispiel können Sie ein superschnelles Nno-jQuery-Theme ohne Bootstrap wie „hugo-blog-awesome“ verwenden:

Als Github-Modul:
Git-Submodul hinzufügen https://github.com/hugo-sid/hugo-blog-awesome.git

Oder ein Hugo-Modul
Hugo Mod: Holen Sie sich github.com/hugo-sid/hugo-blog-awesome

---

4. Vercel-Konfiguration hinzufügen (vercel.json)

Fügen Sie im Stammverzeichnis vercel.json hinzu, wo wir die Hugo-Version, die Go-Version und den buildCommand definieren. Nachdem Sie Hugo als Framework-Voreinstellung in Vercel definiert haben, werden diese Konfigurationen automatisch erkannt.


vercel.json

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.135.0",
      "GO_VERSION": "1.19.5"
    }
  },
 "buildCommand": "hugo --gc --minify"
}

- verwenden Sie hugo env um die von Ihnen verwendeten Versionen von Go und Hugo anzuzeigen

Dann aktualisieren Sie es per Push auf Github:
git add .
git commit -m "Vercel Deploy"
git push -u origin master

---

5 . Stellen Sie Ihre Site auf Vercel bereit

Stellen Sie während des Importvorgangs sicher, dass das Projekt korrekt mit Ihrem Hugo-Repository verbunden ist.

Vercel erkennt Umgebung und befiehlt Build:

Oder Sie können es hier manuell in den Vercel-Umgebungsvariablen festlegen

Bereitstellungsprotokolle:

Nach einem erfolgreichen Build stellt Vercel einen Vorschau-Link bereit, über den Sie Ihre Live-Hugo-Website anzeigen können. Sie können auch eine benutzerdefinierte Domäne über die Vercel-Einstellungen für Ihr Projekt konfigurieren.

---

6. Fügen Sie eine Domäne hinzu

Wenn Sie einen Domänennamen haben, können Sie den Domänennamen zum Abschnitt „Vercel im Domänenbereich“ der Projekteinstellungen hinzufügen. Fügen Sie dann Ihrem Domain-Anbieter einen CNAME hinzu, um auf die Vercel-Domain zu verweisen.

---

?️ Häufige Bereitstellungsprobleme beheben

Das Hauptproblem besteht darin, dass die Hugo-Unterstützung nicht so gut ist, selbst wenn Vercel sein Node-Image bereits auf Hugo aktualisiert hat und mit den Standardeinstellungen der Fehler „Hugo-Layout nicht gefunden“ aufgetreten ist und meine Bereitstellung zu einem XML führt Seite.
Dies liegt daran, dass der Env-Parameter Hugo und die Go-Versionen in der JSON-Datei vercel.json

definiert werden müssen

Das Einrichten einer persönlichen Website mit Hugo und Vercel ist trotz einiger kleinerer Probleme wirklich einfach. Ich hoffe, dieser Beitrag kann Ihnen bei der Einrichtung Ihrer eigenen Website helfen. Weitere Einzelheiten zu den Änderungen, die ich an der Website vorgenommen habe, finden Sie im Commit-Verlauf meiner Website.

---

Einige Quellen:
https://vercel.com/guides/deploying-hugo-with-vercel
https://vercel.com/docs/projects/project-configuration
https://blog.gusibi.site/article/Best-Practices-for-Deploying-Hugo-on-Vercel

Das obige ist der detaillierte Inhalt vonSchritt-für-Schritt-Anleitung zur Bereitstellung von Hugo auf Vercel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!