Strapi & GatsbyJS Course – Portfolio Project



Learn to use Gatsby and Strapi to code a portfolio project in this full course. Strapi is the most popular open-source Headless CMS and is based on Node.js. Gatsby allows developers to quickly build very fast static websites and apps. Both use JavaScript.

🎥 Gatsby Tutorial: https://www.youtube.com/watch?v=kzWIUX3CpuI

💻 Starter Code: https://github.com/john-smilga/strapi-gatsby-porfolio-2020-api
🔗 View completed project: https://gatsby-strapi-portfolio-project.netlify.app/

✏️ Course created by John Smilga. Check out his YouTube channel: https://www.youtube.com/codingaddict

🔗 John Smilga’s website: https://www.johnsmilga.com

⭐️ Course Contents ⭐️
⌨️ (00:00) Intro
⌨️ (04:47) Dev Setup
⌨️ (07:19) Starter Info
⌨️ (20:31) Navbar
⌨️ (27:38) Hero Image Query
⌨️ (31:56) Hero
⌨️ (41:22) Services And Title
⌨️ (49:52) Strapi Info
⌨️ (51:54) Strapi Setup
⌨️ (56:44) First Content Type
⌨️ (1:07:09) First Content
⌨️ (1:15:16) Connect Gatsby To Strapi
⌨️ (1:20:25) Project Backend
⌨️ (1:24:37) Jobs Query
⌨️ (1:29:31) Jobs Component
⌨️ (1:47:47) Projects Content-Type
⌨️ (1:55:53) Projects Content
⌨️ (2:00:24) Projects Query
⌨️ (2:05:54) Projects Setup
⌨️ (2:12:04) Project List
⌨️ (2:19:34) Project Component
⌨️ (2:27:15) Projects Page
⌨️ (2:31:12) Blog Content-Type
⌨️ (2:36:45) Blog Content
⌨️ (2:43:59) Blog Query
⌨️ (2:49:45) Blog List
⌨️ (2:54:02) Blog Component
⌨️ (2:58:42) Blog Page
⌨️ (3:03:49) Create Blog Pages Programmatically
⌨️ (3:10:34) Blog Template
⌨️ (3:16:22) Blog Image
⌨️ (3:19:02) Strapi Claudinary
⌨️ (3:27:25) Prop Types
⌨️ (3:46:17) Footer
⌨️ (3:49:24) Sidebar
⌨️ (3:54:47) Sidebar Toggle
⌨️ (4:00:42) Sidebar Animation
⌨️ (4:02:58) Error Page
⌨️ (4:05:54) About Page Intro
⌨️ (4:08:33) About Page Content Type And Data
⌨️ (4:13:34) About Page
⌨️ (4:22:37) Contact Page
⌨️ (4:27:17) Formspree
⌨️ (4:32:13) Gatsby Browser
⌨️ (4:34:56) Google Fonts
⌨️ (4:37:48) Netlify Deploy
⌨️ (4:42:55) Seo Intro
⌨️ (4:46:36) Seo Alternatives
⌨️ (4:48:00) Seo Basic Setup
⌨️ (4:54:29) Seo Query
⌨️ (5:01:55) Seo All Pages
⌨️ (5:08:18) Sitemap Plugin

⌨️ (5:10:30) Twitter Cards

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 21 Comments

  1. Access Code

    Never got it to run. Lots of errors. Tried it twice

  2. I am getting a whole lot of errors in starting with strapi on Windows 10. If anyone can help????

  3. I got "AssertionError [ERR_ASSERTION]: Cannot wrap non-Error object" when try to upload image to cloudnary, I follow the new instructions on npm as you said, there is something wrong?

  4. czumasky

    So far a great tutorial, although the SocialLinks component is not visible for some reason.

  5. Jorge Barcos

    These videos should be more accessible and have subtitles

  6. Aman Shroff

    How can we deploy our strapi portfolio's api online? Can someone help me with that?

  7. Karin Hsu

    Anyone know how he edited the profile photos? I don't have access to photoshop or anything

  8. Catalina Cimpanu

    Hi everyone! Did any of you recently installed the gatsby starter package and got a high vulnerability related to url-regex?…

  9. Goran Ilic

    Actually isnt most popular,most popular is still WP.

  10. Why does a black outline appear on the job links? I had to set outline: 0; to eliminate it.

  11. At around the 2:25:00 mark, I think it would be a good idea to conditonally render the project links as well just in case there are no links for github or url.

    <div className="project-links">
    {/*conditionally render links if they exist*/}
    {
    github && <a href={github}><FaGithubSquare className="project-icon" /></a>
    }
    {
    url && <a href={url}><FaShareSquare className="project-icon" /></a>
    }
    </div>

  12. When I uploaded my image, it successfully uploaded to Cloudinary, but when I view the image in my blog post, it appears small and distorted. What happened?

  13. Mridul Bagla

    Is this from scratch?? I mean i have to learn strapi and Gatsby

  14. Mark Emerson

    dont see the Create (collection/single/new) component options? why is that?

  15. Shameek Agarwal

    it would be very helpful if someone can please verify few of my doubts –

    1. when we use strapi + gatsby, its not like our gatsby makes request to strapi. the data of strapi is just "bundled" with gatsby in a way.

    2. when we used images, we could use the childImageSharp query for "projects", while we couldnt do so for "individual blogs" – i think here is why –
    a. in "projects" case, we use the "bundled data" by strapi so we can display images.
    b. in "individual blog" case, we cannot just use that image as we cannot use the Image component of gatsby, its just an <img /> tag, with src which needs to point to a valid url, which is why we had to use cloudinary.

  16. Oleksii K

    For now, we don`t have access to backend in the project, don't spend your time 🙁

Leave a Reply