{"id":59399,"date":"2023-02-23T12:17:14","date_gmt":"2023-02-23T11:17:14","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=59399&#038;preview=true&#038;preview_id=59399"},"modified":"2025-09-01T16:41:42","modified_gmt":"2025-09-01T15:41:42","slug":"docusaurus","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/","title":{"rendered":"Erstellen und Anpassen einer Docusaurus-Seite (mit Blog-Funktion)"},"content":{"rendered":"<p>F\u00fcr einfache Websites, Anwendungen und andere kleine Projekte entscheiden sich immer mehr Entwickler\/innen f\u00fcr <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-vs-statisches-html\/\">statische Website-Generatoren statt f\u00fcr WordPress<\/a> oder <a href=\"https:\/\/kinsta.com\/de\/blog\/cms-software\/\">andere Content-Management-Systeme (CMS)<\/a>. Statische Websites bieten eine einfache und effektive M\u00f6glichkeit, Websites und Anwendungen zu erstellen, die schnell, sicher und leicht zu pflegen sind.<\/p>\n<p>Docusaurus ist ein solcher Generator f\u00fcr statische Websites, der sich in der Entwicklergemeinde immer gr\u00f6\u00dferer Beliebtheit erfreut.<\/p>\n<p>In diesem Beitrag gehen wir n\u00e4her auf die Vorteile von Docusaurus als Generator f\u00fcr statische Websites ein und erkl\u00e4ren, warum er bei Entwicklern immer beliebter wird.<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Was ist Docusaurus?<\/h2>\n<p>Docusaurus ist ein beliebter <a href=\"https:\/\/kinsta.com\/de\/blog\/statische-webseiten-generatoren\/\">Generator f\u00fcr statische Websites<\/a>, der <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a>, eine der <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/\">f\u00fchrenden JavaScript-Bibliotheken<\/a>, als UI-Bibliothek f\u00fcr die Seitenerstellung verwendet. Wie andere Generatoren dieser Art ist er einfach einzurichten und zu \u00e4ndern und &#8211; was am wichtigsten ist &#8211; er bietet dir alles, was du brauchst, um mit deiner statischen Website durchzustarten.<\/p>\n<p>Das Besondere an Docusaurus ist jedoch, dass es dir hilft, eine Website zu erstellen und zu verwalten, bei der <em><a href=\"https:\/\/kinsta.com\/de\/thema\/content-strategie\/\">Inhalte eine zentrale Rolle spielen<\/a><\/em>. Mit Docusaurus kannst du schnell und einfach eine vollst\u00e4ndige Website mit Blogfunktion erstellen, die deine Inhalte von Anfang an in den Mittelpunkt stellt.<\/p>\n<p>Da bei Docusaurus der Inhalt im Mittelpunkt steht, eignet es sich perfekt f\u00fcr die Erstellung von Dokumentationsseiten wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-wiki\/\">Wikis<\/a>. Docusaurus nutzt au\u00dferdem <a href=\"https:\/\/kinsta.com\/de\/blog\/markdown-editoren\/\">Markdown<\/a>, das ideal f\u00fcr die Zusammenarbeit und die Speicherung in einem Git-Repository ist. Dar\u00fcber hinaus bietet Docusaurus viele tolle Funktionen wie i18n, Suche und benutzerdefinierte Themes, auf die wir sp\u00e4ter noch genauer eingehen werden.<\/p>\n<p>Hier sind nur einige der herausragenden Funktionen, die Docusaurus zu einer guten Wahl machen:<\/p>\n<ul>\n<li>Entwickelt mit React<\/li>\n<li>Unterst\u00fctzung f\u00fcr MDX v1<\/li>\n<li>Unterst\u00fctzung f\u00fcr die Einbettung von React-Komponenten \u00fcber Markdown<\/li>\n<li>Versionierung von Dokumenten<\/li>\n<li>Kompatibilit\u00e4t mit Git, Crowdin und anderen \u00dcbersetzungsmanagern f\u00fcr die \u00dcbersetzung von Dokumenten und die Massen- oder Einzelverteilung<\/li>\n<\/ul>\n<h3>Wer nutzt Docusaurus?<\/h3>\n<p>Docusaurus wurde von Facebook entwickelt. Daher ist es nicht verwunderlich, dass es derzeit von vielen gro\u00dfen Marken und Unternehmen im Internet genutzt wird.<\/p>\n<p>Hier sind nur einige der gr\u00f6\u00dften Marken, die Docusaurus heute nutzen (und bald werden es noch mehr sein, da die Popularit\u00e4t von Docusaurus weiter w\u00e4chst):<\/p>\n<ul>\n<li><a href=\"https:\/\/docsearch.algolia.com\/\">Algolia DocSearch<\/a><\/li>\n<li><a href=\"https:\/\/jestjs.io\/\">Jest<\/a><\/li>\n<li><a href=\"https:\/\/reactnative.dev\/\">React Native<\/a><\/li>\n<li><a href=\"https:\/\/supabase.com\/docs\">Supabase<\/a><\/li>\n<\/ul>\n<p>Und jeden Tag kommen weitere hinzu.<\/p>\n<h2>So installierst du Docusaurus<\/h2>\n<p>Docusaurus ist sehr einfach zu installieren und ben\u00f6tigt nur wenige Minuten. In diesem Tutorial erstellen wir eine Dokumentationsseite mit einem Blog und passen das Aussehen der Website an.<\/p>\n<p>Und jetzt kommt das Coolste daran: Wir werden weniger als eine Stunde brauchen, um alles einzurichten.<\/p>\n<p>Lass uns loslegen!<\/p>\n<h3>Anforderungen<\/h3>\n<p>Docusarus ben\u00f6tigt <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-node-js\/\">Node.js<\/a> 16.14 oder neuer. Es handelt sich um eine Flat-File SSG, das hei\u00dft, du brauchst keine <a href=\"https:\/\/sevalla.com\/database-hosting\/\">zus\u00e4tzliche Datenbank<\/a>.<\/p>\n<p>Wenn du noch nicht \u00fcber Node.js 16.14+ verf\u00fcgst, musst du zun\u00e4chst <a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-du-node-js\/\">Node.js installieren<\/a> oder deine aktuelle Version aktualisieren. Danach kannst du mit der Installation von Docusaurus fortfahren.<\/p>\n<p>Wir werden auch die Docusaurus-Beispielseite aus <a href=\"https:\/\/github.com\/kinsta\/hello-world-docusaurus\">diesem GitHub-Repository<\/a> verwenden. Du kannst sie oder eine cleane Installation von Docusaurus f\u00fcr dieses Tutorial verwenden.<\/p>\n<h3>Installationsprozess<\/h3>\n<p>Um die Installation von Docusaurus zu starten, musst du zun\u00e4chst den folgenden Befehl ausf\u00fchren:<\/p>\n<pre><code class=\"bash\">npx create-docusaurus@latest  classic<\/code><\/pre>\n<p>Dadurch wird ein Ordner f\u00fcr dein Projekt erstellt und das <a href=\"https:\/\/docusaurus.io\/docs\/api\/themes\/@docusaurus\/theme-classic\">klassische Theme<\/a> darin eingebettet. Das klassische Theme enth\u00e4lt bereits einige vorkonfigurierte Funktionen wie einen Blog, benutzerdefinierte Seiten und ein CSS-Framework.<\/p>\n<p>Nach der Installation musst du dann den folgenden Befehl ausf\u00fchren, um den lokalen Server zu starten:<\/p>\n<pre><code class=\"bash\">npm start<\/code><\/pre>\n<p>Wenn du eine optimierte, einsatzbereite Version erstellen willst, solltest du stattdessen diesen Befehl ausf\u00fchren:<\/p>\n<pre><code class=\"bash\">npm run build<\/code><\/pre>\n<h3>Struktur<\/h3>\n<p>Sobald du deine Docusaurus-Instanz installiert hast, kannst du dein Projektverzeichnis \u00f6ffnen und dir das &#8222;Skelett&#8220; deiner neuen Website genauer ansehen.<\/p>\n<p>Hier siehst du, wie die Dateistruktur aussieht:<\/p>\n<pre><code class=\"bash\">my-website\n\u251c\u2500\u2500 blog\n\u2502 \u251c\u2500\u2500 2019-05-28-hola.md\n\u2502 \u2514\u2500\u2500 2020-05-30-welcome.md\n\u251c\u2500\u2500 docs\n\u2502 \u251c\u2500\u2500 doc1.md\n\u2502 \u2514\u2500\u2500 mdx.md\n\u251c\u2500\u2500 src\n\u2502 \u251c\u2500\u2500 css\n\u2502 \u2502 \u2514\u2500\u2500 custom.css\n\u2502 \u2514\u2500\u2500 pages\n\u2502 \u251c\u2500\u2500 styles.module.css\n\u2502 \u2514\u2500\u2500 index.js\n\u251c\u2500\u2500 static\n\u2502 \u2514\u2500\u2500 img\n\u251c\u2500\u2500 docusaurus.config.js\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 sidebars.js\n\u2514\u2500\u2500 yarn.lock<\/code><\/pre>\n<p>Bei einigen dieser Dateien und Ordner gibt es ein paar Details zu beachten:<\/p>\n<ul>\n<li><strong><code>\/blog<\/code>:<\/strong> Enth\u00e4lt alle Dateien, die mit deinem Blog zu tun haben.<\/li>\n<li><strong><code>\/docs<\/code>:<\/strong> Enth\u00e4lt alle Dateien, die mit deinen Dokumenten zu tun haben. Du kannst ihre Reihenfolge in der Datei <strong>sidebar.js<\/strong> anpassen.<\/li>\n<li><strong><code>\/src<\/code>:<\/strong> Enth\u00e4lt alle Dateien, die nicht zur Dokumentation geh\u00f6ren, wie Seiten oder benutzerdefinierte Komponenten.<\/li>\n<li><strong><code>\/src\/pages<\/code>:<\/strong> Alle JSX\/TSX\/MDX-Dateien werden in Seiten umgewandelt.<\/li>\n<li><strong><code>\/static<\/code>:<\/strong> Statische Dateien, die in den endg\u00fcltigen Build-Ordner kopiert werden.<\/li>\n<li><strong><code>docusaurus.config.js<\/code>:<\/strong> Docusaurus-Konfigurationsdatei.<\/li>\n<li><strong><code>packaged.json<\/code>:<\/strong> Jede Docusaurus-Site ist eine React-App, daher findest du hier alle Abh\u00e4ngigkeiten und Skripte, die sie f\u00fcr React verwendet.<\/li>\n<li><strong><code>sidebar.js<\/code>:<\/strong> Hier kannst du die Reihenfolge der Dokumente in der Seitenleiste festlegen.<\/li>\n<\/ul>\n<h2>Anpassen deiner Docusaurus-Installation<\/h2>\n<p>Wie du an der einfachen Dateistruktur sehen kannst, ist Docusaurus leicht zu bedienen und zu navigieren. Auch das Anpassen deiner Docusaurus-Website ist ein Kinderspiel. Du kannst diese Dateien mit deinem bevorzugten <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-texteditoren\/\">Texteditor<\/a> oder einer IDE\u00a0\u00f6ffnen und bearbeiten.<\/p>\n<p>Sehen wir uns einige der Anpassungsm\u00f6glichkeiten an, die dir sofort nach dem Auspacken zur Verf\u00fcgung stehen.<\/p>\n<h3>Homepage<\/h3>\n<p>Als Erstes m\u00f6chtest du wahrscheinlich die Standard-Homepage so anpassen, dass sie dein eigenes Projekt zeigt. Zum Gl\u00fcck ist es nicht kompliziert, die Docusaurus-Startseite nach Belieben zu ver\u00e4ndern.<\/p>\n<p>Um die Homepage zu \u00e4ndern, \u00f6ffnest du die Datei <strong>src\/pages\/index.js<\/strong> und nimmst die \u00c4nderungen direkt dort vor. Da es sich um eine typische React-Seite handelt, kannst du sie ver\u00e4ndern oder neu aufbauen, indem du den Inhalt \u00e4nderst oder eigene <a href=\"https:\/\/kinsta.com\/de\/blog\/react-komponenten-bibliotheken\/\">React-Komponenten<\/a> erstellst.<\/p>\n<h3>Konfigurationsdatei<\/h3>\n<p>Als N\u00e4chstes werden wir in die wichtige Datei <strong>docusaurus.config.js<\/strong> eintauchen und einige wichtige Details f\u00fcr unsere Instanz \u00e4ndern.<\/p>\n<h4>Name und Beschreibung<\/h4>\n<p>In der Konfigurationsdatei findest du Folgendes:<\/p>\n<pre><code class=\"language-markdown\">const config = {\ntitle: 'My Site',\ntagline: 'Dinosaurs are cool',\nurl: 'https:\/\/your-docusaurus-site.com',\nbaseUrl: '\/',<\/code><\/pre>\n<p>\u00c4ndere diese Angaben einfach so, dass sie den Bed\u00fcrfnissen deiner Website entsprechen, und speichere die Datei.<\/p>\n<h4>Navigationsleiste<\/h4>\n<p>Um deine Navigationsleiste zu bearbeiten, w\u00e4hle den Punkt <code>navbar<\/code>.<\/p>\n<p>In unserem Beispiel wollen wir einen Link zu Kinsta hinzuf\u00fcgen, das Element &#8222;Tutorial&#8220; in &#8222;Starter-Dokumentation&#8220; umbenennen und das Kinsta-Logo hinzuf\u00fcgen.<\/p>\n<p>So w\u00fcrden wir vorgehen:<\/p>\n<pre><code class=\"language-markdown\">navbar: {\n  title: 'Kinsta starters',\n  logo: {  \n    alt: 'Kinsta Logo',\n    src: 'img\/kinsta-logo-alpha-purple.png',\n  },\n  items: [\n    {\n      label: 'Kinsta starters',\n      to: '\/docs\/intro',\n    },\n    {to: '\/blog', label: 'Blog', position: 'left'},\n    {\n      href: 'https:\/\/github.com\/kinsta',\n      label: 'GitHub',\n      position: 'right',\n    },\n  ],\n},<\/code><\/pre>\n<h4>Fu\u00dfzeile<\/h4>\n<p>Die Fu\u00dfzeilenanpassung in Docusaurus besteht aus zwei Bereichen: dem Fu\u00dfzeileninhalt selbst und den Fu\u00dfzeilenlinks.<\/p>\n<h5>Fu\u00dfzeileninhalt<\/h5>\n<p>Der Hauptteil deines Fu\u00dfzeileninhalts (mit Ausnahme der Linkliste) kann in deiner <strong>themeConfig.footer<\/strong>-Datei platziert werden. Dies ist der ideale Ort, um ein Logo und einen Copyright-Hinweis einzuf\u00fcgen.<\/p>\n<p>Hier siehst du, wie wir unsere Fu\u00dfzeilen-Konfiguration ge\u00e4ndert haben:<\/p>\n<pre><code class=\"language-markdown\">module.exports = {\n  themeConfig: {\n    footer: {\n      logo: {\n        alt: 'Kinsta Logo',\n        src: 'img\/kinsta-logo.png',\n        href: 'https:\/\/kinsta.com',\n        width: 160,\n        height: 51,\n      },\n      copyright: `Copyright \u00a9 ${new Date().getFullYear()} Kinsta. Built with Docusaurus.`,\n    },\n  },\n};<\/code><\/pre>\n<h5>Links in der Fu\u00dfzeile<\/h5>\n<p>Das \u00c4ndern der Links in der Fu\u00dfzeile ist \u00e4hnlich wie das \u00c4ndern der oberen Navigationsleiste: Finde den Abschnitt <code>footer<\/code> in <strong>docusaurus.config.js<\/strong> und bearbeite ihn, bis er deinen Anforderungen entspricht.<\/p>\n<p>So sieht unser Abschnitt <code>footer<\/code> aus:<\/p>\n<pre><code class=\"language-markdown\">footer: {\n  style: 'dark',\n  links: [\n    {\n      title: 'Docs',\n      items: [\n        {\n          label: 'Kinsta starters',\n          to: '\/docs\/intro',\n        },\n      ],\n    },\n    {\n      title: 'Talk with us',\n      items: [\n        {\n          label: 'Discord',\n          href: 'https:\/\/discord.gg\/vjRPMhFaBA',\n        },\n        {\n          label: 'Support',\n          href: 'https:\/\/kinsta.com\/kinsta-support\/',\n        },\n        {\n          label: 'Twitter',\n          href: 'https:\/\/twitter.com\/kinsta',\n        },\n      ],\n    },\n    {\n      title: 'More',\n      items: [\n        {\n          label: 'Application Hosting',\n          href: 'https:\/\/sevalla.com\/application-hosting\/',\n        },\n        {\n          label: 'Database Hosting',\n          href: 'https:\/\/sevalla.com\/database-hosting\/',\n        },\n        {\n          label: 'WordPress Hosting',\n          href: 'https:\/\/kinsta.com\/wordpress-hosting\/',\n        },\n        {\n          label: 'DevKinsta',\n          href: 'https:\/\/kinsta.com\/devkinsta\/',\n        },\n      ],\n    },\n  ],\n};<\/code><\/pre>\n<h4>Farben und CSS<\/h4>\n<p>Die klassische Voreinstellung f\u00fcr Docusaurus verwendet das Infima-CSS-Framework. Aus diesem Grund haben die Docusaurus-Macher ein <a href=\"https:\/\/docusaurus.io\/docs\/styling-layout#styling-your-site-with-infima\">sehr n\u00fctzliches Webtool<\/a> entwickelt, mit dem du die Farben und andere CSS-Elemente und -Deklarationen \u00e4ndern kannst.<\/p>\n<p>Nachdem du deine Einstellungen auf der Seite eingegeben hast, erstellt das Tool in Sekundenschnelle eine <strong>custom.css<\/strong>-Datei &#8211; komplett mit einer sch\u00f6nen Reihe von erg\u00e4nzenden Farbt\u00f6nen. Diese neue CSS-Datei kannst du dann als Referenz in das Verzeichnis <strong>\/src\/css<\/strong> deines Projekts kopieren.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/docusaurus-css-tool.jpg\" alt=\"Ein Teil der offiziellen Docusaurus-Dokumentation zeigt das CSS-Tool mit Feldern zur Eingabe von Hex-Code-Anpassungen f\u00fcr jedes einzelne Element des Docusaurus-Designs.\" width=\"1600\" height=\"871\"><figcaption class=\"wp-caption-text\">Das benutzerdefinierte CSS-Tool von Docusaurus<\/figcaption><\/figure>\n<h4>Dokumentation<\/h4>\n<p>Die gesamte Dokumentation zu deiner neuen Website wird im Ordner <strong>\/docs<\/strong> gespeichert. Nat\u00fcrlich kannst du den Ordnernamen in <strong>docusaurus.config.js<\/strong> \u00e4ndern.<\/p>\n<p>Erstelle einfach die Markdown-Dateien in deinem <a href=\"https:\/\/kinsta.com\/de\/blog\/kostenlose-html-editoren\/\">Text- oder HTML-Editor<\/a> und lege sie in diesem Ordner ab. Jede Datei sollte wie folgt aussehen:<\/p>\n<pre><code class=\"language-markdown\">---\nid: the-id\ntitle: Title\n---\n# Rest of the document<\/code><\/pre>\n<p>Anhand der ID erstellt Docusaurus die URLs f\u00fcr die Artikel in diesem Unterordner: <code>yourdomain.com\/docs\/{id}<\/code><\/p>\n<p>Wir k\u00f6nnen auch Unterordner erstellen, um unsere Dokumentation in verschiedene, logische Abschnitte zu unterteilen. Damit diese Unterordner so funktionieren, wie wir es erwarten, m\u00fcssen wir allerdings noch ein wenig mehr tun.<\/p>\n<p>Nehmen wir an, wir erstellen einen neuen Dokumentenordner mit dem Namen &#8222;Starts&#8220;. Wenn wir dann die Homepage aktualisieren und auf den neuen Link &#8222;Starts&#8220; klicken, der automatisch in der Seitenleiste eingef\u00fcgt wurde, erhalten wir eine Fehlermeldung, weil es noch keine Indexseite in unserem neuen Ordner gibt.<\/p>\n<p>Am einfachsten l\u00e4sst sich dieses Problem beheben, indem du eine <strong>_category_.json<\/strong>-Datei erstellst, die den Index aller Seiten in diesem Ordner generiert. Du musst nur den folgenden Code hinzuf\u00fcgen:<\/p>\n<pre><code class=\"language-markdown\">{\n  \"label\": \"Starters\",\n  \"position\": 2,\n  \"link\": {\n    \"type\": \"generated-index\",\n    \"description\": \"All Kinsta Starters\"\n  },\n};<\/code><\/pre>\n<p>Wie du siehst, wird die Seitenleiste entsprechend der Struktur deiner Dateien neu erstellt. Das liegt daran, dass die Datei <strong>sidebar.js<\/strong> diese <code>tutorialSidebar<\/code> enth\u00e4lt: <code>[{type: 'autogenerated', dirName: '.'}],<\/code><\/p>\n<p>Wenn du dich lieber selbst darum k\u00fcmmerst, kannst du das einfach so \u00e4ndern:<\/p>\n<pre><code class=\"language-markdown\">tutorialSidebar: [\n  'intro',\n  'hello',\n  {\n    type: 'category',\n    label: 'Tutorial',\n    items: ['tutorial-basics\/create-a-document'],\n  },\n],<\/code><\/pre>\n<h4>Blog<\/h4>\n<p>Docusaurus enth\u00e4lt ein raffiniertes Blog-Modul. Ein Blog neben deiner Hauptwebsite kann sehr n\u00fctzlich sein, um deine Nutzer \u00fcber \u00c4nderungen in deinem Projekt zu informieren oder um Projektnotizen als eine Art Changelog zu f\u00fchren.<\/p>\n<p>Jeder Beitrag besteht aus einem Frontmatter-Teil, etwa so:<\/p>\n<pre><code class=\"language-markdown\">---\nslug: docusaurus-starter\ntitle: Docusaurus Starter\nauthors: palmiak\ntags: [starters, docusaurus]\n---<\/code><\/pre>\n<p>&#8230;und nat\u00fcrlich aus dem Inhalt selbst. Au\u00dferdem gibt es einen sehr n\u00fctzlichen <code><!--truncate--><\/code> Tag, mit dem du die Zusammenfassung des Beitrags in allen Beitragslisten einschr\u00e4nken kannst.<\/p>\n<p>Es ist auch eine gute Idee, eine Datei <strong>authors.yml<\/strong> f\u00fcr die Credits zu erstellen. Die Datei sieht wie folgt aus:<\/p>\n<pre><code class=\"language-markdown\">palmiak:\nname: Maciek Palmowski\ntitle: DevRel\nurl: https:\/\/github.com\/palmiak\nimage_url: https:\/\/github.com\/palmiak.png<\/code><\/pre>\n<p>Dank dieser Datei hast du alle Daten der Autoren an einem Ort und kannst sie leicht nachschlagen.<\/p>\n<h2>Wie du deine Docusaurus-Website bei Kinsta bereitstellst<\/h2>\n<p>Neben <a href=\"https:\/\/kinsta.com\/de\/wordpress-hosting\/\">WordPress-Websites<\/a>, eigenst\u00e4ndigen <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Anwendungen<\/a> und <a href=\"https:\/\/sevalla.com\/database-hosting\/\">Datenbanken<\/a> kann <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Kinsta auch statische Websites hosten<\/a>.<\/p>\n<p>Das hei\u00dft, Kinsta eignet sich perfekt f\u00fcr deine Docusaurs-Websites &#8211; und f\u00fcr die Verwaltung all deiner Webprojekte &#8211; direkt von deinem <a href=\"https:\/\/kinsta.com\/de\/mykinsta\/\">MyKinsta-Dashboard<\/a> aus.<\/p>\n<p><kinsta-video src=\"https:\/\/kinsta.wistia.com\/medias\/f57n9mlqfa\"><\/kinsta-video><\/p>\n<p>Sobald deine Anwendung bereitgestellt wurde, kannst du die <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">laufenden Analysen deiner Anwendung<\/a> einsehen, sowohl live als auch in der Vergangenheit, mit Messungen wie:<\/p>\n<ul>\n<li>Bandbreitennutzung<\/li>\n<li>Erstellungszeit<\/li>\n<li>Ausf\u00fchrungszeit<\/li>\n<li>CPU-Nutzung<\/li>\n<li>Speicherverbrauch<\/li>\n<\/ul>\n<p>Von Anfang bis Ende dauert der Bereitstellungsprozess \u00fcber MyKinsta nur ein paar Minuten.<\/p>\n<p>Los geht&#8217;s!<\/p>\n<h3>Voraussetzungen: Konfiguriere dein Docusaurus-Projekt<\/h3>\n<p>Um dein Docusaurus-Projekt auf der <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Application Hosting-Plattform von Kinsta<\/a> zu hosten, musst du Folgendes tun:<\/p>\n<ol>\n<li>F\u00fcge ein Namensfeld in deine <strong>package.json<\/strong> Datei ein. (Dies kann ein beliebiger Name sein und hat keinen Einfluss auf deine Bereitstellung.)<\/li>\n<li>F\u00fcge ein Build-Skript in deine <strong>package.json<\/strong>-Datei ein. (Dein Docusaurus-Projekt sollte dies bereits enthalten.)<\/li>\n<li>Installiere das npm-Paket <a href=\"https:\/\/www.npmjs.com\/package\/serve\">serve<\/a> und setze das Startskript auf serve build.<\/li>\n<\/ol>\n<p>Wenn du diese Punkte abgehakt hast, kannst du mit dem eigentlichen Deployment deiner Website fortfahren.<\/p>\n<h3>Bereitstellen deines Docusaurus-Projekts<\/h3>\n<p>Befolge diese einfachen Schritte, um dich mit deinem GitHub-Konto zu verbinden und deine Docusaurus-Site zu starten:<\/p>\n<ol>\n<li>Melde dich in deinem <a href=\"https:\/\/my.kinsta.com\/?lang=de\">MyKinsta-Konto<\/a> an und gehe im linken Men\u00fc auf die Registerkarte <strong>Anwendungen<\/strong>.<\/li>\n<li>Klicke auf die blaue Schaltfl\u00e4che <strong>Service hinzuf\u00fcgen<\/strong> und w\u00e4hle <strong>Anwendung<\/strong> aus dem Dropdown-Men\u00fc.\n<p><figure style=\"width: 1340px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/mykinsta-applications-add-service.jpg\" alt=\"Die Registerkarte Anwendungen im MyKinsta-Dashboard, wenn du mit der Maus \u00fcber die Option \"Anwendung\" f\u00e4hrst, nachdem du auf die blaue Schaltfl\u00e4che \"Dienst hinzuf\u00fcgen\" geklickt hast.\" width=\"1340\" height=\"646\"><figcaption class=\"wp-caption-text\">W\u00e4hle &#8222;Application&#8220; unter &#8222;Add service&#8220; in MyKinsta<\/figcaption><\/figure><\/li>\n<li>Wenn du dich noch nicht \u00fcber MyKinsta mit deinem GitHub-Konto verbunden hast, wird dir ein Modal angezeigt, das dich dazu auffordert. Klicke auf die Schaltfl\u00e4che &#8222;<strong>Mit GitHub fortfahren<\/strong>&#8222;, um fortzufahren.\n<p><figure style=\"width: 1074px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/mykinsta-github-integration-continue.jpg\" alt=\"Ein Modal mit dem Text \"GitHub-Integration: Verbinde kinsta hier mit deinem GitHub-Namespace, um deine bestehenden Repositories zu importieren.\" Unten rechts findest du eine wei\u00dfe Schaltfl\u00e4che \"Abbrechen\" und eine blaue Schaltfl\u00e4che \"Mit GitHub fortfahren\".\" width=\"1074\" height=\"252\"><figcaption class=\"wp-caption-text\">Integration von MyKinsta mit GitHub<\/figcaption><\/figure><\/li>\n<li>Es \u00f6ffnet sich ein neues Fenster, in dem du gebeten wirst, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">Kinsta den Zugriff auf deine GitHub-Ressourcen und deren Verwaltung zu gestatten<\/a>. Vergewissere dich, dass du mit dem richtigen GitHub-Konto angemeldet bist, und klicke dann auf die gr\u00fcne Schaltfl\u00e4che &#8222;<strong>Kinsta autorisieren<\/strong>&#8220; am unteren Rand.\n<p><figure style=\"width: 1032px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/github-authorize-kinsta.jpg\" alt=\"Ein Autorisierungsmodal von GitHub mit dem Text \"Kinsta by Kinsta m\u00f6chte die Erlaubnis haben,: Deine GitHub-Identit\u00e4t (kinstauser) zu \u00fcberpr\u00fcfen; Zu wissen, auf welche Ressourcen du zugreifen kannst; In deinem Namen zu handeln\" mit einer grauen Schaltfl\u00e4che \"Abbrechen\" und einer gr\u00fcnen Schaltfl\u00e4che \"Kinsta autorisieren\" ganz unten.\" width=\"1032\" height=\"915\"><figcaption class=\"wp-caption-text\">Ein Autorisierungsmodal von GitHub mit dem Text &#8222;Kinsta by Kinsta m\u00f6chte die Erlaubnis haben,: Deine GitHub-Identit\u00e4t (kinstauser) zu \u00fcberpr\u00fcfen; Zu wissen, auf welche Ressourcen du zugreifen kannst; In deinem Namen zu handeln&#8220; mit einer grauen Schaltfl\u00e4che &#8222;Abbrechen&#8220; und einer gr\u00fcnen Schaltfl\u00e4che &#8222;Kinsta autorisieren&#8220; ganz unten.<\/figcaption><\/figure><\/li>\n<li>Du bist nun beim <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub-Integrationsassistenten<\/a> angelangt. Dies ist der letzte Schritt, bevor du deine Website einrichten kannst. Sieh dir die Felder genau an und f\u00fclle sie entsprechend deiner GitHub-Konfiguration und den Anforderungen deines Projekts aus. Wenn du eine <a href=\"https:\/\/docs.sevalla.com\/applications\/build-options\/dockerfile\">Dockerdatei in deinem Repository<\/a> hast, kannst du diese verwenden, um das Container-Image einzurichten; andernfalls wird Kinsta automatisch ein Container-Image f\u00fcr dich einrichten. Beachte, dass du eventuell <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize#edit-github-permissions\">deine GitHub-Berechtigungen bearbeiten<\/a> musst, bevor du fortfahren kannst, vor allem, wenn dies deine erste Bereitstellung \u00fcber Kinsta ist.\n<figure style=\"width: 1065px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/mykinsta-application-edit-github-permissions.jpg\" alt=\"Der neue Anwendungsassistent in MyKinsta zeigt, wie du mit der Maus \u00fcber die Dropdown-Option \"GitHub-Berechtigungen bearbeiten\" f\u00fcr das Feld \"GitHub-Repository\" streichst.\" width=\"1065\" height=\"373\"><figcaption class=\"wp-caption-text\">GitHub-Berechtigungen bearbeiten<\/figcaption><\/figure>\n<p>Du kannst w\u00e4hlen, ob du Kinsta Zugriff auf alle Repositories oder nur auf bestimmte gew\u00e4hren willst. Diese Berechtigungen k\u00f6nnen jederzeit in den <a href=\"https:\/\/github.com\/settings\/installations\/\"><strong>Anwendungseinstellungen<\/strong> deines GitHub-Kontos<\/a> angepasst werden.<\/p>\n<p><figure style=\"width: 917px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/github-kinsta-permissions.jpg\" alt=\"Der GitHub-Bereich \"Berechtigungen\" mit zwei Optionen im Abschnitt \"Repository-Zugriff\": \"Alle Repositories\" oder \"Nur ausgew\u00e4hlte Repositories\".\" width=\"917\" height=\"821\"><figcaption class=\"wp-caption-text\">Ausw\u00e4hlen, welche GitHub-Berechtigungen Kinsta gew\u00e4hrt werden sollen<\/figcaption><\/figure><\/li>\n<li>Nachdem du deine Auswahl getroffen und best\u00e4tigt hast, werden dir die Details zu deiner Bereitstellung sowie die Optionen &#8222;<strong>Einstellungen \u00e4ndern<\/strong>&#8220; und &#8222;<strong>Neu bereitstellen<\/strong>&#8220;\u00a0angezeigt.\n<figure style=\"width: 1418px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/mykinsta-successful-application-deployment.jpg\" alt=\"Die Seite \"Bereitstellungsdetails\" in MyKinsta zeigt Informationen \u00fcber die bereitgestellte App an, darunter den Namen des bereitgestellten Zweigs, die Commit-Nummer, die dazugeh\u00f6rige Commit-Nachricht, die Bereitstellungszeiten und den ausgew\u00e4hlten Standort des Rechenzentrums.\" width=\"1418\" height=\"532\"><figcaption class=\"wp-caption-text\">Die Seite &#8222;Bereitstellungsdetails&#8220; in MyKinsta zeigt Informationen \u00fcber die bereitgestellte App an, darunter den Namen des bereitgestellten Zweigs, die Commit-Nummer, die dazugeh\u00f6rige Commit-Nachricht, die Bereitstellungszeiten und den ausgew\u00e4hlten Standort des Rechenzentrums.<\/figcaption><\/figure>\n<p>Hier siehst du auch alle Fehler, die w\u00e4hrend der Bereitstellung aufgetreten sind, sowie Details zur Fehlerursache, damit du sie leicht beheben kannst. Wenn du Schwierigkeiten hast, das Problem zu beheben, findest du in der <a href=\"https:\/\/docs.sevalla.com\/applications\/overview\">Dokumentation von Kinsta<\/a> <a href=\"https:\/\/docs.sevalla.com\/applications\/troubleshooting\/failed-deployment#failed-rollout\">weitere Hinweise zu Rollout-Fehlern<\/a>.<\/p>\n<p><figure style=\"width: 1299px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/mykinsta-application-build-error.jpg\" alt=\"Ein Fehler mit der \u00dcberschrift \"Build-Prozess fehlgeschlagen\" zusammen mit \"Unbekannter Build-Fehlertyp\" \u00fcber einem Detailfenster, das die einzelnen Fehler auflistet, die zu dem Fehler beigetragen haben.\" width=\"1299\" height=\"636\"><figcaption class=\"wp-caption-text\">Ein Fehler mit der \u00dcberschrift &#8222;Build-Prozess fehlgeschlagen&#8220; zusammen mit &#8222;Unbekannter Build-Fehlertyp&#8220; \u00fcber einem Detailfenster, das die einzelnen Fehler auflistet, die zu dem Fehler beigetragen haben.<\/figcaption><\/figure><\/li>\n<\/ol>\n<p>Wenn du bis hierher gekommen bist, ohne dass Fehler aufgetreten sind, dann herzlichen Gl\u00fcckwunsch &#8211; du hast <a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">deine Docusaurus-Website gerade erfolgreich \u00fcber Kinsta bereitgestellt<\/a>! Deine Anwendung (d. h. deine statische Website) ist verf\u00fcgbar, sobald du den Assistenten abgeschlossen hast. Du kannst sie unter der URL deiner Anwendung aufrufen, die in der Regel lautet <code>https:\/\/<em>your-docusaurus-site<\/em>.kinsta.app<\/code>.<\/p>\n<p>Hier ist ein erster Blick auf unsere Beispielsite auf Kinsta:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/deployed-docusaurus-site.png\" alt=\"Die eingesetzte Docusaurus-Homepage, auf der oben ein gr\u00fcnes Banner mit der \u00dcberschrift \"Meine Seite\" und dem Slogan \"Dinosaurier sind cool\" in wei\u00dfer Schrift zu sehen ist.\" width=\"1600\" height=\"777\"><figcaption class=\"wp-caption-text\">Unsere bereitgestellte Docusaurus-Seite<\/figcaption><\/figure>\n<h2>Zusammenfassung<\/h2>\n<p>Mit seinen \u00fcberraschend leistungsstarken Funktionen, dem <a href=\"https:\/\/kinsta.com\/de\/blog\/webdesign-prinzipien\/\">freundlichen Design<\/a>, der intuitiven Navigation und dem Fokus auf den Inhalt ist es nicht schwer zu erkennen, warum Docusaurus ein hervorragendes Tool f\u00fcr alle Entwickler ist, die eine schlanke, gut organisierte statische Dokumentationsseite und\/oder einen Blog erstellen und pflegen wollen.<\/p>\n<p>Sobald du deine Seite mit Inhalten gef\u00fcllt hast, die deine Besucher\/innen sch\u00e4tzen werden, wirst du feststellen, dass es noch weitere n\u00fctzliche Funktionen gibt. Zum Beispiel sind die Suchmaschinenoptimierungsfunktionen von Docusaurus perfekt geeignet, um deine Sichtbarkeit bei einem gr\u00f6\u00dferen Publikum zu verbessern, w\u00e4hrend du an <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-seo\/\">anderen Techniken arbeitest ,um in den SEO-Rankings voranzukommen<\/a>.<\/p>\n<p>Hast du schon etwas mit Docusaurus erstellt? Teile deine Projekte und Erfahrungen mit uns in den Kommentaren unten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>F\u00fcr einfache Websites, Anwendungen und andere kleine Projekte entscheiden sich immer mehr Entwickler\/innen f\u00fcr statische Website-Generatoren statt f\u00fcr WordPress oder andere Content-Management-Systeme (CMS). Statische Websites bieten &#8230;<\/p>\n","protected":false},"author":283,"featured_media":59400,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[952,975],"class_list":["post-59399","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-tutorials","topic-react"],"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>Erstellen und Anpassen einer Docusaurus-Seite (mit Blog-Funktion)<\/title>\n<meta name=\"description\" content=\"Du musst eine einfach bereitzustellende, auf Inhalte ausgerichtete Seite und einen Blog haben? In dieser Anleitung lernst du, wie du eine Docusaurus Seite in wenigen Minuten erstellen und bereitstellen kannst.\" \/>\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\/docusaurus\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Erstellen und Anpassen einer Docusaurus-Seite (mit Blog-Funktion)\" \/>\n<meta property=\"og:description\" content=\"Du musst eine einfach bereitzustellende, auf Inhalte ausgerichtete Seite und einen Blog haben? In dieser Anleitung lernst du, wie du eine Docusaurus Seite in wenigen Minuten erstellen und bereitstellen kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/\" \/>\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-02-23T11:17:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T15:41:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maciek Palmowski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Du musst eine einfach bereitzustellende, auf Inhalte ausgerichtete Seite und einen Blog haben? In dieser Anleitung lernst du, wie du eine Docusaurus Seite in wenigen Minuten erstellen und bereitstellen kannst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maciek Palmowski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"13\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/\"},\"author\":{\"name\":\"Maciek Palmowski\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\"},\"headline\":\"Erstellen und Anpassen einer Docusaurus-Seite (mit Blog-Funktion)\",\"datePublished\":\"2023-02-23T11:17:14+00:00\",\"dateModified\":\"2025-09-01T15:41:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/\"},\"wordCount\":2425,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/\",\"name\":\"Erstellen und Anpassen einer Docusaurus-Seite (mit Blog-Funktion)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg\",\"datePublished\":\"2023-02-23T11:17:14+00:00\",\"dateModified\":\"2025-09-01T15:41:42+00:00\",\"description\":\"Du musst eine einfach bereitzustellende, auf Inhalte ausgerichtete Seite und einen Blog haben? In dieser Anleitung lernst du, wie du eine Docusaurus Seite in wenigen Minuten erstellen und bereitstellen kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-Tutorials\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/javascript-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Erstellen und Anpassen einer Docusaurus-Seite (mit Blog-Funktion)\"}]},{\"@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\/0cf8d8dc768875c83e582e95abbdd072\",\"name\":\"Maciek Palmowski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"caption\":\"Maciek Palmowski\"},\"description\":\"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/maciekpalmowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Erstellen und Anpassen einer Docusaurus-Seite (mit Blog-Funktion)","description":"Du musst eine einfach bereitzustellende, auf Inhalte ausgerichtete Seite und einen Blog haben? In dieser Anleitung lernst du, wie du eine Docusaurus Seite in wenigen Minuten erstellen und bereitstellen kannst.","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\/docusaurus\/","og_locale":"de_DE","og_type":"article","og_title":"Erstellen und Anpassen einer Docusaurus-Seite (mit Blog-Funktion)","og_description":"Du musst eine einfach bereitzustellende, auf Inhalte ausgerichtete Seite und einen Blog haben? In dieser Anleitung lernst du, wie du eine Docusaurus Seite in wenigen Minuten erstellen und bereitstellen kannst.","og_url":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-02-23T11:17:14+00:00","article_modified_time":"2025-09-01T15:41:42+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg","type":"image\/jpeg"}],"author":"Maciek Palmowski","twitter_card":"summary_large_image","twitter_description":"Du musst eine einfach bereitzustellende, auf Inhalte ausgerichtete Seite und einen Blog haben? In dieser Anleitung lernst du, wie du eine Docusaurus Seite in wenigen Minuten erstellen und bereitstellen kannst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Maciek Palmowski","Gesch\u00e4tzte Lesezeit":"13\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/"},"author":{"name":"Maciek Palmowski","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072"},"headline":"Erstellen und Anpassen einer Docusaurus-Seite (mit Blog-Funktion)","datePublished":"2023-02-23T11:17:14+00:00","dateModified":"2025-09-01T15:41:42+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/"},"wordCount":2425,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/docusaurus\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/","url":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/","name":"Erstellen und Anpassen einer Docusaurus-Seite (mit Blog-Funktion)","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg","datePublished":"2023-02-23T11:17:14+00:00","dateModified":"2025-09-01T15:41:42+00:00","description":"Du musst eine einfach bereitzustellende, auf Inhalte ausgerichtete Seite und einen Blog haben? In dieser Anleitung lernst du, wie du eine Docusaurus Seite in wenigen Minuten erstellen und bereitstellen kannst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/docusaurus\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/docusarus.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/docusaurus\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"JavaScript-Tutorials","item":"https:\/\/kinsta.com\/de\/thema\/javascript-tutorials\/"},{"@type":"ListItem","position":3,"name":"Erstellen und Anpassen einer Docusaurus-Seite (mit Blog-Funktion)"}]},{"@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\/0cf8d8dc768875c83e582e95abbdd072","name":"Maciek Palmowski","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","caption":"Maciek Palmowski"},"description":"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.","url":"https:\/\/kinsta.com\/de\/blog\/author\/maciekpalmowski\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/59399","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\/283"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=59399"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/59399\/revisions"}],"predecessor-version":[{"id":73954,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/59399\/revisions\/73954"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/59399\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/59399\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/59399\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/59399\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/59399\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/59399\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/59399\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/59399\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/59399\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/59399\/translations\/dk"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/59399\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/59400"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=59399"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=59399"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=59399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}