{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blogs/learnGastbyJS","result":{"data":{"blog":{"frontmatter":{"title":"LEARN GATSBY JS","thumbnail":"blog48","date":"February 20, 2021","dsaCppCodeFile":null},"excerpt":"<div class=\"my-2 p-2\">\n              <h4>Introduction</h4>\n              <div class=\"m-2\">\n                <p>\n                  Gatsby is a React-based open-source framework for creating\n                  websites and apps. It's great whether you're building a\n                  portfolio site or blog, or a high-traffic e-commerce store or\n                  company homepage.\n                </p>\n                <p>\n                  In simple words, Gatsby is a static site generator for React\n                  where you build sites that will display static data just like\n                  any other static sites(like this blog site) but it's done\n                  dynamically.\n                </p>\n                <p>\n                  You can build sites with the services you want(like Shopify,\n                  Stripe, and WordPress) quickly and easily with Gatsby’s 2000+\n                  plugins. Also you can integrate data from anywhere: APIs,\n                  databases, CMSs, static files — or multiple sources at once.\n                </p>\n              </div>\n            </div>\n            <div class=\"row my-2 p-2\">\n              <div class=\"col-12\">\n                <h4>Topics to cover</h4>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Basics</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Creating & styling components</li>\n                  <li>Creating pages</li>\n                  <li>Gatsby Images(Fluid & Fixed Childsharp)</li>\n                  <li>\n                    Basics of <a href=\"/blogs/learnGraphql\">GraphQL</a>(queries)\n                  </li>\n                  <li>useStaticQuery</li>\n                </ul>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Intermediate</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Adding plugins</li>\n                  <li>Gatsby Source Filesystem</li>\n                  <li>Gatbsy Background Image(Fluid & Fixed Childsharp)</li>\n                  <li>Create pages programatically</li>\n                </ul>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Advanced</strong></p>\n                <ul class=\"pl-4\">\n                  <li>\n                    Integrating with any CMS(like Contentful) or local static\n                    files(like .md or .mdx) or APIs\n                  </li>\n                  <li>Fetching queries and adding data dynamically</li>\n                </ul>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n              <h4>Resources to learn & code projects</h4>\n              <div class=\"row m-2\">\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://youtube.com/embed/playlist?list=PLW0RabRDhwwzVNhlOgQQgw6HJzXdM1MnT\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/6YhqQ2ZW1sc\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/ThzUUdIVr_I\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/kzWIUX3CpuI\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n              </div>\n            </div>\n","html":"<div class=\"my-2 p-2\">\n              <h4>Introduction</h4>\n              <div class=\"m-2\">\n                <p>\n                  Gatsby is a React-based open-source framework for creating\n                  websites and apps. It's great whether you're building a\n                  portfolio site or blog, or a high-traffic e-commerce store or\n                  company homepage.\n                </p>\n                <p>\n                  In simple words, Gatsby is a static site generator for React\n                  where you build sites that will display static data just like\n                  any other static sites(like this blog site) but it's done\n                  dynamically.\n                </p>\n                <p>\n                  You can build sites with the services you want(like Shopify,\n                  Stripe, and WordPress) quickly and easily with Gatsby’s 2000+\n                  plugins. Also you can integrate data from anywhere: APIs,\n                  databases, CMSs, static files — or multiple sources at once.\n                </p>\n              </div>\n            </div>\n            <div class=\"row my-2 p-2\">\n              <div class=\"col-12\">\n                <h4>Topics to cover</h4>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Basics</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Creating & styling components</li>\n                  <li>Creating pages</li>\n                  <li>Gatsby Images(Fluid & Fixed Childsharp)</li>\n                  <li>\n                    Basics of <a href=\"/blogs/learnGraphql\">GraphQL</a>(queries)\n                  </li>\n                  <li>useStaticQuery</li>\n                </ul>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Intermediate</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Adding plugins</li>\n                  <li>Gatsby Source Filesystem</li>\n                  <li>Gatbsy Background Image(Fluid & Fixed Childsharp)</li>\n                  <li>Create pages programatically</li>\n                </ul>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Advanced</strong></p>\n                <ul class=\"pl-4\">\n                  <li>\n                    Integrating with any CMS(like Contentful) or local static\n                    files(like .md or .mdx) or APIs\n                  </li>\n                  <li>Fetching queries and adding data dynamically</li>\n                </ul>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n              <h4>Resources to learn & code projects</h4>\n              <div class=\"row m-2\">\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://youtube.com/embed/playlist?list=PLW0RabRDhwwzVNhlOgQQgw6HJzXdM1MnT\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/6YhqQ2ZW1sc\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/ThzUUdIVr_I\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/kzWIUX3CpuI\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n              </div>\n            </div>"},"thumbnail":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M105%2057c-43%207-60%2059-29%2090%2033%2033%2090%209%2089-38%200-32-29-57-60-52m131%2020v15h5c4%200%205%200%205-2l-2-2h-3V75c0-12-1-13-3-13s-2%200-2%2015m16%200v15h5c5%200%205%200%205-2s0-3-2-3c-3%200-3%200-3-4%200-3%200-4%202-4s2-1%202-2c0-2-1-2-2-2-2%200-2-1-2-4%200-4%200-4%203-4%202%200%202%200%202-2%200-3%200-3-5-3h-5v15m20-12c-5%2024-5%2027-2%2027%202%200%202-1%202-3%200-3%200-3%203-3%202%200%202%200%202%203s0%203%203%203c2%200%202%200%202-2l-2-13c-3-15-3-15-6-15-1%200-2%201-2%203m16%2012c0%2014%200%2015%202%2015s2-1%202-7c0-7%201-7%203%201%200%205%201%206%203%206s2%200%200-10v-6c2-2%202-10%200-12l-6-2h-4v15m19-14l-1%2015c0%2013%200%2014%202%2014s2-1%202-8c0-9%201-9%203%201%202%206%203%207%204%207%202%200%202-1%202-15s0-15-2-15-2%201-2%208v9l-2-8c-2-8-4-10-6-8m-205%206c-14%205-23%2014-28%2026l-2%205%2025%2025%2025%2025%204-2c16-5%2028-21%2028-36v-3h-26v8h9c9%200%209%200%206%208-3%205-9%2011-14%2014l-4%202-22-22-22-22%201-3c11-20%2040-25%2055-8l4%204%202-3c3-2%203-2%201-5-7-10-29-17-42-13m107%2039c-2%201-3%205-3%2015%200%2012%201%2014%208%2014h4v-15h-3c-2%200-3%200-3%202l1%202c2%200%201%206-1%207-1%200-2-21%200-21%201-1%202%201%202%204l2%202c2%200%202-1%202-3%200-6-5-10-9-7m20%200a208%20208%200%2000-3%2029l3-3c0-2%201-3%202-3l3%203c0%203%204%205%204%202l-5-28h-4m14%202l2%202c2%200%202%201%202%2013%200%2011%200%2012%202%2012s2-1%202-12c0-12%200-13%202-13l2-2c0-3%200-3-6-3s-6%200-6%203m20-1c-3%203-2%208%202%2014%203%205%204%2010%202%2010l-2-2c0-2-1-3-3-2-5%201-1%208%205%208%207%200%208-6%202-15l-4-8c0-3%202-3%203-1%200%201%201%202%203%202s2%200%202-2l-1-2c0-4-6-5-9-2m16%2013v15h4c7%200%2011-8%207-14-2-1-2-2%200-3%203-5%200-12-7-13h-4v15m18-13l2%209%202%2013c0%205%200%206%202%206s2-1%202-6l2-14%202-10c-2-1-4%201-5%205%200%205-1%205-3%200-1-5-4-7-4-3m30%2010l-1%2014c-3%202-2%204%200%204%205%200%205-2%205-16%200-13%200-14-2-14s-2%201-2%2012m13-10c-3%203-2%208%202%2014%203%205%204%2010%202%2010l-2-2c0-2-1-3-3-2-5%201-1%208%205%208%207%200%208-6%202-15l-4-8c0-3%202-3%203-1%200%201%201%202%203%202s2%200%202-2l-1-2c0-4-6-5-9-2m-269%204l1%205c3%2016%2018%2030%2036%2032l5%201-20-20c-20-20-23-22-22-18'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7699115044247788,"src":"/static/1698a5494bb5b04a3d76e9480d1dd6ed/ee604/blog48.png","srcSet":"/static/1698a5494bb5b04a3d76e9480d1dd6ed/69585/blog48.png 200w,\n/static/1698a5494bb5b04a3d76e9480d1dd6ed/497c6/blog48.png 400w,\n/static/1698a5494bb5b04a3d76e9480d1dd6ed/ee604/blog48.png 800w,\n/static/1698a5494bb5b04a3d76e9480d1dd6ed/f3583/blog48.png 1200w,\n/static/1698a5494bb5b04a3d76e9480d1dd6ed/5707d/blog48.png 1600w,\n/static/1698a5494bb5b04a3d76e9480d1dd6ed/9ddc6/blog48.png 2240w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"pageContext":{"blog":"learnGastbyJS","thumbnail":"thumbnails/blog48.png"}},"staticQueryHashes":["2987289216","63159454"]}