{"id":66536,"date":"2023-10-20T08:30:17","date_gmt":"2023-10-20T07:30:17","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=66536&#038;preview=true&#038;preview_id=66536"},"modified":"2023-10-27T16:05:35","modified_gmt":"2023-10-27T15:05:35","slug":"hugo-stsh-mit-circleci","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/","title":{"rendered":"Wie du eine Hugo-Site kostenlos auf Kinsta mit dem statischen Seiten Hosting bereitstellst"},"content":{"rendered":"<p>Hugo ist ein beliebter Open-Source Static Site Generator (SSG), der Entwicklern dabei hilft, Websites schnell und effizient zu erstellen und zu verwalten. Er kann zur Erstellung von Blogs, Portfolios und allen Arten von pers\u00f6nlichen Websites verwendet werden, die keine dynamischen Daten ben\u00f6tigen.<\/p>\n<p>Wenn du Websites mit Hugo erstellst, m\u00f6chtest du sie sicher online hosten, damit du sie mit allen teilen kannst, die darauf zugreifen m\u00fcssen. Hier kommt das statische Seiten Hosting von Kinsta ins Spiel!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Was ist Kinsta&#8217;s statisches Seiten Hosting?<\/h2>\n<p>Kinsta&#8217;s statische Seiten Hosting ist ein kostenloser Dienst, der sich auf das Hosting <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-eine-statische-website\/\">statischer Websites<\/a> spezialisiert hat. Dazu werden vorgefertigte <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML-<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS-<\/a> und <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript-Dateien<\/a> bereitgestellt, die sich nicht dynamisch ver\u00e4ndern. Du verbindest ein Repository, das bei einem Git-Provider (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">BitBucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> oder <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>) gehostet wird, mit deinem Kinsta-Konto und stellst deine statischen Website-Dateien ins Internet.<\/p>\n<p>Das statische Seiten Hosting von Kinsta kann automatisch Websites aus SSGs erstellen, die auf Node.js basieren. F\u00fcr andere wie Hugo, die in der Programmiersprache Go (Golang) geschrieben sind, musst du einen anderen Ansatz finden.<\/p>\n<p>In diesem Artikel erf\u00e4hrst du, wie du deine Hugo-Site mit Kinsta&#8217;s <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">statischem Seiten Hosting<\/a>\u00a0kostenlos auf Kinsta bereitstellen kannst!<\/p>\n<h2>Bereitstellen deiner Hugo-Site mit Kinsta&#8217;s statischem Seiten Hosting<\/h2>\n<p>Es gibt drei M\u00f6glichkeiten, deine Hugo-Site auf dem statischen\u00a0 Seiten Hosting von Kinsta bereitzustellen:<\/p>\n<ol start=\"1\">\n<li>Erstelle deine Website mit Continuous Integration and Continuous Deployment (CI\/CD) und stelle sie dann bereit.<\/li>\n<li>Nutze die Entwicklerabh\u00e4ngigkeit <a href=\"https:\/\/www.npmjs.com\/package\/hugo-bin\" target=\"_blank\" rel=\"noopener noreferrer\">hugo-bin<\/a>.<\/li>\n<li>Biete lokal erstellte statische Dateien an.<\/li>\n<\/ol>\n<p>In diesem Artikel gehen wir alle diese M\u00f6glichkeiten durch.<\/p>\n<h3>Voraussetzungen<\/h3>\n<p>Um diesem Tutorial folgen zu k\u00f6nnen, setzen wir voraus, dass du Folgendes hast<\/p>\n<ul>\n<li>Erfahrung mit Hugo und Git.<\/li>\n<li>Eine Hugo-Site, die lokal l\u00e4uft.<\/li>\n<\/ul>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Wenn du mehr \u00fcber Hugo erfahren m\u00f6chtest, empfehlen wir dir, den Artikel &#8222;<a href=\"https:\/\/kinsta.com\/de\/blog\/hugo-statische-seite\/\">How To Build a Blazing Fast Static Site With Hugo<\/a>&#8220; zu lesen.<\/p>\n<\/aside>\n\n<h2>Erstelle deine Website mit CircleCI und stelle sie auf Kinsta bereit<\/h2>\n<p>F\u00fcr die erste Methode verwenden wir <a href=\"https:\/\/circleci.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CircleCI<\/a> als CI\/CD-Tool. Bei dieser Methode erstellst du einen CircleCI-Workflow, der deine Hugo-Site in einem neuen Zweig namens <code>deploy<\/code> erstellt, und konfigurierst Kinsta, um die statischen Dateien von diesem Zweig aus zu verteilen.<\/p>\n<h3>Vorteile der CI\/CD-Methode<\/h3>\n<p>Mit dieser Methode musst du deine Website nicht mehr lokal erstellen, bevor du sie in dein Git-Repository stellst. Normalerweise k\u00fcmmert sich Kinsta bei SSGs, die auf Node.js basieren, um die Erstellung der Website, aber bei anderen SSGs wie Hugo kann die Verwendung eines Workflows helfen, den Erstellungsprozess automatisch zu erledigen.<\/p>\n<p>Au\u00dferdem kannst du deiner CI\/CD-Konfigurationsdatei weitere Jobs hinzuf\u00fcgen, zum Beispiel zum Linting und Testen deines Codes. Au\u00dferdem garantierst du, dass deine Bereitstellung nur dann aktualisiert wird, wenn die CI\/CD-Pipeline erfolgreich abgeschlossen wurde.<\/p>\n<h3>Schritt 1: Erstelle die Konfigurationsdatei<\/h3>\n<p>Beginne mit der Erstellung eines Ordners <strong>.circleci<\/strong> im Stammverzeichnis deines Hugo-Projekts. In diesem Ordner erstellst du eine <strong>config.yml-Datei<\/strong>, um die Konfiguration deines Workflows zu definieren.<\/p>\n<h3>Schritt 2: Pushe deinen Code in ein Git-Repository<\/h3>\n<p>Erstelle ein Git-Repository mit deinem bevorzugten Git-Anbieter und schiebe deinen Code in das Repository.<\/p>\n<h3>Schritt 3: Erstelle einen verwaisten Zweig<\/h3>\n<p>Als N\u00e4chstes erstellst du einen leeren <a href=\"https:\/\/git-scm.com\/docs\/git-checkout#Documentation\/git-checkout.txt---orphanltnew-branchgt\" target=\"_blank\" rel=\"noopener noreferrer\">verwaisten Zweig<\/a> mit dem Namen <code>deploy<\/code>, in den die statischen Dateien f\u00fcr die Bereitstellung verschoben werden. F\u00fchre die folgenden Befehle im Terminal deines Projekts aus:<\/p>\n<pre><code class=\"language-bash\">git switch --orphan deploy\ngit commit --allow-empty -m \"Initial commit on deploy branch\"\ngit push -u origin deploy<\/code><\/pre>\n<p>F\u00fcge diesem Zweig keine Dateien hinzu; er wird vom CircleCI-Workflow automatisch mit dem Inhalt des von Hugo erstellten <strong>\u00f6ffentlichen<\/strong> Ordners gef\u00fcllt.<\/p>\n<h3>Schritt 4: Erstelle ein CircleCI-Konto<\/h3>\n<p>Besuche die CircleCI-Website und erstelle ein Konto, falls du noch keins hast. Du kannst dich mit deinem bevorzugten Git-Anbieter anmelden, was den Zugriff auf deine Repositories ohne weitere Konfiguration erleichtert.<br \/>\n<aside data-P7qw=\"Z2hIei1vOVZOS1NNZXIyQkdZRFg=\" class=\"Wzk4Miw5NDVd\" data-FY=\"RjNDUFlCLXRBeg==\" data--5um.TI=\"XzdrV2p5VjF4NnozYzRVcFEuVEtG\" data-Ug5=\"NzZMNG9sU3Z0RQ==\" data-npsJC4=\"dDhOMk1RRTV4Rlc=\" data-nUVl109=\"MVB5TTZPWUxxVDl6ZFpLQmhrdldVRA==\" data-a=\"NzlSVnp2dEV1a3FPWFktTi4=\" id=\"NjY1MzY=\" data-r3koi=\"Im1pZGRsZSI=|ImRlX0RFIg==\"><\/aside><\/p>\n<h3>Schritt 5: Konfiguriere dein Repository<\/h3>\n<p>Nachdem du dich eingeloggt hast, gehst du zu deinem <a href=\"https:\/\/app.circleci.com\/dashboard\" target=\"_blank\" rel=\"noopener noreferrer\">CircleCI-Dashboard<\/a>, klickst in der linken Seitenleiste auf <strong>Projekte<\/strong> und w\u00e4hlst das Repository aus, das du konfigurieren m\u00f6chtest. CircleCI wird deine Konfigurationsdatei automatisch erkennen.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/configure-repo-circleci.jpg\" alt=\"Konfiguriere dein Repository mit CircleCI\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Konfiguriere dein Repository mit CircleCI<\/figcaption><\/figure>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Projekt ein<\/strong> richten, um CircleCI Zugriff auf deine Codebasis zu gew\u00e4hren und Workflows bei Code\u00e4nderungen auszuf\u00fchren.<\/p>\n<h3>Schritt 6: Definiere die CircleCI-Konfiguration<\/h3>\n<p>Du hast jetzt eine CircleCI-Konfigurationsdatei erstellt. Lass uns ihren Inhalt erstellen. Vergewissere dich, dass du dich in deinem Standardzweig befindest (nicht im <code>deploy<\/code> Zweig) und beginne mit der Definition der CircleCI-Version, die derzeit 2.1 ist:<\/p>\n<pre><code class=\"language-yaml\">version: 2.1<\/code><\/pre>\n<h3>Schritt 7: Executors definieren<\/h3>\n<p>Da es sich um ein Hugo-Projekt handelt, musst du einen Executor definieren, der die Jobs ausf\u00fchrt. Definiere die <code>hugo-executor<\/code> hier, damit du sie nicht f\u00fcr jeden Job neu definieren musst. Dieser Executor verwendet ein Docker-Image (<code>cibuilds\/hugo:latest<\/code>), um eine einheitliche Umgebung f\u00fcr den Aufbau der Hugo-Site zu schaffen:<\/p>\n<pre><code class=\"language-yaml\">executors:\n  hugo-executor:\n    docker:\n      - image: cibuilds\/hugo:latest<\/code><\/pre>\n<h3>Schritt 8: Jobs definieren<\/h3>\n<p>Als n\u00e4chstes definierst du zwei Jobs: <code>build<\/code> und <code>push build<\/code>. Diese Jobs legen die Schritte fest, die in jedem Job ausgef\u00fchrt werden sollen:<\/p>\n<pre><code class=\"language-yaml\">jobs:\n  build:\n    executor: hugo-executor\n\n  push build:\n    executor: hugo-executor<\/code><\/pre>\n<h4>Build Job:<\/h4>\n<p>Dieser Job ist f\u00fcr die Erstellung deiner Hugo-Site verantwortlich und speichert die erzeugten statischen Dateien im Arbeitsbereich zwischen, damit sie sp\u00e4ter im Job <code>push build<\/code> verwendet werden k\u00f6nnen.<\/p>\n<pre><code class=\"language-yaml\">build:\n  executor: hugo-executor\n  steps:\n    - checkout\n\n    - run:\n        name: Update theme\n        command: git submodule update --init --recursive\n\n    - run:\n        name: Build Hugo site\n        command: hugo --destination=workspace\/public\n\n    # Persist the 'build' directory to the workspace\n    - persist_to_workspace:\n        root: workspace\n        paths:\n          - public<\/code><\/pre>\n<p>Der Job oben gibt an, dass er den zuvor definierten <code>hugo-executor<\/code> Executor verwendet. Und f\u00fchrt dann vier Hauptschritte aus:<\/p>\n<ul>\n<li><code>checkout<\/code>: Dieser Schritt checkt den Quellcode deines Projekts aus dem GitHub-Repository aus.<\/li>\n<li><code>Update theme<\/code>: Dieser Schritt initialisiert und aktualisiert Git-Submodule (falls vorhanden), um sicherzustellen, dass dein Hugo-Theme aktuell ist. Dies ist n\u00fctzlich, wenn deine Hugo-Site Gitmodules verwendet, um auf das verwendete Theme zu verweisen, anstatt gro\u00dfe Dateien von Themes zu pushen, die bereits auf GitHub verf\u00fcgbar sind.<\/li>\n<li><code>Build Hugo site<\/code>: In diesem Schritt wird die Hugo-Site erstellt und der Zielordner als <strong>workspace\/public<\/strong> angegeben.<\/li>\n<li><code>persist_to_workspace<\/code>: In diesem Schritt wird das <strong>\u00f6ffentliche<\/strong> Verzeichnis (Ausgabe des Hugo-Builds) im Arbeitsbereich gespeichert, damit es sp\u00e4ter im <code>push build<\/code> Job verwendet werden kann.<\/li>\n<\/ul>\n<h4>Push-Build-Job:<\/h4>\n<p>Der Job <code>push build<\/code> ist daf\u00fcr verantwortlich, die erstellte Website in einen verwaisten Zweig (<code>deploy<\/code>) in deinem GitHub-Repository zu verschieben. Auf diese Weise verbleibt dein Code auf dem Standard-Zweig und der Zweig <code>deploy<\/code> enth\u00e4lt nur die statischen Dateien deiner Website.<\/p>\n<pre><code class=\"language-yaml\">push build:\n  executor: hugo-executor\n  steps:\n    - attach_workspace:\n        at: workspace\n\n    - run:\n        name: Push build folder to GitHub\n        command: |\n          # Configure Git identity (replace &lt;GitHubUsername&gt; with your actual username)\n          git config --global user.name \"&lt;GitHubUsername&gt;\"\n          git config --global user.email \"&lt;GitHubUsername&gt;@users.noreply.github.com\"\n\n          # Clone the repository (replace &lt;your-repo-name&gt; with your actual repository URL)\n          git clone --branch deploy --depth 1 https:\/\/&lt;GitHubUsername&gt;:${GITHUB_TOKEN}@github.com\/&lt;GitHubUsername&gt;\/&lt;your-repo-name&gt;.git deployment\n\n          # Copy the 'public' directory to the deployment folder\n          cp -R workspace\/public deployment\n\n          # Navigate to the deployment folder\n          cd deployment\n\n          # Commit and push changes\n          git add .\n          git commit -m \"Auto generated from ${CIRCLE_SHA1}\"\n          git push<\/code><\/pre>\n<p>Der obige Job macht Folgendes:<\/p>\n<ul>\n<li><code>attach_workspace<\/code>: Dieser Schritt f\u00fcgt den Arbeitsbereich hinzu, in dem der Job <code>build<\/code> das <strong>\u00f6ffentliche<\/strong> Verzeichnis gespeichert hat.<\/li>\n<li><code>Push build folder to GitHub<\/code>: Dieser Schritt f\u00fchrt mehrere Git-Operationen durch:\n<ul>\n<li>Er konfiguriert die Git-Identit\u00e4t mit deinem GitHub-Benutzernamen und deiner E-Mail-Adresse.<\/li>\n<li>Klont dein GitHub-Repository in einen Ordner namens <strong>deployment<\/strong> auf dem CircleCI-Runner-Rechner.<\/li>\n<li>Kopiert den Inhalt des Verzeichnisses <strong>workspace\/public<\/strong> (die erstellte Hugo-Site) in den Ordner <strong>deployment<\/strong>.<\/li>\n<li>\u00c4ndert das Arbeitsverzeichnis in <strong>deployment<\/strong>.<\/li>\n<li>\u00dcbertr\u00e4gt die \u00c4nderungen mit einer Meldung, die darauf hinweist, dass es sich um einen automatisch generierten Commit von CircleCI handelt.<\/li>\n<li>Verschiebt die \u00c4nderungen in einen neuen Zweig in deinem GitHub-Repository.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Ersetze <code>&lt;GitHubUsername&gt;<\/code> und <code>&lt;your-repo-name&gt;<\/code> durch deinen tats\u00e4chlichen GitHub-Benutzernamen und den Namen deines Repositorys. Stelle au\u00dferdem sicher, dass du ein <a href=\"https:\/\/github.com\/settings\/tokens\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub-Zugangs-Token<\/a> erstellst, damit CircleCI auf dein GitHub-Konto zugreifen kann.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/scopes-github-access-token.png\" alt=\"Definiere die Bereiche f\u00fcr das GitHub-Zugriffstoken\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Definiere die Bereiche f\u00fcr das GitHub-Zugriffstoken<\/figcaption><\/figure>\n<p>F\u00fcge dann das Token <a href=\"https:\/\/kinsta.com\/de\/blog\/react-continuous-deployment\/#storing-environment-variables-with-circleci\">als Umgebungsvariable<\/a> mit dem Namen <code>GITHUB_TOKEN<\/code> in deinen CircleCI <strong>Projekteinstellungen<\/strong> hinzu.<\/p>\n<h3>Schritt 9: Definiere den Workflow<\/h3>\n<p>Nachdem du deine Jobs eingerichtet hast, geht es in der n\u00e4chsten Phase darum, <a href=\"https:\/\/kinsta.com\/de\/blog\/react-continuous-deployment\/#step-5-workflow-configuration\">deinen Workflow zu konfigurieren<\/a>. Fahre mit deiner CircleCI-Konfiguration fort und erstelle einen Workflow, der den Job <code>build<\/code> ausl\u00f6st, wenn es Code-\u00c4nderungen im Zweig <code>main<\/code> gibt, und der voraussetzt, dass der Job <code>build<\/code> erfolgreich abgeschlossen wurde, bevor der Job <code>push build<\/code> ausgef\u00fchrt wird:<\/p>\n<pre><code class=\"language-yaml\">workflows:\n  version: 2\n  build-and-deploy:\n    jobs:\n      - build:\n          filters:\n            branches:\n              only:\n                - main\n      - push build:\n          requires:\n            - build<\/code><\/pre>\n<h3>Schritt 10: Commit und Push<\/h3>\n<p>Sobald dein Workflow erfolgreich konfiguriert ist, \u00fcbergibst du deine \u00c4nderungen an dein Git-Repository und stellst sie dort bereit. CircleCI erkennt automatisch das Vorhandensein der Konfigurationsdatei und l\u00f6st deine definierten Workflows bei Code\u00e4nderungen aus.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/circleci-pipeline.jpg\" alt=\"Details zur CircleCI-Pipeline\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Details zur CircleCI-Pipeline<\/figcaption><\/figure>\n<p>Wenn du dein GitHub-Repository \u00fcberpr\u00fcfst, befindet sich im Zweig <code>deploy<\/code> bereits der <strong>\u00f6ffentliche<\/strong> Ordner, der die statischen Dateien enth\u00e4lt.<\/p>\n<p>Du kannst die <a href=\"https:\/\/github.com\/olawanlejoel\/hugo-try-circleci\/blob\/main\/.circleci\/config.yml\" target=\"_blank\" rel=\"noopener noreferrer\">komplette CircleCI-Konfiguration in diesem Beispiel-Repository<\/a> \u00fcberpr\u00fcfen.<\/p>\n<h3>Schritt 11: Statische Dateien auf Kinsta bereitstellen<\/h3>\n<p>Die Bereitstellung auf Kinsta ist in Sekundenschnelle erledigt, vor allem, da die statischen Dateien bereits erstellt sind. Befolge diese Schritte, um deine Hugo-Site mit dem <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">statischen Seiten Hosting<\/a> kostenlos bereitzustellen:<\/p>\n<ol start=\"1\">\n<li>Logge dich ein oder erstelle ein Konto, um dein <a href=\"https:\/\/my.kinsta.com\/?lang=de\">MyKinsta-Dashboard<\/a> zu sehen.<\/li>\n<li>Autorisiere Kinsta bei deinem Git-Anbieter.<\/li>\n<li>Klicke in der linken Seitenleiste auf <strong>Static Sites<\/strong> und dann auf <strong>Site hinzuf\u00fcgen<\/strong>.<\/li>\n<li>W\u00e4hle das Repository und den Zweig aus, von dem aus du bereitstellen m\u00f6chtest ( <code>deploy<\/code> ).<\/li>\n<li>Gib deiner Site einen eindeutigen Namen und klicke auf <strong>Weiter<\/strong>.<\/li>\n<li>Lass die Felder <strong>Build command<\/strong> und <strong>Node version<\/strong> leer und gib als <strong>Ver\u00f6ffentlichungsverzeichnis<\/strong> <code>public<\/code> an.<\/li>\n<li>Klicke abschlie\u00dfend auf <strong>Site erstellen<\/strong>.<\/li>\n<\/ol>\n<p>Und das war&#8217;s! Innerhalb weniger Sekunden hast du eine bereitgestellte Website. Du erh\u00e4ltst einen Link, \u00fcber den du auf die bereitgestellte Version deiner Website zugreifen kannst. Du kannst sp\u00e4ter deine <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">eigene Domain<\/a> und dein <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">SSL-Zertifikat<\/a> hinzuf\u00fcgen, wenn du m\u00f6chtest.<\/p>\n<h2>Hugo-Bin zum Erstellen und Bereitstellen deiner Hugo-Site auf Kinsta verwenden<\/h2>\n<p>Das <a href=\"https:\/\/www.npmjs.com\/package\/hugo-bin\" target=\"_blank\" rel=\"noopener noreferrer\">Hugo-bin-Paket<\/a> ist ein bin\u00e4rer Wrapper f\u00fcr Hugo. Es erm\u00f6glicht dir, dein Hugo-Projekt mit Node.js-Befehlen zu bauen und bereitzustellen. Bei dieser Methode brauchst du kein CI\/CD-Tool, um deine Website zu erstellen, bevor du sie auf Kinsta&#8217;s statischem Seiten Hosting bereitstellst.<\/p>\n<p>So verwendest du das Hugo-bin-Paket in deinem Hugo-Projekt:<\/p>\n<ol start=\"1\">\n<li>Initialisiere Node.js im Stammverzeichnis deines Projekts, indem du den Befehl <code>npm init -y<\/code> ausf\u00fchrst.<\/li>\n<li>Installiere dann Hugo-bin als Entwickler-Abh\u00e4ngigkeit in deinem Projekt, indem du diesen Befehl ausf\u00fchrst:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm i -D hugo-bin<\/code><\/pre>\n<ol start=\"3\">\n<li>F\u00fcge die folgenden Skriptbefehle zu deiner <strong>package.json<\/strong> Datei hinzu:<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n    \"build\": \"hugo\",\n    \"create\": \"hugo new\",\n    \"serve\": \"hugo server\"\n  }<\/code><\/pre>\n<p>Damit kann Kinsta deine Hugo-Site bauen und bereitstellen, ohne dass du deine Dateien vor der Bereitstellung bauen musst.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Die Verwendung von Git-Submodulen mit unserem Static Site Hosting und Anwendungs-Hosting ist derzeit nicht m\u00f6glich. Stelle sicher, dass du deine Themedateien lokal in deinem Git-Repository hinzuf\u00fcgst, damit sie mit Kinsta funktionieren.<\/p>\n<\/aside>\n\n<p>Wenn du alles erledigt hast, schiebe deinen Code in dein Git-Repository. Befolge diese Schritte, um deine statische Website auf Kinsta bereitzustellen:<\/p>\n<ol start=\"1\">\n<li>Logge dich ein oder erstelle ein Konto, um dein <a href=\"https:\/\/my.kinsta.com\/?lang=de\">MyKinsta-Dashboard<\/a> zu sehen.<\/li>\n<li>Autorisiere Kinsta mit deinem Git-Anbieter.<\/li>\n<li>Klicke in der linken Seitenleiste auf <strong>Static Sites<\/strong> und dann auf <strong>Site hinzuf\u00fcgen<\/strong>.<\/li>\n<li>W\u00e4hle das Repository und den Zweig aus, von dem aus du bereitstellen m\u00f6chtest.<\/li>\n<li>Gib deiner Site einen eindeutigen Namen.<\/li>\n<li>F\u00fcge die Build-Einstellungen in folgendem Format hinzu:\n<ul>\n<li><strong>Build-Befehl:<\/strong> npm run build<\/li>\n<li><strong>Node-Version:<\/strong> 18.16.0<\/li>\n<li><strong>Ver\u00f6ffentlichungsverzeichnis:<\/strong> public<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Zum Schluss klickst du auf <strong>Website erstellen<\/strong>.<\/li>\n<\/ol>\n<p>Und das war&#8217;s! Du hast jetzt innerhalb von wenigen Sekunden eine Website eingerichtet.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Wenn du das Hugo-bin-Paket verwendest, kannst du deine Website auch mit unserem <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Anwendungs-Hosting<\/a> Service bereitstellen. Das kann sich als sehr vorteilhaft erweisen, denn du profitierst von den erweiterten Funktionen unseres Anwendungs-Hosting. Zum Beispiel Skalierbarkeit, individuelle Bereitstellung mit einem Dockerfile und <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">umfassende Analysen<\/a> mit Echtzeit- und historischen Daten.<\/p>\n<\/aside>\n\n<h2>Deine statischen Dateien nur auf Kinsta bereitstellen<\/h2>\n<p>Schlie\u00dflich gibt es noch eine weitere Methode, um deine Hugo-Website auf Kinsta bereitzustellen: Du erstellst deine Website lokal und stellst sie dann auf Kinsta bereit. Bei diesem Verfahren wird ein <strong>\u00f6ffentlicher<\/strong> Ordner im Stammverzeichnis deines Projekts erstellt. Der gr\u00f6\u00dfte Nachteil dieser Methode ist jedoch, dass du deine Website vor jedem Push lokal erstellen musst, was im Vergleich zu anderen Methoden, die den Erstellungsprozess automatisieren, zeitaufw\u00e4ndig und weniger bequem sein kann.<\/p>\n<p>Standardm\u00e4\u00dfig ist der <strong>\u00f6ffentliche<\/strong> Ordner von deinem Git-Repository ausgeschlossen, da er in deiner <strong>.gitignore-Datei<\/strong> enthalten ist. So nimmst du ihn in dein Repository auf und stellst deine Website auf Kinsta bereit:<\/p>\n<ol start=\"1\">\n<li>Entferne den <strong>\u00f6ffentlichen<\/strong> Ordner aus deiner <strong>.gitignore-Datei<\/strong>.<\/li>\n<li>Befolge die oben beschriebenen Schritte zur Bereitstellung.<\/li>\n<li>Stelle das Repository auf Kinsta bereit und achte darauf, dass die Felder <strong>Build command<\/strong> und <strong>Node version<\/strong> leer bleiben, da deine Website bereits gebaut ist.<\/li>\n<li>Gib das <strong>Verzeichnis f\u00fcr die Ver\u00f6ffentlichung<\/strong> als <code>public<\/code> an.<\/li>\n<\/ol>\n<p>Alternativ kannst du auch nur die statischen Dateien in dein GitHub-Repository pushen. In diesem Fall musst du kein Git-Repository im Stammverzeichnis deines Projekts einrichten. Du musst nur <code>git init<\/code> im <strong>\u00f6ffentlichen<\/strong> Ordner ausf\u00fchren. So kannst du die Versionskontrolle f\u00fcr deine statischen Dateien vom Rest deines Projekts getrennt halten.<\/p>\n<p>Wenn du in diesem Szenario die Dateien separat pushen willst, ohne sie in einem <strong>\u00f6ffentlichen<\/strong> Ordner abzulegen, gibst du beim Deployment auf Kinsta das <strong>Verzeichnis Publish<\/strong> als <code>.<\/code> an. Diese Schreibweise steht f\u00fcr den Stammordner, und Kinsta wird die Dateien entsprechend bereitstellen.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>In diesem Artikel wurden drei effektive Methoden vorgestellt, mit denen du deine Hugo-Website kostenlos auf der Kinsta-Plattform f\u00fcr statische Websites bereitstellen kannst. Du hast die Flexibilit\u00e4t, die Methode zu w\u00e4hlen, die am besten zu deinen Anforderungen passt. Ausf\u00fchrliche Informationen zur Erstellung einer blitzschnellen statischen Website mit Hugo findest <a href=\"https:\/\/kinsta.com\/de\/blog\/hugo-statische-seite\/\">du in unserem umfassenden Leitfaden<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hugo ist ein beliebter Open-Source Static Site Generator (SSG), der Entwicklern dabei hilft, Websites schnell und effizient zu erstellen und zu verwalten. Er kann zur Erstellung &#8230;<\/p>\n","protected":false},"author":287,"featured_media":66537,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[982,945],"class_list":["post-66536","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-statische-seiten-generatoren","topic-headless-cms"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie du deine Hugo-Website kostenlos auf Kinsta bereitstellst - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"In diesem Leitfaden erf\u00e4hrst du, wie du deine Hugo-Website m\u00fchelos und kostenlos auf dem statischen Seiten Hosting von Kinsta einrichten kannst. Reduziere noch heute deine Hosting-Kosten!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie du eine Hugo-Site kostenlos auf Kinsta mit dem statischen Seiten Hosting bereitstellst\" \/>\n<meta property=\"og:description\" content=\"In diesem Leitfaden erf\u00e4hrst du, wie du deine Hugo-Website m\u00fchelos und kostenlos auf dem statischen Seiten Hosting von Kinsta einrichten kannst. Reduziere noch heute deine Hosting-Kosten!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-20T07:30:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-27T15:05:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"In diesem Leitfaden erf\u00e4hrst du, wie du deine Hugo-Website m\u00fchelos und kostenlos auf dem statischen Seiten Hosting von Kinsta einrichten kannst. Reduziere noch heute deine Hosting-Kosten!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"11\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Wie du eine Hugo-Site kostenlos auf Kinsta mit dem statischen Seiten Hosting bereitstellst\",\"datePublished\":\"2023-10-20T07:30:17+00:00\",\"dateModified\":\"2023-10-27T15:05:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/\"},\"wordCount\":2069,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/\",\"name\":\"Wie du deine Hugo-Website kostenlos auf Kinsta bereitstellst - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\",\"datePublished\":\"2023-10-20T07:30:17+00:00\",\"dateModified\":\"2023-10-27T15:05:35+00:00\",\"description\":\"In diesem Leitfaden erf\u00e4hrst du, wie du deine Hugo-Website m\u00fchelos und kostenlos auf dem statischen Seiten Hosting von Kinsta einrichten kannst. Reduziere noch heute deine Hosting-Kosten!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generatoren f\u00fcr statische Seiten\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/statische-seiten-generatoren\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie du eine Hugo-Site kostenlos auf Kinsta mit dem statischen Seiten Hosting bereitstellst\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie du deine Hugo-Website kostenlos auf Kinsta bereitstellst - Kinsta\u00ae","description":"In diesem Leitfaden erf\u00e4hrst du, wie du deine Hugo-Website m\u00fchelos und kostenlos auf dem statischen Seiten Hosting von Kinsta einrichten kannst. Reduziere noch heute deine Hosting-Kosten!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/","og_locale":"de_DE","og_type":"article","og_title":"Wie du eine Hugo-Site kostenlos auf Kinsta mit dem statischen Seiten Hosting bereitstellst","og_description":"In diesem Leitfaden erf\u00e4hrst du, wie du deine Hugo-Website m\u00fchelos und kostenlos auf dem statischen Seiten Hosting von Kinsta einrichten kannst. Reduziere noch heute deine Hosting-Kosten!","og_url":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-10-20T07:30:17+00:00","article_modified_time":"2023-10-27T15:05:35+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"In diesem Leitfaden erf\u00e4hrst du, wie du deine Hugo-Website m\u00fchelos und kostenlos auf dem statischen Seiten Hosting von Kinsta einrichten kannst. Reduziere noch heute deine Hosting-Kosten!","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"11\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Wie du eine Hugo-Site kostenlos auf Kinsta mit dem statischen Seiten Hosting bereitstellst","datePublished":"2023-10-20T07:30:17+00:00","dateModified":"2023-10-27T15:05:35+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/"},"wordCount":2069,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/","url":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/","name":"Wie du deine Hugo-Website kostenlos auf Kinsta bereitstellst - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","datePublished":"2023-10-20T07:30:17+00:00","dateModified":"2023-10-27T15:05:35+00:00","description":"In diesem Leitfaden erf\u00e4hrst du, wie du deine Hugo-Website m\u00fchelos und kostenlos auf dem statischen Seiten Hosting von Kinsta einrichten kannst. Reduziere noch heute deine Hosting-Kosten!","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/hugo-stsh-mit-circleci\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Generatoren f\u00fcr statische Seiten","item":"https:\/\/kinsta.com\/de\/thema\/statische-seiten-generatoren\/"},{"@type":"ListItem","position":3,"name":"Wie du eine Hugo-Site kostenlos auf Kinsta mit dem statischen Seiten Hosting bereitstellst"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/66536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=66536"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/66536\/revisions"}],"predecessor-version":[{"id":66611,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/66536\/revisions\/66611"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66536\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/66537"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=66536"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=66536"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=66536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}