8 lines
7.5 KiB
HTML
8 lines
7.5 KiB
HTML
<!doctype html><html lang=de-de><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge,chrome=1"><title>Deployment von Hugo auf Codeberg Pages via Woodpecker CI | Meine neue Hugo Seite</title><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="Mit Codeberg-Pages eine eigene Webseite hosten"><meta name=generator content="Hugo 0.111.3"><meta name=robots content="noindex, nofollow"><meta name=author content="Jörg Lohrer"><link rel=stylesheet href=/hugo-codeberg-pages-template/ananke/css/main.min.css><link rel=canonical href=https://joerglohrer.codeberg.page/hugo-codeberg-pages-template/ersteseite/><meta property="og:title" content="Deployment von Hugo auf Codeberg Pages via Woodpecker CI"><meta property="og:description" content="Mit Codeberg-Pages eine eigene Webseite hosten"><meta property="og:type" content="article"><meta property="og:url" content="https://joerglohrer.codeberg.page/hugo-codeberg-pages-template/ersteseite/"><meta property="article:section" content><meta itemprop=name content="Deployment von Hugo auf Codeberg Pages via Woodpecker CI"><meta itemprop=description content="Mit Codeberg-Pages eine eigene Webseite hosten"><meta itemprop=wordCount content="349"><meta itemprop=keywords content><meta name=twitter:card content="summary"><meta name=twitter:title content="Deployment von Hugo auf Codeberg Pages via Woodpecker CI"><meta name=twitter:description content="Mit Codeberg-Pages eine eigene Webseite hosten"></head><body class="ma0 avenir bg-near-white DEV"><header><div class=bg-black><nav class="pv3 ph3 ph4-ns" role=navigation><div class="flex-l justify-between items-center center"><a href=/hugo-codeberg-pages-template/ class="f3 fw2 hover-white no-underline white-90 dib">Meine neue Hugo Seite</a><div class="flex-l items-center"><div class=ananke-socials></div></div></div></nav></div></header><main class=pb7 role=main><div class="flex-l mt2 mw8 center"><article class="center cf pv5 ph3 ph4-ns mw7"><header><h1 class=f1>Deployment von Hugo auf Codeberg Pages via Woodpecker CI</h1></header><div class="nested-copy-line-height lh-copy f4 nested-links mid-gray"><h1 id=deployment-von-hugo-auf-codeberg-pages-via-woodpecker-ci>Deployment von Hugo auf Codeberg Pages via Woodpecker CI</h1><p>Beispielseite: <a href=https://joerglohrer.codeberg.page/hugo-codeberg-pages-template/ersteseite/>https://joerglohrer.codeberg.page/hugo-codeberg-pages-template/ersteseite/</a></p><h2 id=anleitung-zur-erstellung-einer-hugo-website-auf-codeberg-pages>Anleitung zur Erstellung einer Hugo-Website auf Codeberg Pages</h2><p>Diese Anleitung zeigt Dir Schritt für Schritt, wie Du eine Hugo-Website auf Codeberg Pages erstellen kannst.</p><h3 id=voraussetzungen>Voraussetzungen:</h3><ul><li>Du brauchst ein <a href=https://codeberg.org/>Codeberg</a>-Konto.</li><li>Du solltest bereit sein zu teilen</li><li>Du brauchst <a href=https://codeberg.org/Codeberg-e.V./requests>Zugang zur WoodpeckerCI</a> bei Codeberg.</li></ul><h3 id=schritte>Schritte</h3><h4 id=1-httpsrawgithubusercontentcomprimerocticonsmainiconsrepo-forked-24svg-forke-das-template-repository>1. <img src=https://raw.githubusercontent.com/primer/octicons/main/icons/repo-forked-24.svg alt> <em><strong>Forke das Template Repository</strong></em></h4><ul><li>Klicke auf den Fork-Button auf der Template-Seite:
|
|
<a href=https://codeberg.org/joerglohrer/hugo-codeberg-pages-template>https://codeberg.org/joerglohrer/hugo-codeberg-pages-template</a>
|
|
Dadurch wird eine Kopie des Repositorys in deinem eigenen Codeberg-Konto erstellt.</li></ul><h4 id=2-ändere-die-hugotoml-datei>2. <em><strong>Ändere die <code>hugo.toml</code>-Datei</strong></em></h4><p>Öffne die <code>hugo.toml</code>-Datei i<img src=https://raw.githubusercontent.com/primer/octicons/main/icons/git-branch-24.svg alt> <em><strong>main</strong></em>-Branch deines Repositorys.
|
|
Ändere die erste Zeile in folgendem Format:<br><code>baseURL = 'https://UserName.codeberg.page/RepoName</code>
|
|
Ersetze <code>UserName</code> durch Deinen Codeberg-Benutzernamen und <code>RepoName</code> durch den gewünschten Namen deiner Website gleichlautend mit dem Namen des Repository.</p><h4 id=3-generiere-einen-zugriffstoken>3. Generiere einen Zugriffstoken:</h4><p>Melden Dich bei Deinem Codeberg-Konto an und navigiere zu Einstellungen > Anwendungen: <a href=https://codeberg.org/user/settings/applications>https://codeberg.org/user/settings/applications</a>.
|
|
Klicke auf die Schaltfläche “Neue Anwendung erstellen”.
|
|
Geb Deiner Anwendung einen Namen, z. B. “Hugo-Website”. Aktiviere die Option “Lesen und Schreiben” unter “repository”. Klicke auf die Schaltfläche “Token generieren”. Kopiere den generierten Zugriffstoken.</p><h4 id=4-füge-das-repository-zu-einer-neuen-pipeline-hinzu>4. Füge das Repository zu einer neuen Pipeline hinzu</h4><p>Melde Dich bei CI/CD: <a href=https://ci.codeberg.org/>https://ci.codeberg.org/</a> an. Klicke auf die Schaltfläche “+ Repository hinzufügen”. Wähle dein Repository aus der Liste aus und klicke auf “Aktivieren”.
|
|
Wähle die Einstellungen zur gerade erstellten Pipeline aus. Klicke auf “Allgemein” und gib bei Pipeline-Pfad <code>.woodpecker.yml</code>ein. Speiche die Einstellung füge zwei Geheimnisse hinzu:</p><ul><li>Name: <code>codeberg_token</code> - Wert: der in Schritt 3. generierte erstellten Zugriffstoken</li><li>Name: <code>mail</code> - Wert: Deine Mailadresse</li></ul><h4 id=5-erstelle-markdown-dateien>5. Erstelle Markdown-Dateien</h4><p>Navigiere im Repository zu Verzeichnis <code>/content</code>. Erstelle hier beliebige Markdown-Dateien (<code>*.md</code>). Diese Dateien werden beim Pushen in das Repository automatisch durch zu einer statischen Webseite im <img src=https://raw.githubusercontent.com/primer/octicons/main/icons/git-branch-24.svg alt> <em><strong>pages</strong></em>-Branch verarbeitet</p><h4 id=fertig>Fertig!</h4><p>Deine aktualisierte Seite ist unter: <code>https://UserName.codeberg.page/RepoName</code> erreichbar. Sie wird automatisch aktualisiert, wenn Du Änderungen an den (Markdown-)Dateien im <img src=https://raw.githubusercontent.com/primer/octicons/main/icons/git-branch-24.svg alt> <em><strong>main</strong></em>-Branch vornimmst.</p><h4 id=noch-ein-paar-hinweise>Noch ein paar Hinweise</h4><ul><li>Hugo-Dokumentation <a href=https://gohugo.io/documentation/>https://gohugo.io/documentation/</a></li><li>Codeberg Pages-Dokumentation <a href=https://docs.codeberg.org/codeberg-pages/>https://docs.codeberg.org/codeberg-pages/</a></li><li>Codeberg’s CI Dokumentation <a href=https://docs.codeberg.org/ci/>https://docs.codeberg.org/ci/</a></li><li>Woodpecker Beispiele (auch die verwendete <code>.woodpecker.yaml</code> für Hugo): <a href=https://codeberg.org/Codeberg-CI/examples>https://codeberg.org/Codeberg-CI/examples</a>)</li></ul><h4 id=tipps>Tipps:</h4><ul><li><em><strong>Design:</strong></em> Passe die Vorlagendateien im Verzeichnis themes an, um deiner Website einen individuellen Look zu geben.</li><li><em><strong>Features:</strong></em> Nutze Hugo-Module, um deine Website zu erweitern.</li><li><em><strong>Eigene Domain:</strong></em> Verknüpfe deine Website mit einem eigenen Domainnamen.</li></ul></div></article></div></main><footer class="bg-black bottom-0 w-100 pa3" role=contentinfo><div class="flex justify-between"><a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href=https://joerglohrer.codeberg.page/hugo-codeberg-pages-template/>© Meine neue Hugo Seite 2024</a><div><div class=ananke-socials></div></div></div></footer></body></html> |