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
Starter Project
https://github.com/john-smilga/starter-project-gatsby-strapi-portfolio-2020
Please keep in mind, that you will need a complete strapi-api (all content-types with at least one instance of data) to run finished project.
Source Code
https://github.com/john-smilga/gatsby-strapi-portfolio-site-2020
Please look at readme.md for claudinary instructions.
https://github.com/john-smilga/strapi-gatsby-porfolio-2020-api
Never got it to run. Lots of errors. Tried it twice
I am getting a whole lot of errors in starting with strapi on Windows 10. If anyone can help????
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?
So far a great tutorial, although the SocialLinks component is not visible for some reason.
These videos should be more accessible and have subtitles
How can we deploy our strapi portfolio's api online? Can someone help me with that?
Anyone know how he edited the profile photos? I don't have access to photoshop or anything
Hi everyone! Did any of you recently installed the gatsby starter package and got a high vulnerability related to url-regex?…
Actually isnt most popular,most popular is still WP.
Why does a black outline appear on the job links? I had to set outline: 0; to eliminate it.
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>
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?
killer tutorial FreeCodeCamp & John Smilga !
awesome!!
Thank you again John Smilga for the perfect explanation throughout the tutorial.
Is this from scratch?? I mean i have to learn strapi and Gatsby
dont see the Create (collection/single/new) component options? why is that?
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.
This is one of the videos that I will never forget !!!
For now, we don`t have access to backend in the project, don't spend your time 🙁