{
    "componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
    "path": "/configuration/setup",
    "result": {"data":{"contentPage":{"title":"Set up a new docs site","globalNotification":null,"websitePrimaryColor":"#808080","beta":false,"isGlobalBeta":false,"excludeFromSearchIndex":true,"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  \"beta\": false\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-getting-started\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"getting-started\"\n  }, \"Getting started\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"To create a new documentation website you need to install this theme and its peer dependencies.\\nIt is the core \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.com/docs/themes/\"\n  }, \"Gatsby theme\"), \" for building commercetools documentation websites.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"npx install-peerdeps --dev @commercetools-docs/gatsby-theme-docs\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Then setup the theme configuration:\"), 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-choose-a-path-prefix\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"choose-a-path-prefix\"\n  }, \"Choose a path prefix\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"All commercetools documentation websites are served under \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docs.commercetools.com\"), \". To make this work, all documentation websites must be bundled for production using a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pathPrefix\"), \". This value determines the URL path where the website is served from.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For example, for the \\\"Custom Applications\\\" website, the path prefix is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/custom-applications\"), \".\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pathPrefix\"), \" is configured in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" file.\")), mdx(\"section\", {\n    \"id\": \"section-folder-structure\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"folder-structure\"\n  }, \"Folder structure\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The project structure should contain at least the following files and folders:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"\\u251C\\u2500\\u2500 .eslintrc.yml\\n\\u251C\\u2500\\u2500 gatsby-config.js\\n\\u251C\\u2500\\u2500 package.json\\n\\u251C\\u2500\\u2500 src\\n\\u2502   \\u251C\\u2500\\u2500 content\\n\\u2502   \\u2502   \\u251C\\u2500\\u2500 files\\n\\u2502   \\u2502   \\u2514\\u2500\\u2500 index.mdx\\n\\u2502   \\u251C\\u2500\\u2500 images\\n\\u2502   \\u2514\\u2500\\u2500 data\\n\\u2502       \\u2514\\u2500\\u2500 navigation.yaml\\n\\u2514\\u2500\\u2500 static\\n    \\u2514\\u2500\\u2500 downloads\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".eslintrc.yaml\"), \": in case you're using a monorepository, you need to provide this file with an empty object \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{}\"), \", otherwise provide a valid ESLint configuration.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \": this is required for a Gatsby website and should contain the website specific configuration. If your website requires the usage of \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/documentation/configuration/extensions#using-theme-with-add-ons\"\n  }, \"add-ons\"), \", you need to configure the main theme using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"configureThemeWithAddOns\"), \" helper function. See examples below.\"))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const {\\n  configureThemeWithAddOns,\\n} = require('@commercetools-docs/gatsby-theme-docs/configure-theme');\\nconst colorPresets = require('@commercetools-docs/gatsby-theme-docs/color-presets');\\n\\nmodule.exports = {\\n  pathPrefix: '/change-path-prefix',\\n  siteMetadata: {\\n    title: 'CHANGE TITLE',\\n    description: 'CHANGE DESCRIPTION',\\n    betaLink: '',\\n  },\\n\\n  plugins: [\\n    // pass plugin options here\\n    ...configureThemeWithAddOns({\\n      // See available plugin options below\\n      websiteKey: 'change-website-key', // required\\n      colorPreset: colorPresets.base.key,\\n      additionalPrismLanguages: ['scala', 'csharp'],\\n      excludeFromSearchIndex: false,\\n\\n      // See https://github.com/commercetools/commercetools-docs-kit/tree/master/packages/gatsby-theme-docs#using-theme-with-add-ons\\n      addOns: [\\n        '@commercetools-docs/gatsby-theme-code-examples',\\n        '@commercetools-docs/gatsby-theme-constants',\\n      ],\\n    }),\\n  ],\\n};\\n\"))), mdx(\"section\", {\n    \"id\": \"section-available-options-for-the-theme-plugin\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"available-options-for-the-theme-plugin\"\n  }, \"Available Options for the Theme Plugin\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"websiteKey\"), \" (\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"required\"), \"): the identifier of the website, used for error reporting and similar concerns. Usually this value would be the same as the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pathPrefix\"), \" without the leading slash and without whitespaces.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"colorPreset\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): pick the \\\"look and feel\\\" of the website by choosing one of the available \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"./extensions#using-theme-color-presets\"\n  }, \"Color Presets\"), \". \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Default: \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"base\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gaTrackingId\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): this is the Google Analytics tracking ID. For all sites hosted on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docs.commercetools.com\"), \" domain the ID must be: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"UA-38285631-3\"), \".\"), mdx(\"blockquote\", {\n    parentName: \"li\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"For test websites the gaTrackingId field should not be set.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hubspotTrackingCode\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): this is HubSpot tracking code.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"excludeFromSearchIndex\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): indicates that the website should not be indexed by crawlers. This option effectively sets the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"robots=\\\"noindex\\\"\"), \" meta attribute. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Default: \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"true\")), \"\\n(Note that this doesn't currently work with Algolia's Docsearch crawler)\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"allowWideContentLayout\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): enables all content pages to use a wider layout that gives space to side-by-side content on large viewports. This must be used with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"wideLayout\"), \", see also the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"wideLayout\"), \" frontmatter option and the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<SideBySide>\"), \" component on how to use it. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Default: \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"false\")), \".\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"beta\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): indicates that the website should be marked as \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"beta\"), \". Each page gets a beta flag, no matter if the page frontmatter has it defined or not. Furthermore, in the main navigation, the beta flag is shown near the website title and not next to each link. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Default: \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"false\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createNodeSlug\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): in case you need to have more control over the creation of the page slugs, you can implement this function. This is useful if for example your website has content files in other file system locations and you want to provide a more meaningful URL path.\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"type Options = { node: Node }; // A Gatsby Node\\ntype CreateNodeSlugFn = (originalSlug: string, { node }: Options) => string;\\n\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"availablePrismLanguages\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): in case you need to include \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Prism languages\"), \" that are \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js\"\n  }, \"not included by default by \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"prism-react-renderer\")), \", you can pass a list of them here.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"overrideDefaultConfigurationData\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \", array of glob strings): allows to replace the configuration files in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/data\"), \" instead of augmenting them. The option is passed to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ignore\"), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org/packages/gatsby-source-filesystem/#options\"\n  }, \"option of the gatsby filesystem plugin\"), \". For example, by passing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"['**/top-*']\"), \" and placing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"top-menu.yaml\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"top-side-menu.yaml\"), \" files in the website's \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/data\"), \" folder the top navigation can be overridden completely. If this option is used, the files matching the glob patterns \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"must\"), \" be provided.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"enableCanonicalUrls\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): indicates that the website should use canonical URLs, pointing to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docs.commercetools.com\"), \" domain. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Default: \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"true\")))))), mdx(\"section\", {\n    \"id\": \"section-auto-generated-directories\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"auto-generated-directories\"\n  }, \"Auto Generated Directories\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"These are required directories:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/content\"), \": this is where you would put your content pages as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"*.mdx\"), \" files (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"see \", mdx(\"a\", {\n    parentName: \"em\",\n    \"href\": \"/documentation/writing/pages\"\n  }, \"Writing content pages\")), \").\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/content/files\"), \": this folder should contain static files that can be referenced within the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"*.mdx\"), \" content files. For example SVG files, PDF files, etc.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/images\"), \": this folder should contain images that are used within the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"*.mdx\"), \" content files. Images in this folder are processed and optimized by Gatsby for lazy loading. Supported image formats are \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"JPEG\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"PNG\"), \".\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/data/navigation.yaml\"), \": this contains the website main navigation links. The structure of the file is a \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"list of chapters\"), \" as following:\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-yaml\"\n  }, \"- chapter-title: This is the title\\n  beta: false # (optional): will show the beta flag next to the chapter title\\n  pagination: false # (optional) hides the prev/next content pagination at the bottom of the pages in this chapter. Use for non-linear content like reference documentation.\\n  pages:\\n    - title: The first page\\n      path: '/chapter-1/first-page'\\n      beta: false # (optional): will show the beta flag next to the page title\\n    - title: Another page\\n      path: '/chapter-1/another-page'\\n    # another page, and so on...\\n- chapter-title: {} # another chapter, and so on...\\n\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"static\"), \": this folder should contain files that do not need to be processed by Gatsby and will be served as-is. See \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.com/docs/static-folder/\"\n  }, \"Gatsby static folder\"), \".\", mdx(\"br\", null), \"\\nNote that any \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".html\"), \" file that is referenced as a link within the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"*.mdx\"), \" content files is opened as a \\\"static\\\" HTML link, so when clicking on it the browser opens the link as a normal page.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"static/downloads\"), \": this folder should contain static files that can be referenced in the links within the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"*.mdx\"), \" content files. All links starting with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/downloads\"), \" will be rendered as \\\"static\\\" HTML links, so when clicking on it the browser opens the link as a normal page.\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"Getting started","url":"#getting-started","items":[{"title":"Choose a path prefix","url":"#choose-a-path-prefix"},{"title":"Folder structure","url":"#folder-structure"},{"title":"Available Options for the Theme Plugin","url":"#available-options-for-the-theme-plugin"}]},{"title":"Auto Generated Directories","url":"#auto-generated-directories"}]},"navLevels":3,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":3}},"pageContext":{"slug":"/configuration/setup","shortTitle":"Create a site","hasReleaseNotes":false}},
    "staticQueryHashes": ["2494036674","3227520225","3295477089","3359654165","3845541775","636942989"]}