[{"content":"Einführung Warum ein statischer Website-Generator und warum Hugo?\nweil es eine einfache Lösung ist, die funktioniert. Für Visitenkarten-Websites oder Blogs benötigen Sie kein komplexes Backend. Alle Einstellungen in einer Datei hugo.toml oder hugo.yaml in einem deklarativen Stil, sodass alles sehr prägnant ist. Die Formate TOML und YAML sind so einfach, dass Sie eine Site einrichten können, ohne sich mit diesen Formaten befassen zu müssen. Sie müssen sich nicht mit HTML, CSS und JS befassen, um Inhalte zu erstellen. Inhalte werden in .md Markdown-Dateien erstellt. Das Markdown-Format ist deutlich einfacher. Im Internet finden Sie zahlreiche Anleitungen zur Markdown-Syntax. Zum Beispiel hier. Das Programm Hugo ist nur eine einzelne Binärdatei, die in Go geschrieben ist und keine weiteren Abhängigkeiten aufweist. Hugo generiert eine Site sehr schnell. Installation Auf der Hugo-Website finden Sie eine hervorragende Anleitung zur Installation von Hugo für verschiedene Betriebssysteme und verschiedene Paketmanager. Es gibt jedoch einen Vorbehalt.\nBei Betriebssystemen wie Debian oder MX Linux liegt der Schwerpunkt auf Stabilität, daher können einige Pakete in ihren Repositories veraltet sein.\nUnd das Erste, was Sie tun werden, nachdem Sie ein Projekt mit Hugo erstellt haben, ist die Installation eines Site-Designs. Und wenn Hugo eine veraltete Version ist, wird eine beträchtliche Anzahl von Designs nicht richtig funktionieren.\nDaher empfehle ich für Betriebssysteme wie Debian oder MX Linux, die neueste stabile Version von Hugo als .deb-Datei aus dem Hugo GitHub-Repository herunterzuladen und zu installieren.\nZusätzlich benötigen Sie Git für Ihr Betriebssystem.\nEin Projekt erstellen Es ist ganz einfach. Öffnen Sie ein Terminal und führen Sie den Befehl aus\nhugo new site \u0026lt;ProjectName\u0026gt; Hugo erstellt einen Ordner mit dem Namen Ihres Projekts \u0026lt;ProjectName\u0026gt; mit allen erforderlichen Dateien und Ordnern darin. sowie die Konfigurationsdatei hugo.toml.\nDamit Hugo ein Projekt mit einer Einstellungsdatei im YAML-Format erstellt, müssen Sie den folgenden Befehl ausführen.\nhugo new site \u0026lt;ProjectName\u0026gt; --format yaml Einige Vorlagen für Hugo bieten Beispiel-Site-Theme-Einstellungen im YAML-Format auf ihren Websites, Daher möchten Sie möglicherweise dieses Format verwenden.\nInstallieren des Designs Sie können auf der Hugo-Website ein Design auswählen. Rufen Sie anschließend die Designseite auf und folgen Sie den Installationsanweisungen. Es gibt mehrere Installationsmethoden.\nEs lohnt sich, das in der Anleitung empfohlene auszuwählen.\nZum Beispiel für das PeperMod-Thema:\nÖffnen Sie ein Terminal und gehen Sie zum Stammverzeichnis des Projektordners cd \u0026lt;ProjectName\u0026gt; Initialisieren Sie ein lokales Git-Repository git init Installieren Sie das Design als Git-Submodul (empfohlene Methode für dieses Design) git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod git submodule update --init --recursive Fügen Sie als nächstes die Zeile zur Konfigurationsdatei hugo.yaml hinzu theme: [\u0026#34;PaperMod\u0026#34;] Einstellungen Die Einstellungen für die gesamte Site befinden sich in der Datei hugo.toml oder hugo.yaml. (Es gibt auch Einstellungen für jede Seite der Site in einer Markdown-Datei.) Der Metadatenblock \u0026ldquo;front matter\u0026rdquo; wird in diesem Fall am Anfang der .md-Datei platziert.)\nDer Parameter baseURL in der Datei hugo.yaml gibt die Adresse Ihrer veröffentlichten Site an.\nUm die Site beispielsweise lokal auszuführen, lauten die Einstellungen wie folgt:\nbaseURL: http://localhost:1313 Danach können Sie die Site generieren.\nhugo Und starten Sie den Server lokal.\nhugo server # oder \u0026#39;hugo server --baseURL=\u0026#34;http://localhost:1313/\u0026#34;\u0026#39; Öffnen Sie anschließend Ihre Site im Browser unter der in den Einstellungen angegebenen Adresse.\nhttp://localhost:1313\nDie für jedes Design spezifischen Einstellungen werden durch den Parameter params festgelegt.\nEs gibt viele Konfigurationsmöglichkeiten, daher werde ich nicht alle beschreiben. Detaillierte Informationen finden Sie auf der Hugo-Website.\nAußerdem gibt es auf der PeperMod-Themeseite eine Beispielsite mit Einstellungen für dieses Theme.\nInhaltsfüllung Der gesamte Inhalt wird im Ordner content gespeichert. Erstellen wir eine neue Seite für die Site mit dem Befehl\nhugo new content/FirstPage.md Hugo erstellt eine Datei auf der Grundlage der Vorlage default.md, die im Ordner archetypes gespeichert ist.\nBearbeiten Sie als Nächstes die Datei FirstPage.md, generieren Sie die Site neu und starten Sie den Server.\nhugo hugo server -D Die Option -D bedeutet \u0026ldquo;Als Entwurf markierten Inhalt einschließen\u0026rdquo;. Wenn Sie mit der Bearbeitung der Datei FirstPage.md fertig sind, sollten Sie den Parameter draft im Metadatenblock \u0026ldquo;front matter\u0026rdquo; derselben Datei ändern.\ndraft: false Danach wird die Seite auf der Website angezeigt.\nHinzufügen eines Bildes Alle Bilder werden in den Ordnern static oder assets gespeichert.\nDas Titelbild für eine einzelne Seite wird im Metadatenblock .md der Datei angegeben.\ncover: image: cover.png caption: \u0026#34;Seitenumschlag\u0026#34; Siteweite Bilder werden in hugo.yaml konfiguriert.\nparams: env: production images: [\u0026#34;og-default.png\u0026#34;] cover: hidden: false label: icon: \u0026#34;logo.svg\u0026#34; iconHeight: 45 assets: favicon: \u0026#34;favicon.ico\u0026#34; favicon16x16: \u0026#34;favicon.ico\u0026#34; favicon32x32: \u0026#34;favicon.ico\u0026#34; Der Parameter images gibt an, welches Bild für das Cover verwendet wird, wenn der Link in sozialen Netzwerken veröffentlicht wird. Damit diese Einstellung funktioniert, müssen Sie env: production festlegen.\nDer Parameter label gibt das Site-Logo an.\nDie Parameter favicon, favicon16x16 und favicon32x32 legen das Site-Symbol im Browser-Tab fest.\nBitte beachten Sie, dass favicon, favicon16x16 und favicon32x32 alle angegeben werden müssen, auch wenn es nur ein Bild gibt!\nDer Wert des Parameters hidden: false in der Konfiguration ist –\nparams: cover: hidden: false bedeutet, dass standardmäßig Seitencoverbilder angezeigt werden. Für eine einzelne Seite können Sie dieses Verhalten in der .md-Datei der Seite deaktivieren.\nWebsite-Veröffentlichung Sie können eine Site kostenlos veröffentlichen, beispielsweise auf GitHub Pages.\nDazu müssen Sie auf GitHub ein Konto mit Ihrem UserName und einem Repository namens UserName.github.io erstellen.\nDies ist erforderlich, damit Ihre Site die URL UserName.github.io erhält.\nLaden Sie anschließend Ihre Site aus dem Ordner public in Ihrem Projekt in dieses Repository hoch. Hierfür gibt es mehrere Möglichkeiten. Betrachten wir die Option mit zwei Repositories.\nWir erstellen eines im Stammverzeichnis des Projekts für den Quellcode.\ncd mywebsite git init # wenn das Repository noch nicht initialisiert ist echo \u0026#34;public/\u0026#34; \u0026gt;\u0026gt; .gitignore git add . git commit -m \u0026#34;Initial commit.\u0026#34; Der zweite befindet sich im Ordner public.\ncd public git init git remote add origin git@github.com:username/username.github.io.git cd .. hugo cd public git add . git commit -m \u0026#34;Deploy $(date)\u0026#34; git push origin main --force Wichtig: --force ist erforderlich, da der Inhalt von public/ bei jeder Ausführung von hugo neu generiert wird.\nEine andere Möglichkeit besteht darin, ein Repository für den Quellcode und zum Veröffentlichen der Site zu verwenden.\nErstellen Sie in diesem Fall einen separaten Repository-Zweig für den generierten Code git checkout -b gh-pages.\nGeben Sie auch in diesem Fall in den Repository-Einstellungen auf GitHub Settings -\u0026gt; Pages im Abschnitt Source -\u0026gt; Deploy from a branch den Zweig gh-pages und den Ordner an, in dem sich die Site in diesem Zweig befindet (/ ist das Stammverzeichnis des Projekts).\n","permalink":"https://serhiinosov.codeberg.page/posts/hugo-quick-reference/","summary":"\u003ch1 id=\"einführung\"\u003eEinführung\u003c/h1\u003e\n\u003cp\u003eWarum ein statischer Website-Generator und warum \u003cem\u003eHugo\u003c/em\u003e?\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eweil es eine einfache Lösung ist, die funktioniert. Für Visitenkarten-Websites oder Blogs benötigen Sie kein komplexes Backend.\u003c/li\u003e\n\u003cli\u003eAlle Einstellungen in einer Datei \u003ccode\u003ehugo.toml\u003c/code\u003e oder \u003ccode\u003ehugo.yaml\u003c/code\u003e in einem deklarativen Stil, sodass alles sehr prägnant ist.\nDie Formate \u003cem\u003eTOML\u003c/em\u003e und \u003cem\u003eYAML\u003c/em\u003e sind so einfach, dass Sie eine Site einrichten können, ohne sich mit diesen Formaten befassen zu müssen.\u003c/li\u003e\n\u003cli\u003eSie müssen sich nicht mit \u003cem\u003eHTML\u003c/em\u003e, \u003cem\u003eCSS\u003c/em\u003e und \u003cem\u003eJS\u003c/em\u003e befassen, um Inhalte zu erstellen.\nInhalte werden in \u003ccode\u003e.md\u003c/code\u003e \u003cem\u003eMarkdown\u003c/em\u003e-Dateien erstellt. Das \u003cem\u003eMarkdown\u003c/em\u003e-Format ist deutlich einfacher. Im Internet finden Sie zahlreiche Anleitungen zur \u003cem\u003eMarkdown\u003c/em\u003e-Syntax. Zum Beispiel \u003ca href=\"https://www.markdownguide.org/basic-syntax/\"\u003ehier\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eDas Programm \u003cem\u003eHugo\u003c/em\u003e ist nur eine einzelne Binärdatei, die in \u003cem\u003eGo\u003c/em\u003e geschrieben ist und keine weiteren Abhängigkeiten aufweist. \u003cem\u003eHugo\u003c/em\u003e generiert eine Site sehr schnell.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch1 id=\"installation\"\u003eInstallation\u003c/h1\u003e\n\u003cp\u003eAuf der \u003ca href=\"https://gohugo.io/getting-started/quick-start/\"\u003eHugo-Website\u003c/a\u003e finden Sie eine hervorragende Anleitung zur Installation von \u003cem\u003eHugo\u003c/em\u003e\nfür verschiedene Betriebssysteme und verschiedene Paketmanager. Es gibt jedoch einen Vorbehalt.\u003cbr\u003e\nBei Betriebssystemen wie \u003cem\u003eDebian\u003c/em\u003e oder \u003cem\u003eMX Linux\u003c/em\u003e liegt der Schwerpunkt auf Stabilität, daher können einige Pakete in ihren Repositories veraltet sein.\u003cbr\u003e\nUnd das Erste, was Sie tun werden, nachdem Sie ein Projekt mit \u003cem\u003eHugo\u003c/em\u003e erstellt haben, ist die Installation eines \u003ca href=\"https://themes.gohugo.io/\"\u003eSite-Designs\u003c/a\u003e.\nUnd wenn \u003cem\u003eHugo\u003c/em\u003e eine veraltete Version ist, wird eine beträchtliche Anzahl von Designs nicht richtig funktionieren.\u003cbr\u003e\nDaher empfehle ich für Betriebssysteme wie \u003cem\u003eDebian\u003c/em\u003e oder \u003cem\u003eMX Linux\u003c/em\u003e, die neueste stabile Version von \u003cem\u003eHugo\u003c/em\u003e als \u003ccode\u003e.deb\u003c/code\u003e-Datei aus dem \u003ca href=\"https://github.com/gohugoio/hugo/releases\"\u003e\u003cem\u003eHugo GitHub-Repository\u003c/em\u003e\u003c/a\u003e herunterzuladen und zu installieren.\u003cbr\u003e\nZusätzlich benötigen Sie \u003ca href=\"https://git-scm.com/downloads\"\u003e\u003cem\u003eGit\u003c/em\u003e\u003c/a\u003e für Ihr Betriebssystem.\u003c/p\u003e","title":"Hugos Kurzanleitung"},{"content":" Weitere Informationen dazu folgen später hier. \u0026#x23f3;\n\u0026#x2709;\u0026#xfe0f; E-mail: sergey.nosov@tutanota.com \u0026#x260e;\u0026#xfe0f; tel: +4915123365063 \u0026#x1f4ac; WatsApp: +380671428168 \u0026#x1f310; Xing \u0026#x1f310; Codeberg \u0026#x1f310; Stackoverflow ","permalink":"https://serhiinosov.codeberg.page/about/","summary":"\u003cimg \n  src=\"/images/profile.jpg\" \n  alt=\"Profilfoto\" \n  width=\"142\" \n  height=\"180\" \n  loading=\"lazy\" \n  style=\"display:block; margin: left;\"\u003e\n\n\u003cp\u003eWeitere Informationen dazu folgen später hier. \u0026#x23f3;\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u0026#x2709;\u0026#xfe0f; E-mail: \u003ca href=\"mailto:sergey.nosov@tutanota.com\"\u003esergey.nosov@tutanota.com\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u0026#x260e;\u0026#xfe0f; tel: +4915123365063\u003c/li\u003e\n\u003cli\u003e\u0026#x1f4ac; WatsApp: +380671428168\u003c/li\u003e\n\u003cli\u003e\u0026#x1f310; \u003ca href=\"https://www.xing.com/profile/Serhii_Nosov0675/web_profiles\"\u003eXing\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u0026#x1f310; \u003ca href=\"https://codeberg.org/SerhiiNosov/\"\u003eCodeberg\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u0026#x1f310; \u003ca href=\"https://stackoverflow.com/users/4436189/serhii-nosov\"\u003eStackoverflow\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e","title":"Über mich"}]