[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fde\u002Fgetting-started":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"erste-schritte\">Erste Schritte\u003C\u002Fh1>\n\u003Cp>Clay macht aus einem Ordner voller Markdown-Dateien eine Dokumentationsseite. Du schreibst Seiten in \u003Ccode>docs\u002F\u003C\u002Fcode>, beschreibst die Seite in \u003Ccode>clay.yaml\u003C\u002Fcode>, und Clay erzeugt statische Dateien, die du überall veröffentlichen kannst. Keine Templates, kein Theme zum Einrichten, kein JavaScript zum Schreiben.\u003C\u002Fp>\n\u003Cdiv class=\"clay-cards not-prose\">\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fgetting-started\u002Fintroduction\" data-route=\"\u002F4.x\u002Fde\u002Fgetting-started\u002Fintroduction\">\u003Ci class=\"clay-card-icon fa-solid fa-house\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Einführung\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Was Clay ist, was es dir abnimmt und wie eine Clay-Seite entsteht.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fgetting-started\u002Finstallation\" data-route=\"\u002F4.x\u002Fde\u002Fgetting-started\u002Finstallation\">\u003Ci class=\"clay-card-icon fa-solid fa-download\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Installation\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Clay mit npm, pnpm oder yarn in ein Projekt installieren, oder ganz ohne Installation ausführen.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fgetting-started\u002Fquick-start\" data-route=\"\u002F4.x\u002Fde\u002Fgetting-started\u002Fquick-start\">\u003Ci class=\"clay-card-icon fa-solid fa-bolt\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Schnellstart\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Deine erste Clay-Seite, von einem leeren Ordner bis zum fertigen Build in fünf Minuten.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fgetting-started\u002Fproject-structure\" data-route=\"\u002F4.x\u002Fde\u002Fgetting-started\u002Fproject-structure\">\u003Ci class=\"clay-card-icon fa-solid fa-folder-tree\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Projektstruktur\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Die Dateien eines Clay-Projekts, wofür jede da ist und was ins Git gehört.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Ch2 id=\"deine-ersten-fünf-minuten\">\u003Ca class=\"heading-anchor\" href=\"#deine-ersten-fünf-minuten\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#deine-ersten-fünf-minuten\">#\u003C\u002Fa>Deine ersten fünf Minuten\u003C\u002Fh2>\n\u003Cdiv class=\"clay-steps\">\u003Col>\n\u003Cli>\u003Cp>\u003Cstrong>Installiere Clay\u003C\u002Fstrong> in deinem Projekt:\u003C\u002Fp>\n\u003Cdiv class=\"code-block is-terminal has-bar\">\u003Cdiv class=\"code-terminal\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> install\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> --save-dev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Benenne die Seite\u003C\u002Fstrong> in der \u003Ccode>clay.yaml\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>clay.yaml\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"Mein Projekt\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Schreib eine Seite\u003C\u002Fstrong>, \u003Ccode>docs\u002Findex.md\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>docs\u002Findex.md\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\"># Willkommen\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Das ist die Dokumentation von \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000080;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\">**Mein Projekt**\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Schau live zu\u003C\u002Fstrong> mit \u003Ccode>npx clay dev\u003C\u002Fcode>, unter \u003Ca href=\"http:\u002F\u002Flocalhost:3000\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>http:\u002F\u002Flocalhost:3000\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Bau sie\u003C\u002Fstrong> mit \u003Ccode>npx clay build\u003C\u002Fcode>. Die Seite liegt in \u003Ccode>publish\u002Fpublic\u003C\u002Fcode>, bereit zum Hochladen.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\u003Cp>Der \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fgetting-started\u002Fquick-start\" data-route=\"\u002F4.x\u002Fde\u002Fgetting-started\u002Fquick-start\">Schnellstart\u003C\u002Fa> geht dieselben Schritte ausführlicher durch, mit einem eigenen Bereich und einem Blick aufs Ergebnis.\u003C\u002Fp>\n\u003Ch2 id=\"was-du-brauchst\">\u003Ca class=\"heading-anchor\" href=\"#was-du-brauchst\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#was-du-brauchst\">#\u003C\u002Fa>Was du brauchst\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003C\u002Fth>\n\u003Cth>\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Cstrong>Node.js\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>20.19 oder neuer, das npm mitbringt, siehe \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fgetting-started\u002Finstallation\" data-route=\"\u002F4.x\u002Fde\u002Fgetting-started\u002Finstallation\">Installation\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>Deine Dokumentation\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>Markdown-Dateien, oder die Lust, welche zu schreiben. Vorhandene READMEs funktionieren, wie sie sind\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>Einen Editor\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>Jeden. \u003Ccode>clay dev\u003C\u002Fcode> zeigt jede Änderung sofort im Browser\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>Einen Hoster\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>Später, zum Veröffentlichen: \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fpublishing\u002Fgithub-pages\" data-route=\"\u002F4.x\u002Fde\u002Fpublishing\u002Fgithub-pages\">GitHub Pages\u003C\u002Fa> ist kostenlos und in Minuten eingerichtet\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"fragen-vor-dem-start\">\u003Ca class=\"heading-anchor\" href=\"#fragen-vor-dem-start\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#fragen-vor-dem-start\">#\u003C\u002Fa>Fragen vor dem Start\u003C\u002Fh2>\n\u003Cdetails class=\"clay-details collapse\">\u003Csummary class=\"collapse-title\">\u003Cspan class=\"clay-details-icon\" aria-hidden=\"true\">\u003Ci class=\"fa-solid fa-chevron-right\">\u003C\u002Fi>\u003C\u002Fspan>\u003Cspan class=\"clay-details-title\">Muss ich Vue, Nuxt oder JavaScript können?\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cdiv class=\"collapse-content\">\u003Cp>Nein. Clay ist damit gebaut, aber du schreibst nur Markdown und ein paar Zeilen YAML. Es gibt kein Theme einzurichten und keinen Code zu schreiben.\u003C\u002Fp>\n\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails class=\"clay-details collapse\">\u003Csummary class=\"collapse-title\">\u003Cspan class=\"clay-details-icon\" aria-hidden=\"true\">\u003Ci class=\"fa-solid fa-chevron-right\">\u003C\u002Fi>\u003C\u002Fspan>\u003Cspan class=\"clay-details-title\">Kann ich meine vorhandenen Markdown-Dateien nutzen?\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cdiv class=\"collapse-content\">\u003Cp>Ja. Clay liest das Markdown, das du von GitHub kennst, und Links zwischen \u003Ccode>.md\u003C\u002Fcode>-Dateien funktionieren wie dort. Kopier deine Dateien nach \u003Ccode>docs\u002F\u003C\u002Fcode>, starte \u003Ccode>clay dev\u003C\u002Fcode> und behebe, was die \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fpublishing\u002Fbuild-checks\" data-route=\"\u002F4.x\u002Fde\u002Fpublishing\u002Fbuild-checks\">Build-Prüfungen\u003C\u002Fa> melden.\u003C\u002Fp>\n\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails class=\"clay-details collapse\">\u003Csummary class=\"collapse-title\">\u003Cspan class=\"clay-details-icon\" aria-hidden=\"true\">\u003Ci class=\"fa-solid fa-chevron-right\">\u003C\u002Fi>\u003C\u002Fspan>\u003Cspan class=\"clay-details-title\">Muss mein Projekt ein JavaScript-Projekt sein?\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cdiv class=\"collapse-content\">\u003Cp>Nein. Clay läuft mit \u003Ccode>npx\u003C\u002Fcode> in jedem Repository, ob in Go, Python, Java oder etwas anderem geschrieben, siehe \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fgetting-started\u002Finstallation#ohne-installation\" data-route=\"\u002F4.x\u002Fde\u002Fgetting-started\u002Finstallation#ohne-installation\">ohne Installation\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails class=\"clay-details collapse\">\u003Csummary class=\"collapse-title\">\u003Cspan class=\"clay-details-icon\" aria-hidden=\"true\">\u003Ci class=\"fa-solid fa-chevron-right\">\u003C\u002Fi>\u003C\u002Fspan>\u003Cspan class=\"clay-details-title\">Was kostet es?\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cdiv class=\"collapse-content\">\u003Cp>Nichts. Clay ist Open Source unter der Apache-2.0-Lizenz, und die Seiten, die es baut, laufen auf jedem kostenlosen statischen Hoster.\u003C\u002Fp>\n\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tipp\u003C\u002Fp>\n\u003Cp>Du hast schon eine Clay-Seite? Siehe \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fguides\u002Fupgrading-to-clay-4\" data-route=\"\u002F4.x\u002Fde\u002Fguides\u002Fupgrading-to-clay-4\">Umstieg auf Clay 4\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[6,10,13],{"id":7,"text":8,"level":9},"deine-ersten-fünf-minuten","Deine ersten fünf Minuten",2,{"id":11,"text":12,"level":9},"was-du-brauchst","Was du brauchst",{"id":14,"text":15,"level":9},"fragen-vor-dem-start","Fragen vor dem Start","Was Clay ist, wie du es installierst und in fünf Minuten eine erste Seite baust.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fde\u002Fgetting-started.png",1792666372390]