{"id":66267,"date":"2023-10-11T15:20:47","date_gmt":"2023-10-11T14:20:47","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=66267&preview=true&preview_id=66267"},"modified":"2023-10-24T07:11:55","modified_gmt":"2023-10-24T06:11:55","slug":"vuepress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/vuepress\/","title":{"rendered":"Erstellen und Anpassen einer schnellen Dokumentations- und Blogseite mit VuePress"},"content":{"rendered":"

In der schnelllebigen digitalen Welt von heute ist eine gut organisierte und optisch ansprechende Dokumentation oder Blog-Site unerl\u00e4sslich, um die Aufmerksamkeit deines Publikums zu wecken und es bei der Stange zu halten. Aber wie kannst du das erreichen, ohne endlose Stunden in die Webentwicklung<\/a> zu investieren?<\/p>\n

In diesem Artikel wird erkl\u00e4rt, wie du mit VuePress, einem minimalistischen, aber leistungsstarken Static Site Generator<\/a> (SSG), eine schnelle Dokumentations- und Blogseite erstellen und anpassen kannst.<\/p>\n

\"VuePress
VuePress Dokumentation und Blog Demo<\/figcaption><\/figure>\n
<\/div><\/kinsta-auto-toc>\n

Was ist VuePress?<\/h2>\n

VuePress ist ein Open-Source-Framework<\/a>, das sich auf die Erstellung statischer Websites spezialisiert hat und vor allem f\u00fcr Dokumentationen und Blogs geeignet ist. Es wurde von Evan You<\/a>, dem Genie hinter Vue.js<\/a>, entwickelt und verk\u00f6rpert die Philosophie der Einfachheit und Benutzerfreundlichkeit, f\u00fcr die Vue.js bekannt ist.<\/p>\n

Warum VuePress verwenden?<\/h3>\n

Hier sind einige \u00fcberzeugende Gr\u00fcnde, warum VuePress die perfekte Wahl f\u00fcr dich sein k\u00f6nnte.<\/p>\n

    \n
  1. Einfachheit von Markdown:<\/strong> VuePress vereinfacht die Inhaltserstellung mit Markdown und macht es einfach, Inhalte ohne komplexe Formatierung zu schreiben und zu strukturieren.<\/li>\n
  2. Vue.js-Integration:<\/strong> VuePress integriert nahtlos Vue.js und erm\u00f6glicht so interaktive und dynamische Webelemente f\u00fcr ein ansprechendes Nutzererlebnis.<\/li>\n
  3. Leistung und Anpassbarkeit:<\/strong> VuePress bietet eine exzellente Performance mit schnell ladenden statischen Websites und umfangreiche Anpassungsm\u00f6glichkeiten, um deinen Stil und deine Bed\u00fcrfnisse zu erf\u00fcllen.<\/li>\n<\/ol>\n

    Erste Schritte mit VuePress<\/h2>\n

    Bevor du dich mit VuePress besch\u00e4ftigst, solltest du sicherstellen, dass du Node.js<\/a> oder Yarn Classic<\/a> auf deinem Computer installiert hast. Es gibt zwei M\u00f6glichkeiten, mit VuePress zu beginnen: Entweder du verwendest den create-vuepress-site-Generator<\/a>, der dir dabei hilft, die grundlegende VuePress-Seitenstruktur zu erstellen, oder du verwendest die manuelle Installation.<\/p>\n

    In diesem Artikel wollen wir die manuelle Installation verwenden.<\/p>\n

      \n
    1. Erstelle ein neues Verzeichnis und \u00e4ndere es:<\/li>\n<\/ol>\n
      mkdir vuepress-starter && cd vuepress-starter<\/code><\/pre>\n
        \n
      1. Initialisiere mit deinem bevorzugten Paketmanager. F\u00fcr diesen Artikel verwenden wir Yarn:<\/li>\n<\/ol>\n
        yarn init<\/code><\/pre>\n
          \n
        1. Installiere VuePress in deinem Projekt als Entwickler-Abh\u00e4ngigkeit:<\/li>\n<\/ol>\n
          yarn add -D vuepress<\/code><\/pre>\n
            \n
          1. Erstelle einen docs-Ordner<\/strong>, in dem du deinen gesamten Code ablegen kannst, und erstelle dann eine README.md-Datei<\/strong>, die als Indexdatei deines Projekts dient, \u00e4hnlich wie index.html<\/strong>:<\/li>\n<\/ol>\n
            mkdir docs && echo '# Hello VuePress' > docs\/README.md<\/code><\/pre>\n
              \n
            1. \u00d6ffne dein Projekt in einem Code-Editor und f\u00fcge die folgenden Skripte zu deiner package.json-Datei<\/strong> hinzu, damit du deine Seite bereitstellen und bauen kannst:<\/li>\n<\/ol>\n
              \"scripts\": {\n    \"dev\": \"vuepress dev docs\",\n    \"build\": \"vuepress build docs\"\n  },<\/code><\/pre>\n
              Du kannst deine Seite jetzt mit dem Befehl yarn dev<\/code> bereitstellen. VuePress wird deinen Entwicklungsserver unter http:\/\/localhost:8080 starten.<\/p>\n
              \"Standard-Theme
              Standard-Theme f\u00fcr die manuelle Installation von VuePress<\/figcaption><\/figure>\n
              Du hast nun eine Dokumentationsseite erstellt. Du wirst feststellen, dass VuePress von Haus aus ein sauberes, minimalistisches Standard-Theme bietet. Es ist jedoch in hohem Ma\u00dfe anpassbar und gibt dir die kreative Freiheit, ein einzigartiges Aussehen f\u00fcr deine Website zu gestalten.<\/p>\n
              Dokumentationsseiten erstellen<\/h2>\n
              VuePress folgt einer einfachen Verzeichnisstruktur, um die Dokumentation zu organisieren. In deinem Projektordner findest du das von uns erstellte docs-Verzeichnis<\/strong>, in dem du Markdown-Dateien<\/a> (.md<\/code>) f\u00fcr deine Dokumentationsseiten erstellen kannst.<\/p>\n
              Du kannst zum Beispiel Dateien wie getting-started.md<\/strong>, usage.md<\/strong> und troubleshooting.md<\/strong> erstellen. Diese Dateien werden automatisch zu Routen, auf die du zugreifen kannst, wenn du zu http:\/\/localhost:8080\/getting-started, http:\/\/localhost:8080\/usage und http:\/\/localhost:8080\/troubleshooting navigierst.<\/p>\n
              Um die Organisation deiner Dokumentation zu verbessern, kannst du spezielle Ordner f\u00fcr verwandte Dokumentationsseiten erstellen. Du kannst zum Beispiel einen Ordner mit dem Namen guide<\/strong> erstellen und ihn mit speziellen Anleitungen wie using-kinsta-stsh.md<\/strong> organisieren. Wenn du diese Struktur verwendest, wird der Inhalt von using-kinsta-stsh.md<\/strong> \u00fcber eine URL wie http:\/\/localhost:8080\/guide\/using-kinsta-stsh zug\u00e4nglich.<\/p>\n
              Du kannst auch eine README.md-<\/strong> oder index.md-Datei<\/strong> im Stammverzeichnis des Leitfadens<\/strong> erstellen. Diese Datei dient als Indexseite, die es den Nutzern erm\u00f6glicht, zu http:\/\/localhost:8080\/guide\/ zu navigieren und \u00fcber eine Seitenleiste, die du im n\u00e4chsten Abschnitt konfigurieren kannst, bequem auf die Inhalte zuzugreifen.<\/p>\n
              In diesem VuePress-Beispiel-Repository<\/a> kannst du sehen, dass alle diese Dateien erstellt wurden und dass jeder Datei einige Markdown-Inhalte hinzugef\u00fcgt wurden. Du kannst deine eigenen Dateien nach deinen W\u00fcnschen erstellen, entweder von Grund auf, um sie an deine Bed\u00fcrfnisse anzupassen, oder indem du dich von den im Repository verf\u00fcgbaren Inhalten inspirieren l\u00e4sst.<\/p>\n
              Anpassen des VuePress-Erscheinungsbildes<\/h2>\n
              Wenn du deine Dokumentationsseite mit Inhalten gef\u00fcllt hast, kann es schwierig werden, sich darin zurechtzufinden, vor allem, wenn du viele Dateien zu verwalten hast. Mit VuePress kannst du jedoch die Navigationsstruktur deiner Seite anpassen, um sie benutzerfreundlicher und \u00fcbersichtlicher zu gestalten.<\/p>\n
              Um das Aussehen und die Navigation deiner Seite anzupassen, erstelle einen Ordner .vuepress<\/strong> im Hauptverzeichnis deines Projekts. Dieser Ordner enth\u00e4lt Konfigurationsdateien und Assets f\u00fcr deine VuePress-Site.<\/p>\n
              Konfiguration der Navigation<\/h3>\n
              Erstelle im Ordner .vuepress<\/strong> eine config.js-Datei<\/strong>. Du kannst auch andere Dateiformate wie YAML (.yml), TOML (.toml) oder TypeScript (.ts) f\u00fcr deine Konfiguration verwenden.<\/p>\n
              In deiner config.js<\/strong> Datei kannst du die Navigationsstruktur deiner Seite mit dem themeConfig<\/code> Objekt definieren. Hier ist eine Beispielkonfiguration:<\/p>\n
              module.exports = {\n    title: 'Kinsta Vuepress',\n    description: 'A VuePress QuickStart for Kinsta',\n    themeConfig: {\n        nav: [\n            {\n                text: 'Guide',\n                link: '\/guide\/',\n            },\n            {\n                text: 'Static Site Hosting',\n                link: 'https:\/\/sevalla.com\/static-site-hosting\/',\n            },\n        ],\n        sidebar: {\n            '\/guide\/': [\n                {\n                    title: 'Guide',\n                    collapsable: false,\n                    children: ['', 'using-kinsta-stsh'],\n                },\n            ],\n        },\n    },\n};<\/code><\/pre>\n
              In diesem Beispiel konfigurieren wir die Seiten title<\/code> und description<\/code>, definieren Navigationslinks und richten eine Seitenleiste f\u00fcr den Bereich \/guide\/<\/code> ein.<\/p>\n
              Das Array nav<\/code> legt die Navigationslinks im oberen Bereich deiner Website fest. Das Sidebar-Objekt definiert die Struktur der Seitenleiste f\u00fcr bestimmte Abschnitte. In diesem Fall ist es f\u00fcr den Bereich \/guide\/<\/code> konfiguriert.<\/p>\n
              Du kannst mehr \u00fcber die Konfiguration der Navigationsleiste<\/a> in der VuePress-Dokumentation lesen.<\/p>\n
              Styling<\/h3>\n
              Mit VuePress kannst du das Aussehen deiner Seite durch Stile anpassen. Du kannst entweder die Standardstile mit Hilfe einiger definierter Variablen \u00fcberschreiben oder deinen eigenen Stil definieren. Um beides zu tun, erstelle einen Styles-Ordner<\/strong> im .vuepress-Ordner<\/strong><\/p>\n
              Um das Styling der Standardvorgabe einfach zu \u00fcberschreiben oder einige Variablen f\u00fcr die sp\u00e4tere Verwendung zu definieren, kannst du eine palette.styl-Datei<\/strong> in .vuepress\/styles<\/strong> erstellen. Hier findest du einige vordefinierte Variablen, die du anpassen kannst:<\/p>\n
              \/\/ colors\n$accentColor = #5333ED\n$textColor = #2c3e50\n$borderColor = #eaecef\n$codeBgColor = #282c34\n$arrowBgColor = #ccc\n$badgeTipColor = #42b983\n$badgeWarningColor = darken(#ffe564, 35%)\n$badgeErrorColor = #DA5961\n\n\/\/ layout\n$navbarHeight = 3.6rem\n$sidebarWidth = 20rem\n$contentWidth = 740px\n$homePageWidth = 960px\n\n\/\/ responsive breakpoints\n$MQNarrow = 959px\n$MQMobile = 719px\n$MQMobileNarrow = 419px<\/code><\/pre>\n
              Diese Variablen k\u00f6nnen verwendet werden, um ein einheitliches Styling auf deiner Website zu gew\u00e4hrleisten. VuePress bietet auch eine praktische M\u00f6glichkeit, zus\u00e4tzliche Stile hinzuzuf\u00fcgen. Du kannst eine index.styl-Datei<\/strong> im Ordner .vuepress\/styles<\/strong> erstellen, in der du die normale CSS-Syntax<\/a> verwenden kannst:<\/p>\n
              .content {\n  font-size 30px\n}<\/code><\/pre>\n
              Mehr \u00fcber das Styling von VuePress<\/a> erf\u00e4hrst du in der offiziellen Dokumentation.<\/p>\n
              Komponenten verwenden<\/h3>\n
              VuePress unterst\u00fctzt die Verwendung von Komponenten, um die Funktionalit\u00e4t und das Aussehen deiner Seiten zu verbessern. Du kannst Vue-Komponenten erstellen und sie in deine Markdown-Dateien einf\u00fcgen.<\/p>\n
              Erstelle einen components-Ordner in .vuepres,<\/strong> und alle *.vue<\/code> Dateien, die du in .vuepress\/components<\/strong> findest, werden automatisch als globale Komponenten registriert.<\/p>\n
              Du kannst zum Beispiel zwei Komponenten erstellen: HomeOptions.vue<\/strong> und HostingBanner.vue<\/strong>:<\/p>\n
              .\n\u2514\u2500 .vuepress\n   \u2514\u2500 components\n      \u251c\u2500 HomeOptions.vue\n      \u2514\u2500 HostingBanner.vue<\/code><\/pre>\n
              Innerhalb dieser vue.js-Komponentendateien kannst du CSS-Codes hinzuf\u00fcgen. F\u00fcgen wir nun Code zu den Komponenten HomeOptions.vue<\/strong> und HostingBanner.vue<\/strong> hinzu.<\/p>\n
              F\u00fcge den folgenden Code zu HomeOptions.vue<\/strong> hinzu:<\/p>\n
              <template>\n    <div class=\"options\">\n        <div class=\"option\">\n            <a\n                href=\"https:\/\/docs.sevalla.com\/templates\/overview\"\n                target=\"_blank\"\n            >\n                <h3>Quick Start Examples<\/h3>\n            <\/a>\n            <p>Explore quick start examples for setting up static sites.<\/p>\n        <\/div>\n        <div class=\"option\">\n            <a\n                href=\"https:\/\/docs.sevalla.com\/static-sites\/overviewgetting-started-static-site-hosting\/\"\n                target=\"_blank\"\n            >\n                <h3>Getting Started<\/h3>\n            <\/a>\n            <p>Learn how to get started with static site hosting.<\/p>\n        <\/div>\n        <div class=\"option\">\n            <a\n                href=\"https:\/\/docs.sevalla.com\/static-sites\/overviewmanage-static-sites\/\"\n                target=\"_blank\"\n            >\n                <h3>Manage Static Sites<\/h3>\n            <\/a>\n            <p>Discover how to efficiently manage your static sites.<\/p>\n        <\/div>\n    <\/div>\n<\/template>\n\n<style scoped>\n    a {\n        color: #2c3e50;\n    }\n    a:hover {\n        color: #5333ed;\n    }\n    .options {\n        display: flex;\n        gap: 10px;\n        margin: 40px 0;\n    }\n    .option {\n        border: 2px solid #eaecef;\n        border-radius: 5px;\n        padding: 10px;\n    }\n<\/style><\/code><\/pre>\n
              F\u00fcge auch den folgenden Code in HostingBanner.vue<\/strong> ein:<\/p>\n
              <template>\n    <div class=\"banner\">\n        <p>Host Your Static Site With Kinsta for Free!<\/p>\n        <a\n            href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"\n            target=\"_blank\"\n            class=\"btn\"\n            >Read More<\/a\n        >\n    <\/div>\n<\/template>\n\n<style> scoped>\n    .banner {\n        background: rgb(156, 85, 34);\n        background: linear-gradient(\n            90deg,\n            rgba(156, 85, 34, 1) 0%,\n            rgba(32, 50, 103, 1) 42%,\n            rgba(13, 18, 25, 1) 69%,\n            rgba(22, 47, 60, 1) 100%\n        );\n        color: #fff;\n        padding: 20px;\n        border-radius: 5px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex-direction: column;\n    }\n    .banner p {\n        width: 600px;\n        font-size: 40px;\n        font-weight: bold;\n        text-align: center;\n        line-height: 50px;\n    }\n    .banner .btn {\n        border-radius: 5px;\n        padding: 15px;\n        color: #1f1f1f;\n        font-weight: bold;\n        background: #fff;\n        display: inline-block;\n        margin-bottom: 10px;\n    }\n    .banner .btn:hover {\n        background: #111319;\n        color: #fff;\n    }\n<\/style><\/code><\/pre>\n
              Innerhalb einer beliebigen Markdown-Datei kannst du die Komponenten dann direkt verwenden (die Namen werden aus den Dateinamen abgeleitet):<\/p>\n
              <HomeOptions\/>\n<HostingBanner\/><\/code><\/pre>\n
              Lies mehr \u00fcber Komponenten in VuePress<\/a> in der Dokumentation.<\/p>\n
              Startseite anpassen<\/h3>\n
              In VuePress bietet das Standard-Theme ein vorgefertigtes Startseiten-Layout, das du nutzen kannst, um einen ansprechenden und informativen Startpunkt f\u00fcr deine Seite zu schaffen. Um dieses Startseiten-Layout zu nutzen, musst du home: true<\/code> angeben und einige zus\u00e4tzliche Metadaten in das YAML Frontmatter deiner Root README.md<\/strong>-Datei einf\u00fcgen.<\/p>\n
              Hier ist ein Beispiel f\u00fcr den YAML-Frontmatter:<\/p>\n
              ---\nhome: true\nheroImage: \/hero.png\nheroText: Hero Title\ntagline: Hero subtitle\nactionText: Get Started \u2192\nactionLink: \/guide\/\nfeatures:\n- title: Simplicity First\n  details: Minimal setup with markdown-centered project structure helps you focus on writing.\n- title: Vue-Powered\n  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.\n- title: Performant\n  details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.\nfooter: MIT Licensed | Copyright \u00a9 2018-present Evan You\n---<\/code><\/pre>\n
              Mit all diesen Konfigurationen sieht deine Dokumentations-Startseite wie folgt aus:<\/p>\n
              \"VuePress
              VuePress Standard-Startseite<\/figcaption><\/figure>\n
              Du kannst heroText<\/code> und tagline<\/code> oder jeden anderen Wert deaktivieren, indem du die entsprechenden Felder auf null<\/code> setzt, wenn du ein einfacheres Layout bevorzugst oder es nicht einbauen m\u00f6chtest. Alle Inhalte, die du nach dem YAML-Frontmatter (d.h. dem Metadaten-Abschnitt) einf\u00fcgst, werden wie normales Markdown behandelt und nach dem Features-Abschnitt gerendert.<\/p>\n
              Wenn du ein komplett individuelles Startseiten-Layout m\u00f6chtest, unterst\u00fctzt VuePress auch Custom Layouts. Au\u00dferdem kannst du mit der Markdown-Slot-Syntax einen Rich-Text-Footer erstellen, der mehr Flexibilit\u00e4t bei der Darstellung von Footer-Inhalten bietet. Hier ist ein Beispiel daf\u00fcr, wie du eine Rich-Text-Fu\u00dfzeile einrichtest:<\/p>\n
              ---\nhome: true\n---\n\n::: slot footer\nMade with \u2764\ufe0f by Kinsta. [Static Site Hosting](https:\/\/sevalla.com\/static-site-hosting\/)\n:::<\/code><\/pre>\n
              In diesem Fall erm\u00f6glicht dir der Inhalt im Abschnitt ::: slot footer<\/code> das Einf\u00fcgen von Links und zus\u00e4tzlichen Informationen in den Fu\u00dfzeilenbereich deiner Startseite.<\/p>\n
              Nachdem du nun wei\u00dft, wie du die oben genannten Anpassungen vornehmen kannst, f\u00fcge die zuvor erstellten Komponenten zur Startseite hinzu und entferne einige Optionen, damit die Startseite besser aussieht:<\/p>\n
              ---\nhome: true\ntagline: A VuePress QuickStart for Kinsta\nactionText: Quick Start \u2192\nactionLink: \/guide\/\n---\n\n<HomeOptions\/>\n<HostingBanner\/>\n\n::: slot footer\nMade with \u2764\ufe0f by Kinsta. [Static Site Hosting](https:\/\/sevalla.com\/static-site-hosting\/)\n:::<\/code><\/pre>\n
              \"Verwendung
              Verwendung von Komponenten auf der VuePress-Startseite<\/figcaption><\/figure>\n
              Wenn du diese VuePress-Anpassungstechniken befolgst, kannst du eine Dokumentationsseite erstellen, die nicht nur wertvolle Inhalte bietet, sondern auch ein hervorragendes Nutzererlebnis mit einer organisierten Navigation und einem ansprechenden Design.<\/p>\n
              Mehr \u00fcber die Anpassung des Standard-Themes<\/a> erf\u00e4hrst du in der Dokumentation.<\/p>\n
              Einen Blog-Bereich mit VuePress einrichten<\/h2>\n
              Das Hinzuf\u00fcgen eines Blog-Bereichs zu deiner VuePress-Website ist ein Kinderspiel, denn VuePress erm\u00f6glicht es dir, eigene Vue-Komponenten zu schreiben, die in jede Markdown-Datei eingef\u00fcgt werden k\u00f6nnen. Lass uns eine Komponente erstellen, die die Liste der Blogbeitr\u00e4ge anzeigt.<\/p>\n
              Erstelle eine Datei BlogIndex.vue<\/strong> im Ordner components<\/strong> und f\u00fcge den folgenden Code hinzu:<\/p>\n
              <template>\n    <div>\n        <div v-for=\"post in posts\" v-bind:key=\"post.path\">\n            <h2>\n                <router-link> :to=\"post.path\">{{ post.frontmatter.title }}<\/router-link>\n            <\/h2>\n            <p>{{ post.frontmatter.description }}<\/p>\n            <p><router-link> :to=\"post.path\">Read more<\/router-link><\/p>\n        <\/div>\n    <\/div>\n<\/template>\n\n<script>>\n    export default {\n        computed: {\n            posts() {\n                return this.$site.pages\n                    .filter(\n                        (x) => x.path.startsWith('\/blog\/') && !x.frontmatter.blog_index\n                    )\n                    .sort(\n                        (a, b) =>\n                            new Date(b.frontmatter.date) - new Date(a.frontmatter.date)\n                    );\n            },\n        },\n    };\n<\/script><\/code><\/pre>\n
              In dem mitgelieferten Codeschnipsel definierst du ein Vue-Template, das deine Blogbeitr\u00e4ge mit v-for<\/code> in einer Schleife durchl\u00e4uft und f\u00fcr jeden Beitrag den Titel, die Beschreibung und einen „Weiterlesen“-Link anzeigt.<\/p>\n
              Der Skriptabschnitt exportiert eine Vue-Komponente, die die Blogbeitr\u00e4ge berechnet und abruft. Diese Beitr\u00e4ge werden nach ihrem Pfad (beginnend mit \/blog\/<\/code>) und dem Fehlen des Attributs blog_index<\/code> frontmatter gefiltert. Anschlie\u00dfend werden sie nach Datum absteigend sortiert, um die neuesten Beitr\u00e4ge zuerst anzuzeigen.<\/p>\n
              Wenn du neue Blogeintr\u00e4ge erstellst, musst du das Beitragsdatum als Teil der Frontmatter-Informationen angeben. Dadurch werden die Beitr\u00e4ge so sortiert, dass die neuesten Beitr\u00e4ge zuerst erscheinen.<\/p>\n
              Um die Blogeintr\u00e4ge zu speichern, erstelle einen Ordner namens blog<\/strong> im Stammverzeichnis des Projekts. In diesem Ordner f\u00fcgst du eine README.md-Datei<\/strong> hinzu. Dies wird der Blog-Index sein, in den du die Komponente BlogIndex<\/code> einf\u00fcgst, um alle Blogbeitr\u00e4ge aufzulisten.<\/p>\n
              ---\nblog_index: true\n---\n\n# Blog\n\nWelcome To Our Blog\n\n<BlogIndex \/><\/code><\/pre>\n
              Achte darauf, dass du das Attribut blog_index<\/code> frontmatter hinzuf\u00fcgst, da es daf\u00fcr sorgt, dass der Blog-Index selbst nicht unter den einzelnen Blog-Beitr\u00e4gen aufgef\u00fchrt wird. Dieses Attribut wird beim Filtern der Beitr\u00e4ge in der Eigenschaft posts computed der Komponente BlogIndex.vue<\/strong> verwendet.<\/p>\n
              Als N\u00e4chstes erstellst du einen Blog-Ordner im Stammverzeichnis deines Projekts, in dem alle Blog-Beitr\u00e4ge gespeichert werden und in dem du jeden Beitrag erstellst. Erstelle zum Beispiel eine Datei first-post.md<\/strong> und f\u00fcge den folgenden Markdown-Inhalt hinzu:<\/p>\n
              ---\ntitle: \"My Exciting VuePress Blog Journey\"\ndate: 2023-09-28\ndescription: \"Exploring VuePress, a versatile static site generator, and sharing my experiences along the way.\"\n---\n\n# My Exciting VuePress Blog Journey\n\nIn this inaugural blog post, I embark on an exciting journey with VuePress, a powerful static site generator that's perfect for creating documentation, blogs, and more. As I delve into the world of VuePress, I'll be sharing my experiences, insights, and tips on making the most out of this fantastic tool.<\/code><\/pre>\n
              Stelle sicher, dass du f\u00fcr jeden Blog-Beitrag wichtige Einstellungen wie den Titel des Beitrags, das Datum und andere relevante Metadaten definierst. Diese sorgf\u00e4ltige Organisation stellt sicher, dass deine Blogposts zusammenh\u00e4ngend dargestellt werden und ein ansprechendes Leseerlebnis f\u00fcr dein Publikum bieten.<\/p>\n
              \"Hinzuf\u00fcgen
              Hinzuf\u00fcgen eines Blogs zu VuePress<\/figcaption><\/figure>\n
              Schlie\u00dflich kannst du die Blog-Navigation in der Datei .vuepress\/config.js<\/strong> zu deiner Navigationsleiste hinzuf\u00fcgen:<\/p>\n
              nav: [\n            {\n                text: 'Guide',\n                link: '\/guide\/',\n            },\n            { text: 'Blog', link: '\/blog\/' },\n            {\n                text: 'Static Site Hosting',\n                link: 'https:\/\/sevalla.com\/static-site-hosting\/',\n            },\n        ],<\/code><\/pre>\n
              Es gibt noch viel mehr, was du mit VuePress machen kannst, z. B. Plugins hinzuf\u00fcgen<\/a>, ein eigenes Theme verwenden<\/a> oder sogar ein eigenes Theme erstellen<\/a>.<\/p>\n
              VuePress Static Site auf Kinsta bereitstellen<\/h2>\n
              Kinsta erm\u00f6glicht es dir, bis zu 100 statische Websites<\/a> kostenlos<\/strong> zu hosten. Dazu musst du deinen Code zu deinem bevorzugten Git-Anbieter (Bitbucket<\/a>, GitHub<\/a> oder GitLab<\/a>) pushen und ihn dann auf Kinsta bereitstellen.<\/p>\n
              Bevor du deine Dateien an einen Git-Anbieter weitergibst, solltest du im Stammverzeichnis deines Projekts eine .<\/a>gitignore-Datei<\/a> erstellen, in der du die Dateien und Ordner angibst, die Git beim Weitergeben deines Codes ignorieren soll:<\/p>\n
              # dependencies\n\/node_modules\n\n# build directory\n.\/docs\/.vuepress\/dist\n\/public<\/code><\/pre>\n