diff --git a/docs/docs/tutorial/part-1/index.mdx b/docs/docs/tutorial/part-1/index.mdx index d914d5070f778..edeaa9fbad87a 100644 --- a/docs/docs/tutorial/part-1/index.mdx +++ b/docs/docs/tutorial/part-1/index.mdx @@ -10,7 +10,7 @@ import { MdArrowForward } from 'react-icons/md' Now that you've set up your computer with all the tools you'll need, it's time to get started! -Over the course of this Tutorial, you'll build and deploy your first Gatsby site: a blog site with support for images and MDX! (If that doesn't mean anything to you now, that's okay! It will by the time you reach the end.) Here's a [finished example](https://introworkshopexamplesitev3.gatsbyjs.io/) of the site you'll build. +Over the course of this Tutorial, you'll build and deploy your first Gatsby site: a blog site with support for images and MDX! (If that doesn't mean anything to you now, that's okay! It will by the time you reach the end.) Here's a [finished example](https://gatsbytutorialexample.gatsbyjs.io/) of the site you'll build. You can also follow along with the [GitHub repository for the finished example](https://github.com/gatsbyjs/tutorial-example). In this part of the Tutorial, you will go through the process of creating the template for your blog site and deploying it online for everyone to see. @@ -316,6 +316,13 @@ First, you write the code for your Gatsby site from your computer. When you're r +### Key takeaways + +* To create a new Gatsby site from the command line, you can run the `gatsby new` command. +* To run your site locally, use the `gatsby develop` command. You can view your site in a web browser at `localhost:8000`. +* Gatsby Cloud is an infrastructure platform specifically optimized for building, deploying, and hosting Gatsby sites. + * When you push a new commit to the `main` branch of the GitHub repository for your site, Gatsby Cloud will detect the changes, rebuild a new version of your site, and then redeploy it. + **Share Your Feedback!** diff --git a/docs/docs/tutorial/part-2/index.mdx b/docs/docs/tutorial/part-2/index.mdx index c6999858bd6d3..b8682985d6de4 100644 --- a/docs/docs/tutorial/part-2/index.mdx +++ b/docs/docs/tutorial/part-2/index.mdx @@ -51,7 +51,7 @@ You can also create components from other components. For example, you might dec **Try it!** -Look back at the [finished example blog site](https://introworkshopexamplesitev3.gatsbyjs.io). How might you break down the pages into components? +Look back at the [finished example blog site](https://gatsbytutorialexample.gatsbyjs.io/). How might you break down the pages into components? Not sure where to start? Look for parts of the UI that repeat within a page or across multiple pages. @@ -387,7 +387,7 @@ export default AboutPage ## Create a reusable layout component -If you take another look at the [finished example blog](https://introworkshopexamplesitev3.gatsbyjs.io), you might notice that there are some repeated parts of the UI across each page, like the site title and the navigation menu. +If you take another look at the [finished example blog](https://gatsbytutorialexample.gatsbyjs.io/), you might notice that there are some repeated parts of the UI across each page, like the site title and the navigation menu. You could copy those elements into each page of your site separately. But imagine your site had dozens (or even thousands) of pages. If you wanted to make a change to the structure of your navigation menu, you'd have to go and update every one of those files separately. Yuck. @@ -758,6 +758,12 @@ Luckily, when you use CSS Modules with Gatsby, you can have both! Your kebab-cas ![A screenshot of the Home page. The styles have been updated so now the page title is in purple, and the navigation links at the top of the page are in a single line instead of a bulleted list.](./index-page-styled.png) + + +**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example). + + + ## Summary Congratulations, you've made it to the end of Part 2! 🥳 (That was a long one!) diff --git a/docs/docs/tutorial/part-3/index.mdx b/docs/docs/tutorial/part-3/index.mdx index e35d8df05b8a8..c265f7a790226 100644 --- a/docs/docs/tutorial/part-3/index.mdx +++ b/docs/docs/tutorial/part-3/index.mdx @@ -245,6 +245,12 @@ export default IndexPage ![The home page of your site, which includes a different picture of a dog.](./index-page-with-static-image-from-filesystem.png) + + +**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example). + + + ## Summary Take a moment to think back on what you've learned so far. Challenge yourself to answer the following questions from memory: diff --git a/docs/docs/tutorial/part-4/index.mdx b/docs/docs/tutorial/part-4/index.mdx index 739b59b408719..d1f4075c0989a 100644 --- a/docs/docs/tutorial/part-4/index.mdx +++ b/docs/docs/tutorial/part-4/index.mdx @@ -846,6 +846,12 @@ Good job! You've finished the first step of your new blog page. You won't be able to render the contents of your posts just yet, since your site doesn't know how to process MDX. You'll fix that in the next part of the Tutorial! + + +**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example). + + + ## Summary Take a moment to think back on what you've learned so far. Challenge yourself to answer the following questions from memory: diff --git a/docs/docs/tutorial/part-5/index.mdx b/docs/docs/tutorial/part-5/index.mdx index e1ec82a2ecdd1..a614da0182f66 100644 --- a/docs/docs/tutorial/part-5/index.mdx +++ b/docs/docs/tutorial/part-5/index.mdx @@ -581,6 +581,12 @@ export default BlogPage Nice work! Your site now has a blog page with actual content. + + +**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example). + + + ## Summary Take a moment to think back on what you've learned so far. Challenge yourself to answer the following questions from memory: diff --git a/docs/docs/tutorial/part-6/index.mdx b/docs/docs/tutorial/part-6/index.mdx index de6d2328a8e0b..3589adce00164 100644 --- a/docs/docs/tutorial/part-6/index.mdx +++ b/docs/docs/tutorial/part-6/index.mdx @@ -23,7 +23,7 @@ By the end of this part of the Tutorial, you will be able to: **Prefer a video?** -If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 5. +If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 6. You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs). @@ -534,6 +534,13 @@ The last step of Part 6 is to clean up your Blog page. Instead of rendering the Congratulations, you now have a multi-page blog site! Try adding some new `.mdx` files to your top-level `blog` directory. They should get added to your Blog page automatically when your site rebuilds! + + +**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example). + + + + ## Summary Take a moment to think back on what you've learned so far. Challenge yourself to answer the following questions from memory: diff --git a/docs/docs/tutorial/part-7/folder-structure-with-images.png b/docs/docs/tutorial/part-7/folder-structure-with-images.png new file mode 100644 index 0000000000000..48d1ca07f6bc2 Binary files /dev/null and b/docs/docs/tutorial/part-7/folder-structure-with-images.png differ diff --git a/docs/docs/tutorial/part-7/index.mdx b/docs/docs/tutorial/part-7/index.mdx index f267ccc74a6bd..99b1e2c846a0a 100644 --- a/docs/docs/tutorial/part-7/index.mdx +++ b/docs/docs/tutorial/part-7/index.mdx @@ -16,6 +16,19 @@ By the end of this part of the Tutorial, you will be able to: - Use the `GatsbyImage` component to create images dynamically from data. + + +**Prefer a video?** + +If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 7. + +You can catch the stream live on Wednesdays at 10AM Pacific Time / 5PM UTC on the [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs). + + + + + + ## What's the difference between `GatsbyImage` and `StaticImage`? Back in [Part 3](/docs/tutorial/part-3/) of the Tutorial, you learned about how to use the `StaticImage` component from `gatsby-plugin-image`. @@ -55,6 +68,7 @@ The steps below will help you find and download some photos for your hero images ![A screenshot of the Unsplash home page](./unsplash.png) 2. When you've found a photo that you like, download it and add it to subdirectory for one of your blog posts. Continue downloading photos until you have a different hero image for each post. + ![Diagram of the "blog" folder structure, with the hero image for each post in the subdirectory for that post.](./folder-structure-with-images.png) @@ -344,8 +358,8 @@ Once you have your GraphQL query set up, you can to add it to your blog post pag mdx(slug: {eq: $slug}) { body frontmatter { - date(formatString: "MMMM DD, YYYY") title + date(formatString: "MMMM DD, YYYY") hero_image_alt hero_image_credit_link hero_image_credit_text @@ -456,9 +470,9 @@ const BlogPost = ({ data }) => { {/* highlight-start */}

Photo Credit:{" "} - + {data.mdx.frontmatter.hero_image_credit_text} - +

{/* highlight-end */} @@ -485,6 +499,13 @@ Try removing the `{" "}` and see what happens. The paragraph text should end up ![A screenshot of the My First Post blog page, which now includes a photo credit underneath the hero image. It says, "Photo Credit: Christopher Ayme".](./blog-post-with-hero-image-credit.png) + + +**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example). + + + + ## Summary Take a moment to think back on what you've learned so far. Challenge yourself to answer the following questions from memory: