Hugoplate ist eine kostenlose Starter-Vorlage, die mit Hugo und TailwindCSS erstellt wurde und alles bietet, was Sie brauchen, um Ihr Hugo-Projekt anzukurbeln und wertvolle Zeit zu sparen.
Hergestellt mit ♥ von Zeon Studio
Wenn Sie dieses Projekt nützlich finden, geben Sie ihm bitte eine, um Ihre Unterstützung zu zeigen.
Wir haben fast alles beigefügt, was Sie zum Starten Ihres Hugo-Projekts benötigen. Sehen wir uns an, was in dieser Vorlage enthalten ist:
Mehrere Autoren
Vorschlag für ähnliche Beiträge
Suchfunktion
Dunkler Modus
Tags und Kategorien
Netlify-Einstellung vorkonfiguriert
Support-Kontaktformular
Vollständig reaktionsfähig
Schreiben und aktualisieren Sie Inhalte in Markdown
Disqus-Kommentar
Syntaxhervorhebung
Homepage
Um
Kontakt
Autoren
Autor Single
Blog
Blog-Single
Benutzerdefinierte 404
Elemente
Datenschutzrichtlinie
Schlagworte
Tag Single
Kategorien
Kategorie Single
Suchen
Hugo
Rückenwind-CSS
PostCSS
PurgeCSS
AutoPrefixer
Hugo-Module von Gethugothemes
Abschlag
Hübscher
Jshint
Netlify
Vercel
Github-Aktionen
Gitlab Ci
AWS Amplify
Zuerst müssen Sie das Vorlagen-Repository klonen oder herunterladen, und dann beginnen wir mit dem folgenden Prozess:
Um diese Vorlage verwenden zu können, müssen einige Voraussetzungen auf Ihrem Computer installiert sein.
Hugo Extended v0.124+
Knoten v20+
Gehen Sie zu Version 1.22+
Wir erstellen dieses benutzerdefinierte Skript, um die Einrichtung Ihres Projekts zu vereinfachen. Es wird ein neuer Hugo-Theme-Ordner erstellt und das Hugoplate-Theme darin geklont. Verschieben Sie dann den Ordner „examplesSite“ in das Stammverzeichnis. Damit Sie Ihren Hugo-Server starten können, ohne in den exampleSite-Ordner gehen zu müssen. Verwenden Sie den folgenden Befehl, um Ihr Projekt einzurichten.
npm führt Projekt-Setup aus
Installieren Sie alle Abhängigkeiten mit dem folgenden Befehl.
npm installieren
Starten Sie den Entwicklungsserver mit dem folgenden Befehl.
npm run dev
Diese Vorlage wurde mit Blick auf zahlreiche Anpassungsoptionen entwickelt. Sie können fast alles anpassen, was Sie möchten, einschließlich:
Sie können den Site-Titel, die Basis-URL, die Sprache, das Thema, Plugins und mehr in der Datei hugo.toml
ändern.
Sie können alle Parameter in der Datei config/_default/params.toml
anpassen. Dazu gehören das Logo, das Favicon, die Suche, SEO-Metadaten und mehr.
Sie können die Farben und Schriftarten in der Datei data/theme.json
ändern. Dazu gehören die Primärfarbe, die Sekundärfarbe, die Schriftfamilie und die Schriftgröße.
Sie können die sozialen Links in der Datei data/social.json
ändern. Fügen Sie hier Ihre sozialen Links hinzu und diese werden automatisch auf der Website angezeigt.
Wir haben einige benutzerdefinierte Skripte hinzugefügt, um Ihnen das Leben zu erleichtern. Sie können diese Skripte verwenden, um Sie bei Ihrer Entwicklung zu unterstützen.
Wenn Sie das Theme aktualisieren möchten, können Sie den folgenden Befehl verwenden. Dadurch wird das Theme auf die neueste Version aktualisiert.
npm führt update-theme aus
Hinweis: Dieser Befehl funktioniert nach der Ausführung
project-setup
-Skripts.
Wir haben dieser Vorlage viele Module hinzugefügt. Mit dem folgenden Befehl können Sie alle Module aktualisieren.
npm führt Update-Module aus
Wenn Sie den Dunkelmodus aus Ihrem Projekt entfernen möchten, können Sie den folgenden Befehl verwenden, um den Dunkelmodus aus Ihrem Projekt zu entfernen.
npm führen Sie „remove-darkmode“ aus
Hinweis: Dieser Befehl funktioniert vor der Ausführung
project-setup
-Skripts. Wenn Sie den Befehlproject-setup
bereits ausgeführt haben, müssen Sie zuerstnpm run theme-setup
ausführen und können dann diesen Befehl ausführen. Anschließend können Sienpm run project-setup
erneut ausführen.
Nachdem Sie Ihre Entwicklung abgeschlossen haben, können Sie Ihr Projekt fast überall erstellen oder bereitstellen. Sehen wir uns den Prozess an:
Um Ihr Projekt lokal zu erstellen, können Sie den folgenden Befehl verwenden. Dadurch wird das gesamte nicht verwendete CSS gelöscht und alle Dateien minimiert.
npm run build
Mit dieser Vorlage haben wir fünf verschiedene Bereitstellungsplattformkonfigurationen bereitgestellt, damit Sie die Bereitstellung problemlos durchführen können.
Netlify
Vercel
Github-Aktionen
Gitlab Ci
AWS Amplify
Und wenn Sie einige andere Hosting-Plattformen hosten möchten. Anschließend können Sie Ihr Projekt erstellen und erhalten einen public
Ordner. die Sie kopieren und auf Ihrer Hosting-Plattform einfügen können.
Hinweis: Sie müssen die
baseURL
in der Dateihugo.toml
ändern. Andernfalls funktioniert Ihre Website nicht ordnungsgemäß.
Wir verwenden GitHub Issues als offiziellen Bug-Tracker für diese Vorlage. Bitte suchen Sie nach vorhandenen Problemen. Möglicherweise hat bereits jemand das gleiche Problem gemeldet. Wenn Ihr Problem oder Ihre Idee noch nicht angesprochen wurde, können Sie gerne eine neue Ausgabe eröffnen.
Copyright (c) 2023 – vorhanden, entworfen und entwickelt von Zeon Studio
Code-Lizenz: Veröffentlicht unter der MIT-Lizenz.
Bildlizenz: Die Bilder dienen nur zu Demonstrationszwecken. Sie haben ihre Lizenz, wir haben keine Erlaubnis, diese Bilder zu teilen.
Liste einiger Projekte, die mit Hugoplate gebaut werden!
Offene neuromorphe | KI-Modelle | Hugobricks | ONO LLC |
Wenn Sie ein individuelles Theme, eine Theme-Anpassung oder komplette Website-Entwicklungsdienste von Grund auf benötigen, können Sie uns beauftragen.