title
Gatsby JS Crash Course

description
This is a 1 hour crash course on Gatsby JS which is a static site generator that runs on React and GraphQL. We will be creating a static site along with a Markdown based blog using a few plugins. We will also deploy our Gatsby site to Netlify Sponsor: Anthrodesk http://anthrodesk.com/ Code: Github Repo: https://github.com/bradtraversy/gatsby_crash_course Deployed Site: https://sharp-williams-dedbed.netlify.com/ 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia

detail
{'title': 'Gatsby JS Crash Course', 'heatmap': [{'end': 274.153, 'start': 226.039, 'weight': 0.709}, {'end': 1936.636, 'start': 1892.358, 'weight': 1}], 'summary': 'This crash course covers optimizing health and productivity with anthrodesk stand-sit desks and gatsby js, styling navigation bar, creating blogs, configuring gatsby, using graphql for data queries, customizing post pages, fixing 404 page errors, and setting up and deploying gatsby blogs with github, netlify, and custom domain.', 'chapters': [{'end': 1009.427, 'segs': [{'end': 193.672, 'src': 'embed', 'start': 164.938, 'weight': 6, 'content': [{'end': 166.759, 'text': "there's quite a bit of configuration.", 'start': 164.938, 'duration': 1.821}, {'end': 172.275, 'text': "it can be a little overwhelming, But once you get past that and you already have those files created, it's simple.", 'start': 166.759, 'duration': 5.516}, {'end': 180.439, 'text': 'You just create your your folder with your blog post and it will automatically show up in the list and you can click on it and read.', 'start': 172.555, 'duration': 7.884}, {'end': 182.22, 'text': 'you and people can read your blog post.', 'start': 180.439, 'duration': 1.781}, {'end': 183.12, 'text': 'All right.', 'start': 182.82, 'duration': 0.3}, {'end': 186.182, 'text': "So we're just going to jump in and get started.", 'start': 183.28, 'duration': 2.902}, {'end': 190.664, 'text': 'It has its own CLI that will generate a site for us.', 'start': 186.262, 'duration': 4.402}, {'end': 192.612, 'text': 'with some boilerplate.', 'start': 191.551, 'duration': 1.061}, {'end': 193.672, 'text': "We'll take a look at that.", 'start': 192.632, 'duration': 1.04}], 'summary': 'Hassle-free blog management with simple folder creation and automatic listing and reading of posts.', 'duration': 28.734, 'max_score': 164.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc164938.jpg'}, {'end': 274.153, 'src': 'heatmap', 'start': 226.039, 'weight': 0.709, 'content': [{'end': 233.684, 'text': 'okay, and obviously you need to have node.js installed, so you have access to npm all right.', 'start': 226.039, 'duration': 7.645}, {'end': 237.327, 'text': 'so mine went really quick, because i actually already have it installed.', 'start': 233.684, 'duration': 3.643}, {'end': 244.883, 'text': "once you do that, we'll be able to generate a new application with gatsby new and then the name of the app.", 'start': 237.327, 'duration': 7.556}, {'end': 248.486, 'text': "So I'm going to call this Gatsby underscore.", 'start': 244.903, 'duration': 3.583}, {'end': 253.13, 'text': "Let's do underscore crash underscore course.", 'start': 250.108, 'duration': 3.022}, {'end': 254.292, 'text': "That's fine.", 'start': 253.771, 'duration': 0.521}, {'end': 256.233, 'text': 'All right.', 'start': 254.312, 'duration': 1.921}, {'end': 258.836, 'text': "Now I'll have all the code for this in the description as well.", 'start': 256.293, 'duration': 2.543}, {'end': 263.42, 'text': "And like I said, we're going to we're going to give it a shot deploying it to Netlify.", 'start': 259.016, 'duration': 4.404}, {'end': 266.723, 'text': "I haven't actually done it yet, but we'll we'll try it together.", 'start': 263.44, 'duration': 3.283}, {'end': 274.153, 'text': "So what's happening now is it's just generating all the files for us.", 'start': 270.652, 'duration': 3.501}], 'summary': "Using node.js, generated a gatsby app named 'gatsby_crash_course' for deployment to netlify.", 'duration': 48.114, 'max_score': 226.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc226039.jpg'}, {'end': 322.264, 'src': 'embed', 'start': 293.717, 'weight': 0, 'content': [{'end': 298.938, 'text': "And now I'm going to use the internal or the integrated terminal from now on.", 'start': 293.717, 'duration': 5.221}, {'end': 301.859, 'text': "right. so let's take a look at some files here.", 'start': 299.776, 'duration': 2.083}, {'end': 305.845, 'text': 'if we look at our package.json, we have some dependencies.', 'start': 301.859, 'duration': 3.986}, {'end': 307.046, 'text': 'of course gatsby.', 'start': 305.845, 'duration': 1.201}, {'end': 315.378, 'text': 'gatsby link is so that we can use the link tag like you would do in regular react And then Gatsby plugin, react helmet,', 'start': 307.046, 'duration': 8.332}, {'end': 322.264, 'text': 'and react helmet is used to basically generate head information for your pages Down here.', 'start': 315.378, 'duration': 6.886}], 'summary': 'Using integrated terminal, examining package.json with gatsby dependencies.', 'duration': 28.547, 'max_score': 293.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc293717.jpg'}, {'end': 431.131, 'src': 'embed', 'start': 398.318, 'weight': 2, 'content': [{'end': 400.499, 'text': "And then we're just exporting the page.", 'start': 398.318, 'duration': 2.181}, {'end': 401.3, 'text': 'All right.', 'start': 401.019, 'duration': 0.281}, {'end': 404.303, 'text': 'So when you want to create a page, this is all you have to do.', 'start': 401.36, 'duration': 2.943}, {'end': 408.228, 'text': 'This is the second page and this is the 404 page.', 'start': 404.323, 'duration': 3.905}, {'end': 409.19, 'text': 'All right.', 'start': 408.849, 'duration': 0.341}, {'end': 414.636, 'text': "Now, if we look at layouts, if we look at index JS, we're bringing in helmet.", 'start': 409.69, 'duration': 4.946}, {'end': 425.206, 'text': 'So helmet has to do with the head, so you can see we can have a title which we can get from data.site.site, metadata.title.', 'start': 415.137, 'duration': 10.069}, {'end': 431.131, 'text': 'we can include our own description and keywords and stuff and then we have our header.', 'start': 425.206, 'duration': 5.925}], 'summary': 'Instructions for creating pages with metadata and headers.', 'duration': 32.813, 'max_score': 398.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc398318.jpg'}, {'end': 516.044, 'src': 'embed', 'start': 479.37, 'weight': 5, 'content': [{'end': 482.973, 'text': "Or not dash, what am I doing? It's gatsby space develop.", 'start': 479.37, 'duration': 3.603}, {'end': 492.318, 'text': "Weirdo So what this will do is it'll open our site on localhost 8000, I believe.", 'start': 484.514, 'duration': 7.804}, {'end': 496.301, 'text': "Okay, so it's just going to..", 'start': 492.338, 'duration': 3.963}, {'end': 509.682, 'text': "compile and let's go ahead and open up localhost port 8000 and there it is gatsby default starter.", 'start': 497.816, 'duration': 11.866}, {'end': 516.044, 'text': "so let's actually put this to the side here and just have these side by side.", 'start': 509.682, 'duration': 6.362}], 'summary': 'Running gatsby develop opens site on localhost 8000.', 'duration': 36.674, 'max_score': 479.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc479370.jpg'}, {'end': 765.608, 'src': 'embed', 'start': 736.565, 'weight': 1, 'content': [{'end': 741.807, 'text': "It's just to get you to understand how to use Gatsby, and then you can build your own sites.", 'start': 736.565, 'duration': 5.242}, {'end': 746.608, 'text': 'Of course, you can bring in Bootstrap or Materialize, whatever you want.', 'start': 742.907, 'duration': 3.701}, {'end': 750.53, 'text': 'Use the grid, however you want to style your site.', 'start': 747.129, 'duration': 3.401}, {'end': 754.225, 'text': "So but we're going to use the default styling.", 'start': 751.624, 'duration': 2.601}, {'end': 756.546, 'text': 'So if we want to create a page.', 'start': 754.945, 'duration': 1.601}, {'end': 756.966, 'text': 'All right.', 'start': 756.566, 'duration': 0.4}, {'end': 759.226, 'text': "Let's say we want to create an about page.", 'start': 757.006, 'duration': 2.22}, {'end': 765.608, 'text': 'All we have to do is create a new file in here called about dot J.S.', 'start': 759.967, 'duration': 5.641}], 'summary': 'Learn to use gatsby to build your own sites, bring in bootstrap or materialize, and style your site using the grid.', 'duration': 29.043, 'max_score': 736.565, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc736565.jpg'}, {'end': 1009.427, 'src': 'embed', 'start': 977.36, 'weight': 4, 'content': [{'end': 985.442, 'text': 'so we can go like that all right, and if i save that, we should still be able to go to about without any problems.', 'start': 977.36, 'duration': 8.082}, {'end': 990.976, 'text': 'same thing with services, just to make it a little cleaner.', 'start': 987.194, 'duration': 3.782}, {'end': 993.458, 'text': "so we'll get rid of that.", 'start': 990.976, 'duration': 2.482}, {'end': 1000.862, 'text': 'bring that up there, get rid of the curly brace and there we go good.', 'start': 993.458, 'duration': 7.404}, {'end': 1005.385, 'text': "so in our menu let's do the same thing.", 'start': 1000.862, 'duration': 4.523}, {'end': 1009.427, 'text': "we'll get rid of the return and the curly braces.", 'start': 1005.385, 'duration': 4.042}], 'summary': 'Adjustments made to code for improved functionality and cleanliness.', 'duration': 32.067, 'max_score': 977.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc977360.jpg'}], 'start': 7.745, 'title': 'Optimizing health and productivity with anthrodesk and gatsby js', 'summary': "Discusses the benefits of anthrodesk stand-sit desks for programmers, emphasizing improved health and productivity, and explores gatsby js's features for creating practical websites. it also covers customizing websites using gatsby with hot reloading and server restart, and demonstrates creating functional components in nextjs.", 'chapters': [{'end': 516.044, 'start': 7.745, 'title': 'Anthrodesk: improve your health and productivity', 'summary': 'Discusses the benefits of using anthrodesk stand-sit desks for programmers and web developers, highlighting the affordable and quality solutions for maximum health and productivity, as well as how gatsby js, a static site generator, utilizes react and graphql to create practical and easy-to-use websites for freelancers and individuals.', 'duration': 508.299, 'highlights': ['AnthroDesk offers affordable and quality stand-sit desks for maximum health and productivity Sitting all day can have negative effects on health, and AnthroDesk provides affordable and quality solutions to address this issue.', 'Gatsby JS utilizes React and GraphQL to create practical and easy-to-use websites for freelancers Gatsby JS, a static site generator, offers a practical solution for freelancers and individuals to create websites, with the ability to easily integrate components and automate repetitive tasks.', 'Gatsby JS has a rich data plugin ecosystem to work with various content management systems, APIs, and databases Gatsby JS provides a rich data plugin ecosystem, enabling integration with various content management systems, APIs, databases, and file systems, expanding its functionality beyond a regular static site generator.', 'Using Gatsby JS, freelancers can create brochure type websites without repetitive coding Gatsby JS allows freelancers to create brochure type websites without the need for repetitive coding, offering practicality and ease of use in creating and managing website content.']}, {'end': 759.226, 'start': 518.669, 'title': 'Gatsby crash course: building a sample website', 'summary': 'Covers customizing the header, changing site title, adding metadata such as description and keywords, and creating an index and about page using gatsby, with hot reloading and server restart required for certain changes.', 'duration': 240.557, 'highlights': ['Hot reloading allows instant updates to the website without needing to reload the page, making it convenient for developers. Hot reloading feature, eliminates the need to reload the page, provides instant updates.', 'Certain changes, such as modifying the config file, require restarting the server for them to take effect. Modifying config file necessitates server restart for changes to be applied.', "Gatsby link is used instead of 'a' tag with an 'href' attribute, providing an alternative method for linking within the website. Usage of Gatsby link instead of 'a' tag for internal linking."]}, {'end': 1009.427, 'start': 759.967, 'title': 'Creating functional components in nextjs', 'summary': "Demonstrates creating functional components in nextjs, where components and pages are easily created simply by adding files to the 'pages' folder, without the need for special routes or react router.", 'duration': 249.46, 'highlights': ["Components and pages are easily created in NextJS by simply adding files to the 'pages' folder, without the need for special routes or React Router. ", "Demonstrates creating a new file for the 'about' page and a 'services' page, along with sample text and styling. ", 'Shows the creation of a menu component, with inline styling for the menu. ', "Utilizes VS Code extensions for efficient component creation, such as 'rfc' for functional components and 'rc' for class-based components. "]}], 'duration': 1001.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc7745.jpg', 'highlights': ['AnthroDesk offers affordable stand-sit desks for improved health and productivity', 'Gatsby JS creates practical websites using React and GraphQL for freelancers', 'Gatsby JS has a rich data plugin ecosystem for various content management systems', 'Hot reloading in Gatsby JS provides instant updates without page reload', 'Gatsby link is used for internal linking within the website', 'NextJS allows easy creation of components and pages without special routes', "Demonstrates creating 'about' and 'services' pages in NextJS", 'Utilizes VS Code extensions for efficient component creation in NextJS']}, {'end': 1297.088, 'segs': [{'end': 1085.812, 'src': 'embed', 'start': 1041.691, 'weight': 1, 'content': [{'end': 1043.652, 'text': "Don't do padding dash top.", 'start': 1041.691, 'duration': 1.961}, {'end': 1046.013, 'text': "Okay, so let's see.", 'start': 1044.913, 'duration': 1.1}, {'end': 1046.974, 'text': "That's our div.", 'start': 1046.074, 'duration': 0.9}, {'end': 1049.877, 'text': "And then inside here we'll have a ul.", 'start': 1047.155, 'duration': 2.722}, {'end': 1058.164, 'text': "And inside here let's do style.", 'start': 1055.321, 'duration': 2.843}, {'end': 1066.392, 'text': "and we're going to do a list style of none.", 'start': 1061.807, 'duration': 4.585}, {'end': 1083.631, 'text': "We're going to display flex because I want it to be displayed horizontal and then I'm just going to add in here justify content and we're going to set that to space evenly.", 'start': 1067.593, 'duration': 16.038}, {'end': 1085.812, 'text': 'All right.', 'start': 1085.492, 'duration': 0.32}], 'summary': 'Styling div with ul using flexbox and setting justify content to space evenly.', 'duration': 44.121, 'max_score': 1041.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1041691.jpg'}, {'end': 1159.593, 'src': 'embed', 'start': 1119.328, 'weight': 2, 'content': [{'end': 1122.912, 'text': "So we're going to say import link from.", 'start': 1119.328, 'duration': 3.584}, {'end': 1127.556, 'text': 'Gatsby dash link.', 'start': 1125.854, 'duration': 1.702}, {'end': 1129.718, 'text': "So that's our home.", 'start': 1128.777, 'duration': 0.941}, {'end': 1131.279, 'text': "I'm just going to copy this.", 'start': 1130.118, 'duration': 1.161}, {'end': 1135.363, 'text': "So we'll have home, we'll have about.", 'start': 1133.721, 'duration': 1.642}, {'end': 1143.764, 'text': "And we'll have services.", 'start': 1142.322, 'duration': 1.442}, {'end': 1154.914, 'text': "And then we're also going to have a blog, but I'm actually, I'm not going to put this in just yet.", 'start': 1151.17, 'duration': 3.744}, {'end': 1157.997, 'text': "So for now, we'll just have our static pages like that.", 'start': 1155.014, 'duration': 2.983}, {'end': 1159.593, 'text': "And let's save this.", 'start': 1158.633, 'duration': 0.96}], 'summary': 'Configuring links for home, about, and services pages in gatsby.', 'duration': 40.265, 'max_score': 1119.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1119328.jpg'}, {'end': 1221.464, 'src': 'embed', 'start': 1185.242, 'weight': 0, 'content': [{'end': 1196.405, 'text': "so components, menu, and then we're just going to put this let's see, let's put this right below the header, which is right here.", 'start': 1185.242, 'duration': 11.163}, {'end': 1202.947, 'text': "so we'll say menu like that and save.", 'start': 1196.405, 'duration': 6.542}, {'end': 1207.908, 'text': 'uh, reference, none is not defined.', 'start': 1202.947, 'duration': 4.961}, {'end': 1210.969, 'text': "okay, that's because i forgot my quotes.", 'start': 1207.908, 'duration': 3.061}, {'end': 1217.382, 'text': 'you guys probably noticed that and save, and there we go.', 'start': 1210.969, 'duration': 6.413}, {'end': 1218.923, 'text': "so there's our menu.", 'start': 1217.382, 'duration': 1.541}, {'end': 1221.464, 'text': "um, i don't like this space right here.", 'start': 1218.923, 'duration': 2.541}], 'summary': 'Adding a menu component below the header, fixing an error, and removing unwanted space.', 'duration': 36.222, 'max_score': 1185.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1185242.jpg'}, {'end': 1265.921, 'src': 'embed', 'start': 1244.582, 'weight': 3, 'content': [{'end': 1253.568, 'text': "this is going to show on every page, rather than just building a regular html site where you'll have to include this on every in every file,", 'start': 1244.582, 'duration': 8.986}, {'end': 1256.33, 'text': 'not to mention you have all the benefits of react.', 'start': 1253.568, 'duration': 2.762}, {'end': 1260.566, 'text': 'Now we have this inline style.', 'start': 1258.28, 'duration': 2.286}, {'end': 1265.921, 'text': "You don't need to do this, but I just figured since the header has it, I just added it to the menu.", 'start': 1260.606, 'duration': 5.315}], 'summary': 'Using react allows for inline styles to be added to every page, providing a more efficient alternative to including them in every file.', 'duration': 21.339, 'max_score': 1244.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1244582.jpg'}], 'start': 1009.427, 'title': 'Styling navigation bar and adding menu component to layout', 'summary': 'Covers styling a navigation bar using divs, ul, and list items with specific properties such as background color, padding, list style, and display property. it also discusses adding a menu component to the layout in the index.js file, emphasizing the benefits of using react for this purpose.', 'chapters': [{'end': 1159.593, 'start': 1009.427, 'title': 'Styling a navigation bar', 'summary': 'Covers adding styling to a navigation bar using divs, ul, and list items, including setting background color, padding, list style, display property, and link imports.', 'duration': 150.166, 'highlights': ['The chapter covers adding styling to a navigation bar using divs, ul, and list items, including setting background color, padding, list style, display property, and link imports.', 'The div is styled with a light gray background and padding top using camel case for CSS properties.', 'The ul is styled with list-style of none, display flex for horizontal layout, and justify content set to space evenly.', 'Four list items are added with links for home, about, and services, and link import from Gatsby link is used.', 'The chapter concludes with the addition of static pages for home, about, and services in the navigation bar.']}, {'end': 1297.088, 'start': 1160.934, 'title': 'Adding menu component to layout', 'summary': 'Discusses adding a menu component to the layout in the index.js file, setting its position and styling it globally in the index css file, enabling it to appear on every page and emphasizing the benefits of using react for this purpose.', 'duration': 136.154, 'highlights': ['Adding menu component to the layout in index.js file. The speaker discusses adding the menu component to the layout in the index.js file, enabling it to show on every page.', 'Setting position and styling of the menu globally in the Index CSS file. The speaker demonstrates setting the position and styling of the menu globally in the Index CSS file, removing underlines and changing the color of the links.', 'Emphasizing the benefits of using React for creating separate components to show on every page. The speaker highlights the benefits of using React to create separate components that show on every page, compared to building a regular HTML site.']}], 'duration': 287.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1009427.jpg', 'highlights': ['The chapter covers adding styling to a navigation bar using divs, ul, and list items, including setting background color, padding, list style, display property, and link imports.', 'Adding menu component to the layout in index.js file.', 'The ul is styled with list-style of none, display flex for horizontal layout, and justify content set to space evenly.', 'Emphasizing the benefits of using React for creating separate components to show on every page.', 'The div is styled with a light gray background and padding top using camel case for CSS properties.']}, {'end': 1528.969, 'segs': [{'end': 1326.652, 'src': 'embed', 'start': 1297.088, 'weight': 4, 'content': [{'end': 1304.237, 'text': "so that's basically how you can create, like a us, just as regular static site, just a brochure, informational site.", 'start': 1297.088, 'duration': 7.149}, {'end': 1307.621, 'text': 'you can do anything you can do with react pretty much now.', 'start': 1304.237, 'duration': 3.384}, {'end': 1310.865, 'text': 'what I want to show you is how to implement a blog.', 'start': 1307.621, 'duration': 3.244}, {'end': 1312.468, 'text': "now it doesn't have to be a blog.", 'start': 1310.865, 'duration': 1.603}, {'end': 1313.869, 'text': "you could be like, let's say", 'start': 1312.468, 'duration': 1.401}, {'end': 1319.289, 'text': 'events, maybe you have a list of events or something like that.', 'start': 1315.928, 'duration': 3.361}, {'end': 1326.652, 'text': "Maybe you have a list of I don't know, maybe it's like a school type website and you have a list of homework, just any kind of data.", 'start': 1319.369, 'duration': 7.283}], 'summary': 'Creating a blog or any data list using react for a static site.', 'duration': 29.564, 'max_score': 1297.088, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1297088.jpg'}, {'end': 1533.593, 'src': 'embed', 'start': 1506.384, 'weight': 0, 'content': [{'end': 1512.008, 'text': 'You can show them a simple markdown cheat sheet, or better yet, direct them to my markdown crash course.', 'start': 1506.384, 'duration': 5.624}, {'end': 1516.972, 'text': 'If you wanted to make something bold, you could just surround it in asterisks.', 'start': 1512.608, 'duration': 4.364}, {'end': 1522.584, 'text': "or that's actually italic, it's double for bold, but things like that.", 'start': 1517.921, 'duration': 4.663}, {'end': 1525.787, 'text': 'So you can use that instead of HTML tags.', 'start': 1522.765, 'duration': 3.022}, {'end': 1528.969, 'text': "But let's save this and let's create one more post.", 'start': 1526.507, 'duration': 2.462}, {'end': 1533.593, 'text': "So we're going to create another folder in Pages called 2018-04-10-post-2.", 'start': 1529.049, 'duration': 4.544}], 'summary': 'Markdown crash course available, use asterisks for bold, create new post in 2018-04-10 folder.', 'duration': 27.209, 'max_score': 1506.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1506384.jpg'}], 'start': 1297.088, 'title': 'Implementing a blog and client website content management', 'summary': 'Covers implementing a blog in gatsby with details on creating blog posts and emphasizes the flexibility of data types. it also explains simplifying content management for client websites using markdown, eliminating the need for html.', 'chapters': [{'end': 1484.569, 'start': 1297.088, 'title': 'Implementing a blog in gatsby', 'summary': 'Discusses the process of implementing a blog in gatsby, including creating blog posts with front matter and content in markdown files, with specific details on path, date, title, and author, and emphasizing the flexibility of data types that can be used.', 'duration': 187.481, 'highlights': ['The chapter demonstrates how to create blog posts in Gatsby by organizing them in folders and creating markdown files with front matter, including fields for path, date, title, and author, enabling the flexibility to define various types of data.', 'It explains the concept of front matter in markdown files, emphasizing the inclusion of fields like path, date, title, and author, providing a structured approach to defining blog post details.', 'The process of implementing a blog in Gatsby is explained, showcasing the creation of a blog post with front matter containing path, date, title, and author, highlighting the versatility of Gatsby for managing different types of content.', 'The chapter outlines the steps to create a blog post in Gatsby, utilizing folders and markdown files with front matter, allowing for the definition of specific details such as path, date, title, and author for each blog post.']}, {'end': 1528.969, 'start': 1485.27, 'title': 'Client website content management', 'summary': 'Explains how to provide clients with an easy way to add content to their website using markdown, avoiding the need for html, thus simplifying the process for them.', 'duration': 43.699, 'highlights': ['Clients can be provided with a simple markdown cheat sheet or directed to a markdown crash course for easy content creation.', 'Using markdown instead of HTML simplifies the process for clients in adding content to their website.', 'The process, while not as convenient as using WordPress, offers an easy way for clients to add content without requiring HTML.']}], 'duration': 231.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1297088.jpg', 'highlights': ['The chapter demonstrates how to create blog posts in Gatsby by organizing them in folders and creating markdown files with front matter, including fields for path, date, title, and author, enabling the flexibility to define various types of data.', 'The process of implementing a blog in Gatsby is explained, showcasing the creation of a blog post with front matter containing path, date, title, and author, highlighting the versatility of Gatsby for managing different types of content.', 'It explains the concept of front matter in markdown files, emphasizing the inclusion of fields like path, date, title, and author, providing a structured approach to defining blog post details.', 'The chapter outlines the steps to create a blog post in Gatsby, utilizing folders and markdown files with front matter, allowing for the definition of specific details such as path, date, title, and author for each blog post.', 'Using markdown instead of HTML simplifies the process for clients in adding content to their website.', 'Clients can be provided with a simple markdown cheat sheet or directed to a markdown crash course for easy content creation.', 'The process, while not as convenient as using WordPress, offers an easy way for clients to add content without requiring HTML.']}, {'end': 1878.114, 'segs': [{'end': 1790.272, 'src': 'embed', 'start': 1760.511, 'weight': 0, 'content': [{'end': 1768.176, 'text': "so we're actually going to put in a set of curly braces and we're gonna say resolve and then the name of the plugin,", 'start': 1760.511, 'duration': 7.665}, {'end': 1777.115, 'text': 'which is gatsby-source-filesystem.', 'start': 1768.176, 'duration': 8.939}, {'end': 1778.187, 'text': 'All right.', 'start': 1777.847, 'duration': 0.34}, {'end': 1785.47, 'text': 'And then we also want to put in options, which is going to be an object and we want the path.', 'start': 1778.687, 'duration': 6.783}, {'end': 1790.272, 'text': "So here we're going to use back ticks because we're going to use a template literal.", 'start': 1786.531, 'duration': 3.741}], 'summary': "Configuring 'gatsby-source-filesystem' plugin with options for path using template literal.", 'duration': 29.761, 'max_score': 1760.511, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1760511.jpg'}, {'end': 1878.114, 'src': 'embed', 'start': 1845.687, 'weight': 2, 'content': [{'end': 1853.309, 'text': "as far as this goes, as far as adding our plugins to this file, so let's save this and let's it.", 'start': 1845.687, 'duration': 7.622}, {'end': 1868.192, 'text': "let's at least make sure we can run our site so we'll say Gatsby, develop, make sure we don't have any errors, at least All right.", 'start': 1853.309, 'duration': 14.883}, {'end': 1871.64, 'text': "we'll go ahead and open this and let's just reload it.", 'start': 1868.192, 'duration': 3.448}, {'end': 1874.506, 'text': 'All right, so this is still working.', 'start': 1872.922, 'duration': 1.584}, {'end': 1875.648, 'text': "That's a good sign.", 'start': 1874.546, 'duration': 1.102}, {'end': 1878.114, 'text': 'We can close the config file.', 'start': 1876.55, 'duration': 1.564}], 'summary': 'Adding gatsby plugins to the file and checking for errors, successful site run.', 'duration': 32.427, 'max_score': 1845.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1845687.jpg'}], 'start': 1529.049, 'title': 'Creating and configuring in gatsby', 'summary': 'Provides a comprehensive guide on creating blog posts in gatsby, covering the process of creating folders, files, changing paths, dates, and authors, as well as installing plugins. additionally, it explains the installation and configuration of gatsby plugins like gatsby-transformer-remark, gatsby-plugin-catch-links, and gatsby-source-filesystem for transforming blog posts from markdown md files to html and intercepting local links from markdown.', 'chapters': [{'end': 1620.591, 'start': 1529.049, 'title': 'Creating blog posts in gatsby', 'summary': 'Explains the process of creating blog posts in gatsby, including creating folders, files, changing paths, dates, and authors, as well as installing plugins to enable access to the created pages.', 'duration': 91.542, 'highlights': ['Creating a folder named 2018-04-10-post-2 in Pages and adding an index.md file with modified content, including changing path to post two, date, title, and author.', 'Emphasizing the need to install three plugins, specifically Gatsby-source-file-system, as a crucial step to enable access to the created pages.', 'Highlighting the ineffectiveness of simply creating blog posts without the installation of necessary plugins to access the pages.']}, {'end': 1878.114, 'start': 1621.611, 'title': 'Configuring gatsby plugins', 'summary': 'Covers the installation and configuration of gatsby plugins including gatsby-transformer-remark, gatsby-plugin-catch-links, and gatsby-source-filesystem, enabling the transformation of blog posts from markdown md files to html for rendering and intercepting local links from markdown.', 'duration': 256.503, 'highlights': ['The installation and configuration of Gatsby-transformer-remark, Gatsby-plugin-catch-links, and Gatsby-source-filesystem are covered, enabling the transformation of blog posts from Markdown MD files to HTML for rendering. Installation and configuration of Gatsby plugins', 'Gatsby-plugin-catch-links is installed to intercept local links from Markdown and other non-React pages and perform a client-side push state to avoid page refresh, improving user experience. Installation and function of Gatsby-plugin-catch-links', 'The configuration of Gatsby-source-filesystem includes specifying the path to the pages folder where the blog posts are located, facilitating efficient data retrieval from the file system. Configuration of Gatsby-source-filesystem']}], 'duration': 349.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1529049.jpg', 'highlights': ['Emphasizing the need to install three plugins, specifically Gatsby-source-file-system, as a crucial step to enable access to the created pages.', 'The installation and configuration of Gatsby-transformer-remark, Gatsby-plugin-catch-links, and Gatsby-source-filesystem are covered, enabling the transformation of blog posts from Markdown MD files to HTML for rendering.', 'Gatsby-plugin-catch-links is installed to intercept local links from Markdown and other non-React pages and perform a client-side push state to avoid page refresh, improving user experience.']}, {'end': 2634.698, 'segs': [{'end': 1936.636, 'src': 'heatmap', 'start': 1892.358, 'weight': 1, 'content': [{'end': 1897.981, 'text': "And since we're using Graph QL, we have a tool called graphical available to us.", 'start': 1892.358, 'duration': 5.623}, {'end': 1905.265, 'text': "And if you've used Graph QL before, if you've watched my five part Graph QL server series, then you've you've worked with this.", 'start': 1898.061, 'duration': 7.204}, {'end': 1906.766, 'text': 'But we want to do local host.', 'start': 1905.365, 'duration': 1.401}, {'end': 1912.206, 'text': '8000 slash triple underscore GraphQL.', 'start': 1908.088, 'duration': 4.118}, {'end': 1913.546, 'text': 'All right.', 'start': 1912.226, 'duration': 1.32}, {'end': 1917.808, 'text': 'And then this is this allows us to basically just write queries.', 'start': 1913.646, 'duration': 4.162}, {'end': 1923.531, 'text': 'And this is an actual query to get all of our files within the pages folder.', 'start': 1918.368, 'duration': 5.163}, {'end': 1928.313, 'text': "If I go ahead and press run here, I don't know if this will automatically show up on yours.", 'start': 1923.571, 'duration': 4.742}, {'end': 1931.954, 'text': "It might be on mine because I've already ran it.", 'start': 1929.653, 'duration': 2.301}, {'end': 1933.775, 'text': 'I think it might have been my last query.', 'start': 1932.034, 'duration': 1.741}, {'end': 1936.636, 'text': 'If not, just go ahead and put that in there.', 'start': 1934.215, 'duration': 2.421}], 'summary': 'Using graph ql tool called graphical to write queries for getting all files within the pages folder.', 'duration': 44.278, 'max_score': 1892.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1892358.jpg'}, {'end': 2371.834, 'src': 'embed', 'start': 2303.351, 'weight': 0, 'content': [{'end': 2305.232, 'text': 'But we want to map through the edges.', 'start': 2303.351, 'duration': 1.881}, {'end': 2306.872, 'text': 'We want to map through this array.', 'start': 2305.312, 'duration': 1.56}, {'end': 2310.094, 'text': "And we're going to say post for each one.", 'start': 2307.833, 'duration': 2.261}, {'end': 2312.294, 'text': "And we'll set an arrow here.", 'start': 2311.014, 'duration': 1.28}, {'end': 2317.096, 'text': "And then for each post, let's create a div.", 'start': 2312.314, 'duration': 4.782}, {'end': 2321.958, 'text': "And then this is where we're going to have to add our key.", 'start': 2319.817, 'duration': 2.141}, {'end': 2327.08, 'text': "So we're going to say key equals post.node.id.", 'start': 2322.438, 'duration': 4.642}, {'end': 2339.906, 'text': "and then here let's put in h3, let's say post dot node, and then we want the title.", 'start': 2331.38, 'duration': 8.526}, {'end': 2341.967, 'text': 'and remember, the title is in the front matter.', 'start': 2339.906, 'duration': 2.061}, {'end': 2345.509, 'text': 'so we want to say front matter, dot, title.', 'start': 2341.967, 'duration': 3.542}, {'end': 2365.151, 'text': "okay, underneath that I'm gonna put a small tag and I'm gonna say posted by, and then we can say here post dot, node, dot, front matter, dot, author.", 'start': 2345.509, 'duration': 19.642}, {'end': 2368.353, 'text': 'okay, because, remember, we included the author.', 'start': 2365.151, 'duration': 3.202}, {'end': 2371.834, 'text': "i believe if i, yeah, if i save this, it's going to get rid of the spaces anyway.", 'start': 2368.353, 'duration': 3.481}], 'summary': 'Mapping through array to create divs with post data', 'duration': 68.483, 'max_score': 2303.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc2303351.jpg'}, {'end': 2446.628, 'src': 'embed', 'start': 2404.106, 'weight': 2, 'content': [{'end': 2408.089, 'text': 'Okay, remember in the front matter, we have that path value.', 'start': 2404.106, 'duration': 3.983}, {'end': 2409.751, 'text': "So we're going to use our link.", 'start': 2408.57, 'duration': 1.181}, {'end': 2412.897, 'text': "we're gonna say link to.", 'start': 2411.476, 'duration': 1.421}, {'end': 2415.279, 'text': "actually don't want quotes.", 'start': 2412.897, 'duration': 2.382}, {'end': 2431.033, 'text': "here we want link to post dot, node, dot, front matter, dot path and here let's just say read more, okay,", 'start': 2415.279, 'duration': 15.754}, {'end': 2442.667, 'text': "and then under the link I'm gonna put two more line breaks And let's also put an HR to separate each post.", 'start': 2431.033, 'duration': 11.634}, {'end': 2446.628, 'text': "All right, so let's save that.", 'start': 2444.307, 'duration': 2.321}], 'summary': "Using the front matter path value, a link to the post is created with 'read more' text and two line breaks. an hr is also added to separate each post.", 'duration': 42.522, 'max_score': 2404.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc2404106.jpg'}, {'end': 2634.698, 'src': 'embed', 'start': 2597.265, 'weight': 3, 'content': [{'end': 2601.007, 'text': 'if i forget a semicolon, it adds it because i prefer to use them.', 'start': 2597.265, 'duration': 3.742}, {'end': 2612.272, 'text': "but um, apparently you know some platforms like, like, like gatsby, like vue js, they encourage not using um semicolons, but it's all preference.", 'start': 2601.007, 'duration': 11.265}, {'end': 2621.915, 'text': "So here we're going to, let's say, export default function template.", 'start': 2613.672, 'duration': 8.243}, {'end': 2626.676, 'text': "And it's going to get passed in data.", 'start': 2624.595, 'duration': 2.081}, {'end': 2634.698, 'text': 'And what we want to do is create a variable called post.', 'start': 2631.918, 'duration': 2.78}], 'summary': 'Discussion on semicolon usage and preference in gatsby and vue.js platforms.', 'duration': 37.433, 'max_score': 2597.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc2597265.jpg'}], 'start': 1879.611, 'title': 'Using gatsby and graphql for data queries', 'summary': 'Covers setting up gatsby node js file to create graphql queries, retrieving all files within the pages folder and using graphql to query markdown files. it demonstrates how to retrieve front matter data, actual content, and creating a blog index page.', 'chapters': [{'end': 1993.048, 'start': 1879.611, 'title': 'Setting up gatsby node js file and graphql queries', 'summary': 'Covers setting up gatsby node js file and creating graphql queries using graphical tool to get all files within the pages folder, demonstrating the process and the data retrieved.', 'duration': 113.437, 'highlights': ['Using Graph QL, we have a tool called graphical available to us. Mentions the availability of a tool called graphical for working with Graph QL.', 'An actual query to get all of our files within the pages folder. Describes the specific query to retrieve all files within the pages folder using Graph QL.', 'The data object has all file and edges, with edges being an array of nodes or files. Explains the structure of the data object retrieved, including the presence of edges as an array of nodes or files.']}, {'end': 2634.698, 'start': 1993.048, 'title': 'Using graphql to query markdown files', 'summary': 'Explains using graphql to query markdown files, demonstrating how to retrieve front matter data and the actual content from the files, and creating a blog index page to display the listing of posts.', 'duration': 641.65, 'highlights': ['Demonstrating the usage of GraphQL to query markdown files and retrieve front matter data and actual content.', 'Creating a blog index page to display the listing of posts.', 'Showing how to use GraphQL to get specific data from markdown files such as title, date, and author.']}], 'duration': 755.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc1879611.jpg', 'highlights': ['Mentions the availability of a tool called graphical for working with Graph QL.', 'Describes the specific query to retrieve all files within the pages folder using Graph QL.', 'Explains the structure of the data object retrieved, including the presence of edges as an array of nodes or files.', 'Demonstrating the usage of GraphQL to query markdown files and retrieve front matter data and actual content.', 'Creating a blog index page to display the listing of posts.', 'Showing how to use GraphQL to get specific data from markdown files such as title, date, and author.']}, {'end': 2912.053, 'segs': [{'end': 2716.069, 'src': 'embed', 'start': 2634.858, 'weight': 1, 'content': [{'end': 2637.279, 'text': 'And we want to get this from our markdown remark.', 'start': 2634.858, 'duration': 2.421}, {'end': 2639.78, 'text': 'So we can get that from data.markdownremark.', 'start': 2637.379, 'duration': 2.401}, {'end': 2646.937, 'text': "Oops, don't want to do that.", 'start': 2645.615, 'duration': 1.322}, {'end': 2660.835, 'text': "So let's see, underneath that we're going to have our return and we'll put in a div here.", 'start': 2649.5, 'duration': 11.335}, {'end': 2665.287, 'text': 'And I want to have a back button.', 'start': 2663.346, 'duration': 1.941}, {'end': 2667.648, 'text': 'Remember, this is for the individual post.', 'start': 2665.307, 'duration': 2.341}, {'end': 2670.609, 'text': "So I'm going to have link, which I actually need to bring in.", 'start': 2667.688, 'duration': 2.921}, {'end': 2679.953, 'text': "So let's import link from Gatsby-link.", 'start': 2671.369, 'duration': 8.584}, {'end': 2684.015, 'text': "So right here, we'll say link.", 'start': 2682.314, 'duration': 1.701}, {'end': 2696.954, 'text': "and let's set this to slash blog, because that's the index page for the blog.", 'start': 2687.967, 'duration': 8.987}, {'end': 2703.038, 'text': "and here we'll just say go back, okay, and then I'm just going to put an HR underneath again.", 'start': 2696.954, 'duration': 6.084}, {'end': 2704.119, 'text': "this isn't going to be pretty.", 'start': 2703.038, 'duration': 1.081}, {'end': 2716.069, 'text': "and then we'll have an h1 which will have the title, so we can say post dot front matter, dot title.", 'start': 2704.119, 'duration': 11.95}], 'summary': 'Creating a back button for individual blog post with gatsby-link', 'duration': 81.211, 'max_score': 2634.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc2634858.jpg'}, {'end': 2777.496, 'src': 'embed', 'start': 2739.315, 'weight': 3, 'content': [{'end': 2747.158, 'text': "so let's say posted by And by the way, we haven't created the query yet to actually get this.", 'start': 2739.315, 'duration': 7.843}, {'end': 2749.019, 'text': "We'll do that below.", 'start': 2748.158, 'duration': 0.861}, {'end': 2757.506, 'text': 'On post.frontmatter.date.', 'start': 2750.44, 'duration': 7.066}, {'end': 2765.232, 'text': "And then to actually set our HTML, we're going to have a div.", 'start': 2760.208, 'duration': 5.024}, {'end': 2771.011, 'text': "And we're going to use React's dangerously set inner HTML.", 'start': 2767.068, 'duration': 3.943}, {'end': 2773.833, 'text': 'So dangerously set inner HTML.', 'start': 2771.131, 'duration': 2.702}, {'end': 2777.496, 'text': 'And we want to set that to double curly braces.', 'start': 2774.534, 'duration': 2.962}], 'summary': "Creating a query to get post data and setting html using react's dangerously set inner html.", 'duration': 38.181, 'max_score': 2739.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc2739315.jpg'}, {'end': 2912.053, 'src': 'embed', 'start': 2846.517, 'weight': 0, 'content': [{'end': 2856.093, 'text': 'so we just want to use markdown remark, All right, and then we pass in here inside these curly braces.', 'start': 2846.517, 'duration': 9.576}, {'end': 2857.654, 'text': 'This is going to look a little weird.', 'start': 2856.133, 'duration': 1.521}, {'end': 2878.92, 'text': "So we're going to say front matter And then set some curly braces and we're going to say where the path and then another set of curly braces is equal to eq and is equal to the path that's brought in.", 'start': 2857.654, 'duration': 21.266}, {'end': 2880.221, 'text': 'so money sign path.', 'start': 2878.92, 'duration': 1.301}, {'end': 2882.142, 'text': 'I know that looks a little weird.', 'start': 2880.721, 'duration': 1.421}, {'end': 2889.285, 'text': 'And we want to get the HTML, and then we also want to get the front matter.', 'start': 2882.642, 'duration': 6.643}, {'end': 2895.028, 'text': 'We can define what front matter we want, which is basically everything.', 'start': 2891.006, 'duration': 4.022}, {'end': 2899.69, 'text': 'We want the path, the title, the author, and the date.', 'start': 2895.068, 'duration': 4.622}, {'end': 2902.971, 'text': "Now, remember, this doesn't have to be a blog.", 'start': 2900.93, 'duration': 2.041}, {'end': 2912.053, 'text': "You could have other stuff here like event location or something like that, but we're using a blog, so these are relevant pieces of data.", 'start': 2903.011, 'duration': 9.042}], 'summary': 'Using markdown remark to extract front matter like path, title, author, and date for blog content.', 'duration': 65.536, 'max_score': 2846.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc2846517.jpg'}], 'start': 2634.858, 'title': 'Customizing post page and creating blog template', 'summary': "Covers customizing individual post page by adding a back button and post title using gatsby-link and displaying post's information. it also discusses creating a react blog template, setting html markup using react's dangerously set inner html, and retrieving specific post data through graphql.", 'chapters': [{'end': 2739.315, 'start': 2634.858, 'title': 'Adding back button and post title in individual post page', 'summary': "Covers the process of adding a back button and post title to the individual post page in a markdown remark, utilizing gatsby-link for the link and displaying the post's title and author information.", 'duration': 104.457, 'highlights': ["The chapter covers the process of adding a back button and post title to the individual post page in a markdown remark, utilizing Gatsby-link for the link and displaying the post's title and author information.", "The code demonstrates importing link from Gatsby-link and using it to create a back button linked to the blog's index page.", "It explains displaying the post's title using post.frontmatter.title and author information."]}, {'end': 2912.053, 'start': 2739.315, 'title': 'Creating a react blog template', 'summary': "Discusses creating a react blog template, including setting html markup using react's dangerously set inner html and creating a query to get a single post by path using graphql, retrieving specific front matter data such as path, title, author, and date.", 'duration': 172.738, 'highlights': ['Creating a query using GraphQL to get a single post by path, retrieving specific front matter data such as path, title, author, and date', "Setting HTML markup using React's dangerously set inner HTML to display post content"]}], 'duration': 277.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc2634858.jpg', 'highlights': ["The chapter covers the process of adding a back button and post title to the individual post page in a markdown remark, utilizing Gatsby-link for the link and displaying the post's title and author information.", 'Creating a query using GraphQL to get a single post by path, retrieving specific front matter data such as path, title, author, and date', "The code demonstrates importing link from Gatsby-link and using it to create a back button linked to the blog's index page.", "Setting HTML markup using React's dangerously set inner HTML to display post content", "It explains displaying the post's title using post.frontmatter.title and author information."]}, {'end': 3398.232, 'segs': [{'end': 3008.074, 'src': 'embed', 'start': 2950.887, 'weight': 1, 'content': [{'end': 2957.49, 'text': "It doesn't know that this post 1 should actually go to that particular post.", 'start': 2950.887, 'duration': 6.603}, {'end': 2965.672, 'text': 'So we have to do one more thing, or edit one more file, I believe, and that is gatsby-node.js.', 'start': 2958.05, 'duration': 7.622}, {'end': 2968.333, 'text': 'all right.', 'start': 2967.893, 'duration': 0.44}, {'end': 2974.577, 'text': "so we're going to get rid of everything here, and this may seem a little confusing, but we basically need to.", 'start': 2968.333, 'duration': 6.244}, {'end': 2984.983, 'text': "we need to use the create page API, okay, and that that's does exactly that it's going to make it, so that we can have post one,", 'start': 2974.577, 'duration': 10.406}, {'end': 2989.706, 'text': 'post two and any other pages, so that we can create those.', 'start': 2984.983, 'duration': 4.723}, {'end': 3008.074, 'text': "so we're going to bring in the path, say require path, which is just a standard Node.js module, and then say exports.createPages.", 'start': 2989.706, 'duration': 18.368}], 'summary': 'Edit gatsby-node.js to use create page api for post creation.', 'duration': 57.187, 'max_score': 2950.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc2950887.jpg'}, {'end': 3320.564, 'src': 'embed', 'start': 3281.214, 'weight': 0, 'content': [{'end': 3288.921, 'text': "I think that this file whoops, this file is the most confusing of all, to me at least, but let's try it.", 'start': 3281.214, 'duration': 7.707}, {'end': 3296.788, 'text': 'so we will have to restart the server and hopefully it works alright.', 'start': 3288.921, 'duration': 7.867}, {'end': 3302.333, 'text': 'so looks like we have an error here, something to do with our promise cannot read.', 'start': 3296.788, 'duration': 5.545}, {'end': 3312.657, 'text': 'path of undefined see, Oh, I forgot a T in matter.', 'start': 3302.333, 'duration': 10.324}, {'end': 3318.682, 'text': 'I love when the error is that easy.', 'start': 3317.101, 'duration': 1.581}, {'end': 3320.564, 'text': "All right, I'm just going to restart this again.", 'start': 3318.922, 'duration': 1.642}], 'summary': 'Encountered server error, resolved by restarting. issue with promise reading.', 'duration': 39.35, 'max_score': 3281.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc3281214.jpg'}], 'start': 2913.673, 'title': 'Fixing gatsby 404 page error', 'summary': 'Details the process of fixing a 404 page error in gatsby by editing the gatsby-node.js file, utilizing the createpages api, and resolving a path error, resulting in successful page compilation and navigation to blog posts.', 'chapters': [{'end': 3398.232, 'start': 2913.673, 'title': 'Fixing gatsby 404 page error', 'summary': 'Details the process of fixing a 404 page error in gatsby by editing the gatsby-node.js file, utilizing the createpages api, and resolving a path error, resulting in successful page compilation and navigation to blog posts.', 'duration': 484.559, 'highlights': ['The chapter details the process of fixing a 404 page error in Gatsby by editing the gatsby-node.js file, utilizing the createPages API, and resolving a path error, resulting in successful page compilation and navigation to blog posts.', 'The gatsby-node.js file is edited to utilize the createPages API, defining a post template and returning a GraphQL query to loop through the post data and create pages for each post, resolving the 404 page error and enabling navigation to blog posts.', "A path error is resolved by correcting a missing 't' in 'matter,' leading to successful compilation and navigation to blog posts."]}], 'duration': 484.559, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc2913673.jpg', 'highlights': ['The gatsby-node.js file is edited to utilize the createPages API, defining a post template and returning a GraphQL query to loop through the post data and create pages for each post, resolving the 404 page error and enabling navigation to blog posts.', "A path error is resolved by correcting a missing 't' in 'matter,' leading to successful compilation and navigation to blog posts.", 'The chapter details the process of fixing a 404 page error in Gatsby by editing the gatsby-node.js file, utilizing the createPages API, and resolving a path error, resulting in successful page compilation and navigation to blog posts.']}, {'end': 3872.093, 'segs': [{'end': 3872.093, 'src': 'embed', 'start': 3850.897, 'weight': 0, 'content': [{'end': 3859.143, 'text': 'so i would definitely suggest looking into a stand sit desk, and anthro desk has affordable and quality solutions for maximum health and productivity.', 'start': 3850.897, 'duration': 8.246}, {'end': 3862.185, 'text': 'you can choose from different frame widths depending on your needs.', 'start': 3859.143, 'duration': 3.042}, {'end': 3864.607, 'text': 'i actually just got one myself and i love it.', 'start': 3862.185, 'duration': 2.422}, {'end': 3868.43, 'text': 'they also offer accessories like standing converters and floor mats.', 'start': 3864.607, 'duration': 3.823}, {'end': 3872.093, 'text': 'so check out anthrodesk.com or click the link in the description below.', 'start': 3868.43, 'duration': 3.663}], 'summary': 'Anthro desk offers affordable stand-sit desks and accessories for improved health and productivity.', 'duration': 21.196, 'max_score': 3850.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc3850897.jpg'}], 'start': 3398.232, 'title': 'Setting up and deploying gatsby blog', 'summary': 'Covers setting up a static site with a blog using gatsby, including configuring graphql and deploying the website with github, netlify, and custom domain. it also emphasizes the ease of adding contact forms and the speed of gatsby technology for creating fast static sites.', 'chapters': [{'end': 3489.88, 'start': 3398.232, 'title': 'Setting up a gatsby blog', 'summary': 'Outlines the process of setting up a static site with a blog using gatsby, mentioning the necessity of configuring graphql and suggesting learning resources for it.', 'duration': 91.648, 'highlights': ['The chapter explains the process of setting up a static site with a blog using Gatsby.', 'Mentions the necessity of configuring GraphQL for the setup.', 'Suggests learning resources for understanding GraphQL and its importance in web development.']}, {'end': 3690.527, 'start': 3491.321, 'title': 'Deploying gatsby website with github and netlify', 'summary': 'Explains the process of deploying a gatsby website by pushing it to github, initializing a git repository, and deploying it with netlify, including steps like creating a new repository, initializing a git repository, pushing to a remote git repository, and deploying the website with netlify.', 'duration': 199.206, 'highlights': ['The process involves pushing the Gatsby website to GitHub, initializing a Git repository, and deploying it with Netlify.', "Creating a new repository named 'Gatsby Crash Course' on GitHub.", "Initializing a Git repository using the command 'git init'.", "Pushing the website to a remote Git repository after adding and committing the changes with the command 'git push'.", 'Deploying the website with Netlify by choosing the GitHub repository and running the Gatsby build process.']}, {'end': 3872.093, 'start': 3690.607, 'title': 'Deploying a site with netlify', 'summary': 'Explains how to deploy a site using netlify, highlighting the ease of adding a custom domain and https, the use of contact forms without building a backend, and the speed and practicality of gatsby technology for creating fast static sites.', 'duration': 181.486, 'highlights': ['Netlify allows easy addition of custom domains and HTTPS, making it convenient for users with one-click setup.', "The use of contact forms without the need to build a backend is highlighted, showcasing the practicality of Netlify's services.", 'The speed and practicality of Gatsby technology for creating fast static sites is emphasized, offering a convenient solution for clients and users.', 'Recommendation for a stand-sit desk solution from anthrodesk.com is mentioned, providing a solution for health and productivity for professionals who sit for extended periods.']}], 'duration': 473.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6YhqQ2ZW1sc/pics/6YhqQ2ZW1sc3398232.jpg', 'highlights': ['The process involves pushing the Gatsby website to GitHub, initializing a Git repository, and deploying it with Netlify.', 'Netlify allows easy addition of custom domains and HTTPS, making it convenient for users with one-click setup.', 'The chapter explains the process of setting up a static site with a blog using Gatsby.', "The use of contact forms without the need to build a backend is highlighted, showcasing the practicality of Netlify's services.", 'The speed and practicality of Gatsby technology for creating fast static sites is emphasized, offering a convenient solution for clients and users.']}], 'highlights': ['AnthroDesk offers affordable stand-sit desks for improved health and productivity', 'Gatsby JS creates practical websites using React and GraphQL for freelancers', 'Gatsby JS has a rich data plugin ecosystem for various content management systems', 'Hot reloading in Gatsby JS provides instant updates without page reload', 'Gatsby link is used for internal linking within the website', 'The chapter covers adding styling to a navigation bar using divs, ul, and list items, including setting background color, padding, list style, display property, and link imports', 'The chapter demonstrates how to create blog posts in Gatsby by organizing them in folders and creating markdown files with front matter, including fields for path, date, title, and author, enabling the flexibility to define various types of data', 'Emphasizing the need to install three plugins, specifically Gatsby-source-file-system, as a crucial step to enable access to the created pages', 'Mentions the availability of a tool called graphical for working with Graph QL', "The chapter covers the process of adding a back button and post title to the individual post page in a markdown remark, utilizing Gatsby-link for the link and displaying the post's title and author information", 'The gatsby-node.js file is edited to utilize the createPages API, defining a post template and returning a GraphQL query to loop through the post data and create pages for each post, resolving the 404 page error and enabling navigation to blog posts', 'The process involves pushing the Gatsby website to GitHub, initializing a Git repository, and deploying it with Netlify', 'Netlify allows easy addition of custom domains and HTTPS, making it convenient for users with one-click setup', 'The speed and practicality of Gatsby technology for creating fast static sites is emphasized, offering a convenient solution for clients and users']}