[{"data":1,"prerenderedAt":32},["ShallowReactive",2],{"clay-page:\u002F3.x\u002Fgetting-started\u002Fquick-start":3},{"html":4,"toc":5,"description":28,"hero":29,"list":30,"socialImage":31},"\u003Ch1 id=\"quick-start\">Quick Start\u003C\u002Fh1>\n\u003Cp>This guide takes you from an empty folder to a finished documentation site in about five minutes.\u003C\u002Fp>\n\u003Ch2 id=\"1-create-the-project\">\u003Ca class=\"heading-anchor\" href=\"#1-create-the-project\" aria-label=\"Link to this section\" data-route=\"#1-create-the-project\">#\u003C\u002Fa>1. Create the project\u003C\u002Fh2>\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\">mkdir\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> my-docs\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">cd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> my-docs\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> init\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> -y\u003C\u002Fspan>\u003C\u002Fspan>\n\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\u003Ch2 id=\"2-configure-the-site\">\u003Ca class=\"heading-anchor\" href=\"#2-configure-the-site\" aria-label=\"Link to this section\" data-route=\"#2-configure-the-site\">#\u003C\u002Fa>2. Configure the site\u003C\u002Fh2>\n\u003Cp>Create \u003Ccode>clay.yaml\u003C\u002Fcode> in the project folder. Only the title is required:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\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\u003Ch2 id=\"3-write-the-first-page\">\u003Ca class=\"heading-anchor\" href=\"#3-write-the-first-page\" aria-label=\"Link to this section\" data-route=\"#3-write-the-first-page\">#\u003C\u002Fa>3. Write the first page\u003C\u002Fh2>\n\u003Cp>Create a \u003Ccode>docs\u002F\u003C\u002Fcode> folder with a Markdown file, \u003Ccode>docs\u002Fintroduction.md\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\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:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">Introduction\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">fa-solid fa-door-open\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\"># Introduction\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Welcome to \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\">. This is the first page of its documentation.\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\u003Cp>The part between the \u003Ccode>---\u003C\u002Fcode> lines is front matter. It is optional; without it, Clay takes the title from the first heading. See \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fwriting\u002Fpages\" data-route=\"\u002F3.x\u002Fwriting\u002Fpages\">pages\u003C\u002Fa> for all fields.\u003C\u002Fp>\n\u003Ch2 id=\"4-preview-while-you-write\">\u003Ca class=\"heading-anchor\" href=\"#4-preview-while-you-write\" aria-label=\"Link to this section\" data-route=\"#4-preview-while-you-write\">#\u003C\u002Fa>4. Preview while you write\u003C\u002Fh2>\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\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> dev\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\u003Cp>Open \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>. The start page lists your page; click it to read it. Edit the Markdown file and save: the browser reloads with your change.\u003C\u002Fp>\n\u003Ch2 id=\"5-add-structure\">\u003Ca class=\"heading-anchor\" href=\"#5-add-structure\" aria-label=\"Link to this section\" data-route=\"#5-add-structure\">#\u003C\u002Fa>5. Add structure\u003C\u002Fh2>\n\u003Cp>Pages in a folder become a section in the navigation. Create \u003Ccode>docs\u002Fguides\u002Fsetup.md\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\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\"># Setup\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">How to set up 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\u003Cp>The sidebar now shows a \u003Cstrong>Guides\u003C\u002Fstrong> section. To give the folder another name, an icon and an introduction of its own, add \u003Ccode>docs\u002Fguides\u002Findex.md\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\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:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">User Guides\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">fa-solid fa-book\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">true\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\"># User Guides\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Everything you need to use My Project, step by step.\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\u003Cp>The text becomes the folder’s page at \u003Ccode>\u002Fguides\u003C\u002Fcode>, with a list of its pages below. In the same way, \u003Ccode>docs\u002Findex.md\u003C\u002Fcode> becomes the start page; see \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Forganizing\u002Findex-pages\" data-route=\"\u002F3.x\u002Forganizing\u002Findex-pages\">index pages\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2 id=\"6-build-the-site\">\u003Ca class=\"heading-anchor\" href=\"#6-build-the-site\" aria-label=\"Link to this section\" data-route=\"#6-build-the-site\">#\u003C\u002Fa>6. Build the site\u003C\u002Fh2>\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\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> build\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\u003Cp>Clay checks your docs, renders every page and writes a static site to \u003Ccode>publish\u002Fpublic\u003C\u002Fcode>. Check it the way a web host would serve it:\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\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> preview\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\u003Cp>That’s it: \u003Ccode>publish\u002Fpublic\u003C\u002Fcode> is ready to upload. \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fdeployment\u002Fgithub-pages\" data-route=\"\u002F3.x\u002Fdeployment\u002Fgithub-pages\">GitHub Pages\u003C\u002Fa> shows how to publish it automatically on every push.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-note\">\n\u003Cp class=\"markdown-alert-title text-base-content\">\u003Ci class=\"fa-solid fa-sticky-note mr-2\">\u003C\u002Fi>Note\u003C\u002Fp>\n\u003Cp>Add \u003Ccode>publish\u002F\u003C\u002Fcode> and \u003Ccode>node_modules\u002F\u003C\u002Fcode> to your \u003Ccode>.gitignore\u003C\u002Fcode>. The build output is created fresh on every build and does not belong in the repository.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"where-to-go-from-here\">\u003Ca class=\"heading-anchor\" href=\"#where-to-go-from-here\" aria-label=\"Link to this section\" data-route=\"#where-to-go-from-here\">#\u003C\u002Fa>Where to go from here\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Write the start page: \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Forganizing\u002Findex-pages\" data-route=\"\u002F3.x\u002Forganizing\u002Findex-pages\">index pages\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Order pages and folders: \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Forganizing\u002Fnavigation\" data-route=\"\u002F3.x\u002Forganizing\u002Fnavigation\">navigation\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>See every setting: \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fconfiguration\u002Fclay-yaml\" data-route=\"\u002F3.x\u002Fconfiguration\u002Fclay-yaml\">clay.yaml\u003C\u002Fa>.\u003C\u002Fli>\n\u003C\u002Ful>\n",[6,10,13,16,19,22,25],{"id":7,"text":8,"level":9},"1-create-the-project","1. Create the project",2,{"id":11,"text":12,"level":9},"2-configure-the-site","2. Configure the site",{"id":14,"text":15,"level":9},"3-write-the-first-page","3. Write the first page",{"id":17,"text":18,"level":9},"4-preview-while-you-write","4. Preview while you write",{"id":20,"text":21,"level":9},"5-add-structure","5. Add structure",{"id":23,"text":24,"level":9},"6-build-the-site","6. Build the site",{"id":26,"text":27,"level":9},"where-to-go-from-here","Where to go from here","Build your first Clay site from an empty folder in five minutes.",null,false,"\u002F_clay\u002Fsocial\u002F3.x\u002Fgetting-started\u002Fquick-start.png",1792666368820]