{"componentChunkName":"component---src-templates-post-jsx","path":"/building-a-blog-using-gatsby-1","result":{"data":{"mdx":{"frontmatter":{"slug":"building-a-blog-using-gatsby-1","title":"Building a Blog with Gatsby - 1","date":"30 November, 2019","image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMC/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAEDBP/aAAwDAQACEAMQAAABjWDdbbBn/8QAGhAAAQUBAAAAAAAAAAAAAAAAEQABAxIgIf/aAAgBAQABBQIcESeuP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB4QAAEBCQAAAAAAAAAAAAAAAAEAAhEgISIxMoGR/9oACAEBAAY/AhULbesmuKRMH//EABwQAQACAQUAAAAAAAAAAAAAAAEAESAhQVFh8f/aAAgBAQABPyFFxyityeChDrDsw//aAAwDAQACAAMAAAAQeM//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPxCH/8QAHBABAAICAwEAAAAAAAAAAAAAAREhAKEgQVGB/9oACAEBAAE/EIkqpvgU+J5RkvTq3hEiVsd8P//Z","aspectRatio":1.7751479289940828,"src":"/static/4f3a6d4ee8f3997901b22d64e93a1056/897d1/gatsby-image.jpg","srcSet":"/static/4f3a6d4ee8f3997901b22d64e93a1056/5398f/gatsby-image.jpg 200w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/26a4d/gatsby-image.jpg 400w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/897d1/gatsby-image.jpg 600w","srcWebp":"/static/4f3a6d4ee8f3997901b22d64e93a1056/a213b/gatsby-image.webp","srcSetWebp":"/static/4f3a6d4ee8f3997901b22d64e93a1056/04c4c/gatsby-image.webp 200w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/ebea1/gatsby-image.webp 400w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/a213b/gatsby-image.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"excerpt":"In this article, I'll walk you through the steps of building a very simple blog with Gatsby.Let's Go 🔥🚀"},"body":"function _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/* @jsx mdx */\nvar _frontmatter = {\n  \"slug\": \"building-a-blog-using-gatsby-1\",\n  \"date\": \"30 November, 2019\",\n  \"dateForSorting\": \"2019-11-30T12:35:38.764Z\",\n  \"title\": \"Building a Blog with Gatsby - 1\",\n  \"tags\": [\"gatsby\", \"react\", \"JavaScript\"],\n  \"excerpt\": \"In this article, I'll walk you through the steps of building a very simple blog with Gatsby.Let's Go 🔥🚀\",\n  \"image\": \"/assets/gatsby-image.jpeg\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Hey Guys!\"), mdx(\"p\", null, \"Ever wanted to build a blog where you can host all your articles without fear of losing them due to third-party problems?\"), mdx(\"p\", null, \"Are you moderately skilled in React?\"), mdx(\"p\", null, \"This article is the one for you\"), mdx(\"p\", null, \"I will work you through the steps of building a very simple blog with a famous static site generator - Gatsby\"), mdx(\"p\", null, \"You can find the finished blog \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://katanablog-gatsby-blog.netlify.com/\"\n  }), \"here\"), \".\"), mdx(\"h2\", null, \"What's a Static Site Generator?\"), mdx(\"p\", null, \"According to \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://snipcart.com/blog/choose-best-static-site-generator\"\n  }), \"this article\"), \", a static site generator takes your site content, applies it to templates, and generates a structure of purely static HTML files ready to be delivered to visitors.\"), mdx(\"p\", null, \"Simply put, a static site generator generates static sites based on the developer's input.\"), mdx(\"p\", null, \"We have a lot of static site generators such as Gatsby, Hugo, Gridsome, Jekyll and so on. In this article, we are going to focus on Gatsby.\"), mdx(\"h2\", null, \"Why Gatsby?\"), mdx(\"p\", null, \"I haven't used other static site generators asides Gatsby but my experience with Gatsby has been incredible. Gatsby allows you to build blazing fast sites with react and the plugins library is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"packed.\"), \" There's a plugin for almost everything be it optimizing images or rendering MDX files on your site. \"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Fun fact\"), \": My blog (KatanaBlog - this blog) was built with Gatsby \\uD83D\\uDE01\"), mdx(\"h2\", null, \"Getting into the code\"), mdx(\"p\", null, \"The link to the repo for the code used in this article can be found \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/NodeJSs/Building-a-blog-with-Gatsby\"\n  }), \"here\"), \" in case you want to check it out.\"), mdx(\"p\", null, \"Let's get started\"), mdx(\"p\", null, \"Note: You should have Node.js installed so you can use \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"npm\")), mdx(\"p\", null, \"Once you have npm installed\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Install the Gatsby CLI\")), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"npm install -g gatsby-cli\"))), mdx(\"p\", null, \"You can now create a new gatsby project using:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"gatsby new {project name}\"))), mdx(\"p\", null, \"After the download, open the project's directory and run \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"gatsby develop\"), \" or \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"npm run develop\")), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"cd {project name}\\nnpm run develop\"))), mdx(\"p\", null, \"Now you should have your gatsby project running at \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://localhost:8000/\"\n  }), \"localhost:8000\")), mdx(\"p\", null, \"When you open your localhost:8000, you should have something like this\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/15b4ea6ad17afdb82ae27251ce189042/7a804/gatsby-1.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"84.76312419974393%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAARABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUCAQP/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAb+7Xhuyl8Y6Ymgf/8QAHRAAAQMFAQAAAAAAAAAAAAAAAgABAwQFERUyEv/aAAgBAQABBQLVwimtkDtqKdHlgh9YR8Dyv//EABgRAAIDAAAAAAAAAAAAAAAAAAABEBES/9oACAEDAQE/AbZpz//EABkRAAIDAQAAAAAAAAAAAAAAAAJRABASE//aAAgBAgEBPwHZOdCd/wD/xAAiEAABAQYHAAAAAAAAAAAAAAABAAIDEBIhcTEyQUJRkaH/2gAIAQEABj8CpMblbvFmedokYqZs1OnEGrIQ/8QAHxAAAQIGAwAAAAAAAAAAAAAAAQARECExUaHRgfDx/9oACAEBAAE/ITXnrWlPBd1ZeR0iYVgeaEzecKDKLAh//9oADAMBAAIAAwAAABBc9/z/xAAZEQACAwEAAAAAAAAAAAAAAAAAERAhQWH/2gAIAQMBAT8QobOhkf/EABcRAQADAAAAAAAAAAAAAAAAABARIUH/2gAIAQIBAT8QnsbD/8QAHxAAAQMEAwEAAAAAAAAAAAAAAREhQQAQMXFRobHw/9oACAEBAAE/EHacApNPoAIiHAUF3nZQ/wAWEWpjaEDAGQQsm32uDXT+W//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Gatsby starter home page\",\n    \"title\": \"Gatsby starter home page\",\n    \"src\": \"/static/15b4ea6ad17afdb82ae27251ce189042/59653/gatsby-1.jpg\",\n    \"srcSet\": [\"/static/15b4ea6ad17afdb82ae27251ce189042/de1f9/gatsby-1.jpg 148w\", \"/static/15b4ea6ad17afdb82ae27251ce189042/9963e/gatsby-1.jpg 295w\", \"/static/15b4ea6ad17afdb82ae27251ce189042/59653/gatsby-1.jpg 590w\", \"/static/15b4ea6ad17afdb82ae27251ce189042/7a804/gatsby-1.jpg 781w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"And your project structure should look something like this\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"169px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b356fc1b151784449fce3ba410f9ddcb/16f70/directories.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"298.22485207100596%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAA8ABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEDAgb/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAeZlTLmQxamdhIRNNZcSAnVYOEIX/8QAHBAAAwACAwEAAAAAAAAAAAAAAAECEBESITEz/9oACAEBAAEFAl83rZHjSWJplM2SV2Mnx9jJfTYyfazyeP/EABYRAQEBAAAAAAAAAAAAAAAAAAEQIP/aAAgBAwEBPwGMcf/EABQRAQAAAAAAAAAAAAAAAAAAADD/2gAIAQIBAT8BD//EACEQAAECBQUBAAAAAAAAAAAAABAAARExQYHhIDJRcaHR/9oACAEBAAY/An7aqqH+rImoxO70X5WRfXNx/8QAIhAAAgICAQMFAAAAAAAAAAAAAREAMSFBgRBRkWFxseHx/9oACAEBAAE/IT2H2HrNhuR0Bv0GMBuaI8CYW4GxgCIc0Hlwm7iAcq1iElOYtF/BMWWZtFJ8osYJ8mWlX3GW67mG4CRRIjQj5un/2gAMAwEAAgADAAAAEGTHcvgtwP/EABgRAQADAQAAAAAAAAAAAAAAABABETFB/9oACAEDAQE/ELODRMWf/8QAGBEBAQADAAAAAAAAAAAAAAAAEAERMUH/2gAIAQIBAT8Qm6dKYP/EACMQAQACAgIBAwUAAAAAAAAAAAERIQBBMXFhEFGRgaGxwdH/2gAIAQEAAT8QJCw4BONEl+lG9YpLnufwycsSE5LkDhLpaO8NtlKoPgwp063OsNOYyKExZp3kSNRg/oZNx7NzrGlaWyfAycbxGCCIbJPjFPOaNzrOYsILlo+PviHmgSSm46xS+jc6wbiUaRp9sZpinJV3OKW+DfjJVTM6RrxilLWthI7MczGaPxiosGxjFRMSEXD6f//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Project structure\",\n    \"title\": \"Project Structure\",\n    \"src\": \"/static/b356fc1b151784449fce3ba410f9ddcb/16f70/directories.jpg\",\n    \"srcSet\": [\"/static/b356fc1b151784449fce3ba410f9ddcb/de1f9/directories.jpg 148w\", \"/static/b356fc1b151784449fce3ba410f9ddcb/16f70/directories.jpg 169w\"],\n    \"sizes\": \"(max-width: 169px) 100vw, 169px\",\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Most of our code (components, pages, templates etc) is going to be in the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"src\"), \" folder\"), mdx(\"h3\", null, \"Explanation of the project structure\"), mdx(\"p\", null, \"The folder we'll use most of the time is the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"src\"), \" folder, inside the src folder we have the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"pages\"), \" folder.\"), mdx(\"p\", null, \"The pages folder contains all our pages with the extension \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".js\")), mdx(\"p\", null, \"The components folder contains all our components such as Tags for blog posts, Footer, Header and so on.\"), mdx(\"h3\", null, \"Hopping into the layout.js file\"), mdx(\"p\", null, \"In the components folder, you should find a layout.js file. This file contains the layout for every page it's applied on. If you study the component, you'll find that it contains a Header and Div element wrapped in a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"React fragment\"), \". The div element contains the main and footer element.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"jsx\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"return\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n      \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"Header\")), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"siteTitle\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token script language-javascript\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token script-punctuation punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"data\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"site\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"siteMetadata\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"title\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"/>\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n      \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"div\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"style\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token script language-javascript\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token script-punctuation punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n          margin\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"0 auto\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n          maxWidth\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token number\"\n  }), \"960\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n          padding\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"0px 1.0875rem 1.45rem\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n          paddingTop\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token number\"\n  }), \"0\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n        \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"main\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"children\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"main\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n        \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"footer\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n          \\xA9 \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"new\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"Date\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"getFullYear\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \", Built with\\n          \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \" \"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n          \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"a\"), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"href\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"https://www.gatsbyjs.org\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"Gatsby\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"a\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n        \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"footer\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n      \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"div\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\")))), mdx(\"p\", null, \"By the way, this is a react fragment\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"jsx\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"    //beginning of react fragment   \\n    //...component code here\\n\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), \"  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"//end of react fragment\")))), mdx(\"p\", null, \"React fragments prevent unnecessary use of divs in our components.\"), mdx(\"p\", null, \"So if we import the layout.js component in a file (for example a page), we can reuse the header and footer by simply placing the necessary contents for that page in between the layout component's opening and closing tags. When you look at the layout.js code, you can see that whatever content we are going to put in between the layout component's opening and closing tags is represented as \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"children\"), \" which was destructured from the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"props\"), \" object.\"), mdx(\"p\", null, \"We are going to leave the layout.js file intact because it takes care of some styling which I don't want to focus on in this tutorial.\"), mdx(\"h3\", null, \"Let's move to the index.js file in the pages folder !\"), mdx(\"p\", null, \"Open the index.js file in the pages folder. For this tutorial we will remove everything in between the layout component except the SEO component.\\nOnce that is done, we should have something like this\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"jsx\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"const\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function-variable function\"\n  }), \"IndexPage\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=>\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"Layout\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"SEO\")), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"title\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"Home\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"/>\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \\n  \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"Layout\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\")))), mdx(\"p\", null, \"Once you save your changes in the index.js file, the index page should only contain the header and footer.\"), mdx(\"p\", null, \"For now, we will add these between the layout component\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"jsx\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"const\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function-variable function\"\n  }), \"IndexPage\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=>\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"Layout\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"SEO\")), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"title\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"Home\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"/>\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"h1\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"Welcome to my Blog\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"h1\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"p\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"I welcome you\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"p\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"p\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"Welcome once again!\\uD83D\\uDE09\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"p\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \\n  \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"Layout\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\")))), mdx(\"p\", null, \"You should see the changes on the page once you save.\"), mdx(\"p\", null, \"Now we are going to Link to another page.\"), mdx(\"p\", null, \"Fortunately, we already have a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"page-2.js\"), \" that Gatsby has given us.\"), mdx(\"p\", null, \"To link to another page in Gatsby, we use the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Link\"), \" component which we have to import from Gatsby so add this to the top of the index.js (it might have already been imported for you, if that's the case you don't need to import it again)\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"import { Link } from \\\"gatsby\\\";\"))), mdx(\"p\", null, \"Now we will use the Link component inside the layout component, we call the link component like every other component and give it a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"to\"), \" attribute (which is very similar to an \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"href\"), \" attribute in an anchor tag). The value of the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"to\"), \" attribute is a forward slash ( \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"/\"), \" ) followed by the name of the page we want to link to. In this case, that name will be \\\"page-2\\\" or if you created a page yourself, the name of that page.\"), mdx(\"p\", null, \"So now, we should have\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"jsx\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"const\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function-variable function\"\n  }), \"IndexPage\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=>\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"Layout\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"SEO\")), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"title\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"Home\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"/>\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"h1\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"Welcome to my Blog\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"h1\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"p\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"I welcome you\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"p\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"p\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"Welcome once again!\\uD83D\\uDE09\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"p\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n    <Link to = \\\"/page-2\\\">Go to page 2\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"Link\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n  \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"Layout\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\")))), mdx(\"p\", null, \"Now, you'll notice that if you click the link, you'll be taken to page 2 or whatever page you set the link to direct to.\"), mdx(\"p\", null, \"That's it for this section of Building A Blog With Gatsby.\"), mdx(\"p\", null, \"You should take some time to look through the code of the pages, it's not really necessary but it will allow you to learn faster.\"), mdx(\"p\", null, \"In the next section, we'll deal with writing blog posts using markdown (with the extension \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".mdx\"), \" which allows us to use React components in markdown) and we will create post previews.\"), mdx(\"p\", null, \"The next section will also contain some GraphQL.\"), mdx(\"p\", null, \"Stay Tuned!\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"building-a-blog-using-gatsby-1"}}}