{
    "componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
    "path": "/getting-started/setup",
    "result": {"data":{"contentPage":{"title":"Set up a new docs site","websitePrimaryColor":"#003037","beta":false,"excludeFromSearchIndex":false,"allowWideContentLayout":false,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Set up a new docs site\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", {\n    \"id\": \"section-install-and-configure\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"install-and-configure\"\n  }, \"Install and configure\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"A Docs-Kit website is a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://gatsbyjs.com\"\n  }, \"Gatsby\"), \" project with at least the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@commercetools-docs/gatsby-theme-docs\"), \" Gatsby theme installed. The theme is providing not only the visual design but also all core functionality.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"To create a new documentation website, create an empty folder and run the following commands to initialize a minimal setup (Node.js is assumed to be installed).\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-console\"\n  }, \"npx install-peerdeps --dev @commercetools-docs/gatsby-theme-docs\\nmkdir src\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This can take some time, creates a bare \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \" file and downloads the dependencies.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Then create a file \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" with the following content and modify the strings starting \\\"change-\\\" to your project name. The docs kit is preconfigured to host sites under a path prefix because one Gatsby website represents only one part (or \\\"microsite\\\") of the overall documentation.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"module.exports = {\\n  pathPrefix: '/change-path-prefix',\\n  siteMetadata: {\\n    title: 'CHANGE TITLE',\\n    description: 'CHANGE DESCRIPTION',\\n  },\\n  plugins: [\\n    {\\n      resolve: '@commercetools-docs/gatsby-theme-docs',\\n      options: {\\n        websiteKey: 'change-website-key',\\n      },\\n    },\\n  ],\\n};\\n\"))), mdx(\"section\", {\n    \"id\": \"section-start-the-local-preview-server\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"start-the-local-preview-server\"\n  }, \"Start the local preview server\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Now start the development server:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-console\"\n  }, \"npm exec gatsby develop\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You will see the \\\"404 Not Found\\\" page of the development server because there is no page created yet.\\nThe Docs-Kit has automatically created the conventional folder structure for you:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"\\u251C\\u2500\\u2500 src\\n\\u2502   \\u251C\\u2500\\u2500 content\\n\\u2502   \\u2502   \\u251C\\u2500\\u2500 files\\n\\u2502   \\u251C\\u2500\\u2500 images\\n\\u2502   \\u2514\\u2500\\u2500 data\\n\\u2514\\u2500\\u2500 static\\n    \\u2514\\u2500\\u2500 downloads\\n\"))), mdx(\"section\", {\n    \"id\": \"section-start-writing-pages\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"start-writing-pages\"\n  }, \"Start writing pages\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Now create a file \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.mdx\"), \" in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/content\"), \" folder and add some markdown content.\\nThis is your home page and the only file named \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index\"), \".\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"All pages are served on a URL path that matches the filename inside \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/content\"), \" without the file extension. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/content/example-topic/example-page.mdx\"), \" in a page with path prefix \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"my-site\"), \" would be served as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/my-site/example-topic/example-page\"), \" in production.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"All pages must be in MDX format.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Read more: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/documentation/writing/pages\"\n  }, \"Writing pages\"))), mdx(\"section\", {\n    \"id\": \"section-next-steps\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"next-steps\"\n  }, \"Next steps\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Head on to the following documentation to complete your setup and writing skills:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/documentation/writing/navigation\"\n  }, \"Define the navigation menu\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/documentation/configuration/theme\"\n  }, \"Site and theme configuration\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/documentation/writing/files-folders\"\n  }, \"File and folder structure\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Of course, you also want to give your project the proper tooling and configuration that you give any Javascript project. As a minimum you should complete the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \" data, add a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".gitignore\"), \", a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"LICENSE\"), \" file, a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"README.md\"), \". Take a closer look at the root folder of the repository of the Docs-Kit, it has a lot more than needed in an average documentation site but you should find examples for most needs.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Finally, don't forget to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/documentation/configuration/deploy\"\n  }, \"deploy\"), \".\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"Install and configure","url":"#install-and-configure"},{"title":"Start the local preview server","url":"#start-the-local-preview-server"},{"title":"Start writing pages","url":"#start-writing-pages"},{"title":"Next steps","url":"#next-steps"}]},"navLevels":3,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":1}},"pageContext":{"slug":"/getting-started/setup","shortTitle":"Install a site","hasReleaseNotes":false}},
    "staticQueryHashes": ["1145184116","2494036674","3295477089","3359654165","3845541775","636942989"]}