[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fgetting-started":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"getting-started\">Getting Started\u003C\u002Fh1>\n\u003Cp>Clay turns a folder of Markdown files into a documentation website. You write pages in \u003Ccode>docs\u002F\u003C\u002Fcode>, describe the site in \u003Ccode>clay.yaml\u003C\u002Fcode>, and Clay builds static files you can publish anywhere. No templates, no theme to configure, no JavaScript to write.\u003C\u002Fp>\n\u003Cdiv class=\"clay-cards not-prose\">\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fgetting-started\u002Fintroduction\" data-route=\"\u002F4.x\u002Fgetting-started\u002Fintroduction\">\u003Ci class=\"clay-card-icon fa-solid fa-house\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Introduction\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">What Clay is, what it does for you and how a Clay site comes together.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fgetting-started\u002Finstallation\" data-route=\"\u002F4.x\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\">Install Clay into a project with npm, pnpm or yarn, or run it without installing anything.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fgetting-started\u002Fquick-start\" data-route=\"\u002F4.x\u002Fgetting-started\u002Fquick-start\">\u003Ci class=\"clay-card-icon fa-solid fa-bolt\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Quick Start\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">Build your first Clay site from an empty folder in five minutes.\u003C\u002Fspan>\u003C\u002Fa>\u003Ca class=\"clay-card\" href=\"\u002Fclay-example-repo\u002F4.x\u002Fgetting-started\u002Fproject-structure\" data-route=\"\u002F4.x\u002Fgetting-started\u002Fproject-structure\">\u003Ci class=\"clay-card-icon fa-solid fa-folder-tree\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"clay-card-title\">Project Structure\u003C\u002Fspan>\u003Cspan class=\"clay-card-text\">The files of a Clay project, what each one does and what belongs in git.\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Ch2 id=\"your-first-five-minutes\">\u003Ca class=\"heading-anchor\" href=\"#your-first-five-minutes\" aria-label=\"Link to this section\" data-route=\"#your-first-five-minutes\">#\u003C\u002Fa>Your first five minutes\u003C\u002Fh2>\n\u003Cdiv class=\"clay-steps\">\u003Col>\n\u003Cli>\u003Cp>\u003Cstrong>Install Clay\u003C\u002Fstrong> in your project:\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=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Name the site\u003C\u002Fstrong> in \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\">\"My Project\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Write a page\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\"># Welcome\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">This is the documentation of \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000080;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\">**My Project**\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=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Watch it live\u003C\u002Fstrong> with \u003Ccode>npx clay dev\u003C\u002Fcode>, at \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>Build it\u003C\u002Fstrong> with \u003Ccode>npx clay build\u003C\u002Fcode>. The site is in \u003Ccode>publish\u002Fpublic\u003C\u002Fcode>, ready to upload.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\u003Cp>The \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fgetting-started\u002Fquick-start\" data-route=\"\u002F4.x\u002Fgetting-started\u002Fquick-start\">quick start\u003C\u002Fa> goes through the same steps in more detail, with a section of its own and a look at the result.\u003C\u002Fp>\n\u003Ch2 id=\"what-you-need\">\u003Ca class=\"heading-anchor\" href=\"#what-you-need\" aria-label=\"Link to this section\" data-route=\"#what-you-need\">#\u003C\u002Fa>What you need\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 or newer, which comes with npm, see \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fgetting-started\u002Finstallation\" data-route=\"\u002F4.x\u002Fgetting-started\u002Finstallation\">installation\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>Your docs\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>Markdown files, or the wish to write some. Existing READMEs work as they are\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>An editor\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>Any. \u003Ccode>clay dev\u003C\u002Fcode> shows every change in the browser right away\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>A host\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>Later, to publish: \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fpublishing\u002Fgithub-pages\" data-route=\"\u002F4.x\u002Fpublishing\u002Fgithub-pages\">GitHub Pages\u003C\u002Fa> is free and set up in minutes\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"questions-before-you-start\">\u003Ca class=\"heading-anchor\" href=\"#questions-before-you-start\" aria-label=\"Link to this section\" data-route=\"#questions-before-you-start\">#\u003C\u002Fa>Questions before you 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\">Do I need to know Vue, Nuxt or JavaScript?\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cdiv class=\"collapse-content\">\u003Cp>No. Clay is built with them, but you only write Markdown and a few lines of YAML. There is no theme to set up and no code to write.\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\">Can I use the Markdown files I already have?\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cdiv class=\"collapse-content\">\u003Cp>Yes. Clay reads the Markdown you know from GitHub, and links between \u003Ccode>.md\u003C\u002Fcode> files work like they do there. Copy your files into \u003Ccode>docs\u002F\u003C\u002Fcode>, start \u003Ccode>clay dev\u003C\u002Fcode>, and fix what the \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fpublishing\u002Fbuild-checks\" data-route=\"\u002F4.x\u002Fpublishing\u002Fbuild-checks\">build checks\u003C\u002Fa> report.\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\">Does my project have to be a JavaScript project?\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cdiv class=\"collapse-content\">\u003Cp>No. Clay runs with \u003Ccode>npx\u003C\u002Fcode> in any repository, written in Go, Python, Java or anything else, see \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fgetting-started\u002Finstallation#without-installing\" data-route=\"\u002F4.x\u002Fgetting-started\u002Finstallation#without-installing\">without installing\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\">What does it cost?\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cdiv class=\"collapse-content\">\u003Cp>Nothing. Clay is open source under the Apache 2.0 license, and the sites it builds run on any free static host.\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>Tip\u003C\u002Fp>\n\u003Cp>Already have a Clay site? See \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fguides\u002Fupgrading-to-clay-4\" data-route=\"\u002F4.x\u002Fguides\u002Fupgrading-to-clay-4\">upgrading to Clay 4\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[6,10,13],{"id":7,"text":8,"level":9},"your-first-five-minutes","Your first five minutes",2,{"id":11,"text":12,"level":9},"what-you-need","What you need",{"id":14,"text":15,"level":9},"questions-before-you-start","Questions before you start","What Clay is, how to install it and how to build a first site in five minutes.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fgetting-started.png",1792666369154]