Came here just to tell you that you're the best! I love and watched almost all your series. I will buy you lots of beer when I get my job.
@WatchandLearnTutorials
5 жыл бұрын
Hey, thanks man! Glad I could help. Good luck with your job search ;) !
@tumpperi3891
3 жыл бұрын
This is nice showcase that you dont need to know everything to get started. Just need problemsolving skills, subbed!
@WatchandLearnTutorials
3 жыл бұрын
Yup, that is a very good observation. 😀
@mayankpandey6051
3 жыл бұрын
Excellent , Thank You So-Much for Gatsby + WordPress Tutorials! ( Very Interesting )
@WatchandLearnTutorials
3 жыл бұрын
You are welcome 😃
@shalomeffiom
6 жыл бұрын
Man, if I say you're a life saver it's an understatement. Thanks a lot!
@WatchandLearnTutorials
5 жыл бұрын
Glad I could help :)
@Parathong
6 жыл бұрын
Thank you very much! Great and clear explanation with errors you’ll run into, setting this up for the first time. Easy to follow and laidback vibe. Excellent!
@birdbrainsolutions6112
4 жыл бұрын
Like another user said, I've never subscribed so fast :) Thank you for creating the tutorials!
@WatchandLearnTutorials
4 жыл бұрын
Thanks :)
@logkdogk
5 жыл бұрын
Awesome Ivan, thank you! Just got my setup hooked up today, and gonna watch the rest of your series. Also looked into your repo. Keep up the good work!
@billycheung7095
5 жыл бұрын
Great tutorial as an introduction of how to work with Wordpress in Gatsby.js
@hammadrashid1383
3 жыл бұрын
Great explanation... Love it...
@WatchandLearnTutorials
3 жыл бұрын
Thanks :)
@bortize1311
4 жыл бұрын
Gave my like in the first minute. You gave fantastic explain
@MegaPapoy
3 жыл бұрын
great tutorial wich still actual in 2020
@WatchandLearnTutorials
3 жыл бұрын
Glad to hear that :)
@UmerFarooq-us9nz
3 жыл бұрын
Keep it up the good work. Excellent communication and explanation. Love from pakistan. I have subscribed your Awesome 😎 channel. A little gift from me. Thanks 😊
@WatchandLearnTutorials
3 жыл бұрын
Thanks for watching and subscribing 😀
@binthedeveloper8422
2 жыл бұрын
Awesome!
@ChuckReynolds
6 жыл бұрын
Nice intro... will be watching the playlist soon
@JonIler
5 жыл бұрын
Dude, THANK YOU. This series is really helping with a big project I'm working on,
@WatchandLearnTutorials
5 жыл бұрын
You did hear at the beginning of the video that I'm a noob with React and Gatsby :) ? Anyway, glad this video helped you, and hope your project goes well. :)
@elmassiraelmassira
Жыл бұрын
good teacher
@proemail3237
4 жыл бұрын
this is great channel i cannot even get my wordpress to recognize this tutorial probably too old this was preety detail video though
@zaharya
6 жыл бұрын
Cek, Hrvat radi tutorijale? Bravo covjece!
@WatchandLearnTutorials
6 жыл бұрын
Fala :)
@jbsness5375
6 жыл бұрын
Thanks Ivan, happy to learn from and with you ;-)
@joreymeljunejumayao8006
2 жыл бұрын
Hello, may I ask for example I have a custom gutenberg block and created a post will it still be displayed on gatsby front-end?
@davenegasn
3 жыл бұрын
So this guy doesn't know anything about gatsby, react or graphql and he is doing a tutorial, what a pro haha
@WatchandLearnTutorials
3 жыл бұрын
This was me just exploring Gatsby. Thats why I stated at the beginning of this video that I don't know anything about it, so that the people wouldn't take these videos as some source of truth. You are free not to watch.
@davenegasn
3 жыл бұрын
@@WatchandLearnTutorials you should definitely work on your reading and comprehension skills now, maybe make some tutorials after?
@WatchandLearnTutorials
3 жыл бұрын
@@davenegasn Read and comprehend this: your opinion does not matter to me. If you don't like the videos, don't watch them. I'm not the one to fight with strangers over the internet, so that is all I'm going to say about this. Have a nice day.
@davenegasn
3 жыл бұрын
@@WatchandLearnTutorials Yeah, fun part is that I actually liked the video and I even upvoted it (and I wasn't beign ironic). So I strongly advice you to work on your reading skills and maybe close the comment area if you are beign so sensitive about this. Have a nice day too.
@WatchandLearnTutorials
3 жыл бұрын
@@davenegasn Unfortunately it's very hard to detect the tone of the comment. It sounded mocking to me. If you were only joking, then I'm sorry for my previous comment. My bad.
@zhandosmukataev9833
5 жыл бұрын
Please, let me question. If I use Wordpress like headless cms. Then I should create 2 sites, right? First site is Wordpress, where I publish my articles. And second site wirh Gatsby for parsing content from first site. Sorry for bad English hello from Kazakhstan!
@nerosonic
4 жыл бұрын
i like these vids cause i love his heavy russian accent :D
@WatchandLearnTutorials
4 жыл бұрын
Glad you like my accent, however like I said many times in comments I'm not russian :D
@doncoder13
6 жыл бұрын
I get this error: GraphQLError: Cannot query field "allWordpressPage" on type "RootQuer yType". Did you mean "allSitePage"? Anyone knows why?
@kilinkis
6 жыл бұрын
yeah, I guess the video is already outdated
@wise_nut
6 жыл бұрын
Same here
@sterlingscott8358
5 жыл бұрын
You need to remove all the extra query code. It should just have the queries outlined in the video. Checkout his github example. The github example from gatsbyjs.org has more things than shown here as well.
@nlburnr1
6 жыл бұрын
Great tutorial man thank you very much
@AccessCode101
3 жыл бұрын
So once you're in production mode, and your two sites are up and running; you have your wordpress as back end and gatsby on your client, when you create a post, is it automatically on the client? We don't need to run gatsby every time we create a post, do we?
@WatchandLearnTutorials
3 жыл бұрын
This video is more than 3 years old, at that time you would have to rebuild Gatsby every time you add content to WordPress. Because Gatsby is a static site generator. Now in 2021, I'm not sure is there a way for this to happen automatically. If you plan to build a site that will change content often, then it's better to use something like Next.js, where you can leverage static pages and server side rendered pages. Checkout my series about Nextjs and Strapi. In it Strapi is the backend, but you can do same things with WordPress as a backend. kzitem.info/door/PLUBR53Dw-Ef_oTLzPB3G5CdLWnGOSsec3
@makymadi242
5 жыл бұрын
Cool!!! Thank you very much
@dsk90it
3 жыл бұрын
I like your terminal. May I know how to customize like yours ?
@WatchandLearnTutorials
3 жыл бұрын
Try following this tutorial: www.felixjung.io/posts/pretty-iterm2-with-a-modern-titlebar
@NoahNobody
6 жыл бұрын
Oh wow, I never new static site generators could interface with CMSs like this.
@WatchandLearnTutorials
6 жыл бұрын
Well most of them don't, that's why Gatsby is special :)
@jeremydavis2140
6 жыл бұрын
Very helpful. Thanks!
@intheband002
5 жыл бұрын
Does anyone here recommend using GatsbyJS/wordpress to run a small freelance business? I'm already experienced with JS/React and am looking for a streamlined workflow to build client sites.
@WatchandLearnTutorials
5 жыл бұрын
If you are experienced with React and looking for a static site generator, then yes. Go for it
@statequest
6 жыл бұрын
Thanks for that. This is awesome!
@Framelo-n4d
5 жыл бұрын
Cool...
@wikiwikishutup
5 жыл бұрын
Hi, thank you for this tutorial. I'm getting the error "error GraphQL Error Unknown field `wordpressPage` on type `Query`" in templates/page.js Has this happened to anybody else ? Thanks in advance
@WatchandLearnTutorials
5 жыл бұрын
Did you try downloading my code and see if that works for you?
@wikiwikishutup
5 жыл бұрын
@@WatchandLearnTutorials I copy/pasted your code instead of downloading. I may have missed something, so I'll try downloading it and let you know if it's working :)
@rayjenscode3501
4 жыл бұрын
I want to ask more sir. In real world scenario, we will be hosting our worpdress for CMS purpose in different server right? and for the gatsby we will host it in netlify is that correct? Also. It means our website has two front end? the first one is the gatsby and the 2nd is in wordpress? Am I right?
@WatchandLearnTutorials
4 жыл бұрын
No. I mean you CAN do it that way, but I would not recommend that. Because with Gatsby you would get just a static site that you can host anywhere, not just Netlify, any shared hosting will do because you are serving only static HTML pages. So your WordPress can actually be installed on your local machine. And the workflow would go something like: 1. Go to your local WP 2. Make some changes there 3. Build your Gatsby site from the new WP data 4. Push built site to your hosting And that is it. You have to realise that with Gatsby you are only getting a static site.
@rayjenscode3501
4 жыл бұрын
@@WatchandLearnTutorials Thank you. its been clear to me now :D
@oinn6216
6 жыл бұрын
Отличная серия уроков про связку Gatsby.js + WordPress . Большое спасибо. Ну и офигенный инглиш, ар ю фром Раша? :)
@WatchandLearnTutorials
6 жыл бұрын
I'm not russian and also don't speak russian. Try in english, or croatian :) .
@oinn6216
6 жыл бұрын
Ou, Croatia, sorry about that. I've been there. Hvala na videu ;) Because of your pronanciation I thought that you from Russia.
@WatchandLearnTutorials
6 жыл бұрын
Yeah, I get that a lot :)
@HIghtowerSever
4 жыл бұрын
@@oinn6216 ha... me too :)))
@shkico4513
6 жыл бұрын
After git cloning your repo in root of Wordpress install, doing npm install, setting base url to "localhost/wp-test" and running gatsby develop I get a few of these errors and I can't go further: localhost/wp-test/wp-json/wp/v2/settings⠈ source and transform nodesThe server response was "401 Unauthorized" Inner exception message : "Sorry, you are not allowed to do that." and later "Module build failed: BrowserslistError: Unknown browser query `dead` (While processing preset: "C:\\wamp64\\www\\wp-test\\gatsb y\ ode_modules\\babel-preset-env\\lib\\index.js")"
@WatchandLearnTutorials
6 жыл бұрын
I would say you have a Windows problem, and also permission problem, caused by windows. Maybe ask on Stack Overflow, I don't have a Windows machine, so I can't help you with that. Sorry.
@mshlmv
6 жыл бұрын
Hello, tell me more about the terminal. Very cool looks and works
@WatchandLearnTutorials
6 жыл бұрын
It's iTerm2 using Fish Shell. And of course I played a bit with the colors.
@pataco80
5 жыл бұрын
Hello, I just installed my wordpress and did not quite understand the place where you put your folder containing the Gatsby folder. You place it in the root location of the wordpress site? Sorry I am French and I have to follow the translation and it is not always obvious especially since I have not seen in which folder you have installed your wordpress. Can you enlighten me on this? Thank you.
@WatchandLearnTutorials
5 жыл бұрын
It actually doesn't matter. Your WP install doesn't even have to be on your computer. WP is used just to fill Gatsby with data. So you can put Gatsby folder inside WP root, or you can have it in it's own folder. You can do it however you like.
@elijahkleinsmith7278
5 жыл бұрын
Does anyone know how to resolve the issue of "TypeError: Cannot read property 'allWordpressPage' of undefined" - indeed this is an issue that exists even within the repo included in the description.
@elijahkleinsmith7278
5 жыл бұрын
Figured it out! My issue was that I was using "gatsby.local/" for the baseUrl - you need to be sure to read those comments in the Gatsby example because it says explicitly to *not* include the trailing slash. You also should not include the "" part.
@ThatGuyYonder
6 жыл бұрын
Hey man the videos are cool but can you fix the line spacing?
@WatchandLearnTutorials
6 жыл бұрын
Nope. I like it that way :) .... but I did make it a bit smaller in the next video or maybe one after that, I can't remember.
@ThatGuyYonder
6 жыл бұрын
It's quite distracting. You scroll back and forth all over the place and there is literally half as much information on the screen.
@matt6805
5 жыл бұрын
hah, I have to agree with That Guy Yonder. That is some horrible line spacing to code with. I don't know how you code that way. Collectively over time, you've probably wasted hundreds of extra hours just scrolling!
@skoyah
6 жыл бұрын
Hello. I can't wait for your next tutorial! Really love the job you are doing. Meanwhile I am trying to create a custom PHP blog CMS to create posts but I am having issues with one thing. I would like to use some WYSIWYG to create the posts. I also want to insert some images that then would be stored in a database. The problem is that when i want to fetch those images I would like to be able to style them dynamically using CSS classes. How could i achieve that? Would you be able to do a tutorial on that?
@WatchandLearnTutorials
6 жыл бұрын
What do you mean by "style them dynamically"? It's hard to help with that question if you are using custom CMS. I have no idea how it works so I don't know how to help you.
@skoyah
6 жыл бұрын
Watch and Learn Ok.maybe I didnt explained myself as i should. I am on the designing phase still. Im designing my blog on adobe xd. But i am already thinking on how i want to display the images on the blog article. What I would like to know is how can i create this kind of functionallity.
@WatchandLearnTutorials
6 жыл бұрын
What kind of functionality :) ? I'm still not sure about that.
@muhammadnurman9643
4 жыл бұрын
If i design gatsbyjs with elementor... can be?
@WatchandLearnTutorials
4 жыл бұрын
I don't think so. Only if Elementor has some sort of REST API.
@WatchandLearnTutorials
4 жыл бұрын
I don't think so. Only if Elementor has some sort of REST API.
@pirminbahr9178
5 жыл бұрын
Unfortunately i dont get this working... templates wont be used and i have no clue why. checked the baseURL and commented out all queries not meant to be regarding to the video , but still doesnt work
@huaweitrainingsafrica3742
4 жыл бұрын
I had to make some changes to the gatsby-plugin-wordpress config file...especially because my base url was localhost/project and for some reason gatsby was not resolving it...giving that error of allWordpressPages not found
@ArgishtyStepanyan
6 жыл бұрын
18:14 what code are you copying and pasting ???
@WatchandLearnTutorials
6 жыл бұрын
It's the code I prepared before recording the video. You have all the code on github. Check the description.
@bixgomez2839
5 жыл бұрын
@@WatchandLearnTutorials Oh thanks! I posted the very same question; I'll delete it!
@matthewp3709
5 жыл бұрын
DO you have any resources for the suggestion at 22:35, building a hook for rebuilding the gatsby app on wordpress update?
@WatchandLearnTutorials
5 жыл бұрын
No, sorry. Haven't been using Gatsby at all after this series and didn't have the time to study this specific subject.
@matthewp3709
5 жыл бұрын
@@WatchandLearnTutorials OK thank you. I will look into wordpress hooks
@applyabroad3018
4 жыл бұрын
I am having the following error, Please help!: ERROR (node:6648) Warning: a promise was rejected with a non-error: [object Array] ERROR Cannot read property 'allWordpressPage' of undefined TypeError: Cannot read property 'allWordpressPage' of undefined - gatsby-node.js:54 C:/Users/Md Sayem Iftekar/Downloads/gatsby/wpsite/gatsby-node.js:54:36 not finished createPages - 0.146s npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! gatsby-starter-default@1.0.0 develop: `gatsby develop` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the gatsby-starter-default@1.0.0 develop script. npm ERR! This is probably not a problem with npm. There is likely additional log ging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Md\_logs\2020-08-04T18_02_41_960Z-debug.log gatsby-node.js const _ = require(`lodash`); const Promise = require(`bluebird`); const path = require(`path`); const slash = require(`slash`); const pageQuery = ` { allWordpressPage { edges { node { id slug status template } } } } ` const postsQuery = ` { allWordpressPost { edges { node { id slug status template format } } } } ` exports.createPages = ({ graphql, boundActionCreators }) => { const { createPage } = boundActionCreators; return new Promise((resolve, reject) => { // Pages graphql(pageQuery) .then(result => { if (result.errors) { console.log(result.errors); reject(result.errors); } const pageTemplate = path.resolve("./src/templates/page.js"); _.each(result.data.allWordpressPage.edges, edge => { createPage({ path: `/${edge.node.slug}/`, component: slash(pageTemplate), context: { id: edge.node.id, }, }); }); }) .then(() => { graphql(postsQuery) .then(result => { if (result.errors) { console.log(result.errors); reject(result.errors); } const postTemplate = path.resolve("./src/templates/post.js"); _.each(result.data.allWordpressPost.edges, edge => { createPage({ path: `/post/${edge.node.slug}/`, component: slash(postTemplate), context: { id: edge.node.id, }, }); }); resolve(); }); }); // ==== END POSTS ==== }); };
@shamimalmamun141
3 жыл бұрын
Might be you don't have any post/page yet. Create some dummy page/post.
@user-ky5hd8yo2r
3 жыл бұрын
what is the VScode theme you are using ?
@WatchandLearnTutorials
3 жыл бұрын
Probably Material Theme. I only use that theme.
@user-ky5hd8yo2r
3 жыл бұрын
@@WatchandLearnTutorials how you change the text font in vscode
@WatchandLearnTutorials
3 жыл бұрын
Search in the settings.
@ilustrado7291
5 жыл бұрын
Brother, I need to know how you made your terminal look like that. IT'S EPIC! 5:17
@WatchandLearnTutorials
5 жыл бұрын
I think I followed this tutorial for that: www.felixjung.io/posts/pretty-iterm2-with-a-modern-titlebar/
@orangecity2469
2 жыл бұрын
hi I encountered err Invalid plugin options for "gatsby-source-wordpress":- "url" is required resolve: 'gatsby-source-wordpress', options:{ baseUrl: 'localhost/wordpress', protocol: 'http', hostingWPCOM: false, useACF: true, }
@WatchandLearnTutorials
2 жыл бұрын
This tutorial is more than 4 years old, so maybe they have changed some configuration options. You need to check the documentation.
@charlesmontojo3960
5 жыл бұрын
Awesome! Thanks for this! Where’s the best place to deploy wordpress as the backend only??
@WatchandLearnTutorials
5 жыл бұрын
Well I would say any average hosting provider would do the job. Because this is just WordPress, it runs pretty much on anything. You can of course use specialised WP hosting like WP engine, but they are too expensive IMO.
@charlesmontojo3960
5 жыл бұрын
Watch and Learn Cheers!!
@rayjenscode3501
4 жыл бұрын
nice... what about the contact form?
@WatchandLearnTutorials
4 жыл бұрын
Well if you are using Gatsby and creating a fully static site, your only option would be to make contact form and use a service like Mailgun to send those emails.
@flyffguru5911
4 жыл бұрын
@@WatchandLearnTutorials thank you :)
@rayjenscode3501
4 жыл бұрын
@@WatchandLearnTutorials thanks jessi
3 жыл бұрын
This is a headless cms?
@WatchandLearnTutorials
3 жыл бұрын
WordPress is not a headless CMS per se. But you can use it as one if you need to.
@First7Try
6 жыл бұрын
What about SEO?! I mean index and crawling pages/post in google... Thks for this video ))
@WatchandLearnTutorials
6 жыл бұрын
When you build your site you are left with only HTML and JS. So I don't think that should present a problem for SEO. Check out this issue about that: github.com/gatsbyjs/gatsby/issues/619
@First7Try
6 жыл бұрын
Thanks
@waywardmedia4491
6 жыл бұрын
You can just use { currentpage.date } you only need to use innerhtml for paragraph data. Point to note is if you get a 404 error it displays the url of all posts and pages in develop mode, good to see you trying it with wordpress as I could not manage to get it working when i tried so i will revisit your method, i think tutorials with the acf would prove beneficial to people as that will harness more power here is a site built in gatsby and markdown www.insowerbybridge.co.uk
@WatchandLearnTutorials
6 жыл бұрын
Oh, ok I get it now. So dangerouslySetInnerHTML is only used when you are receiving some sort of HTML formated content? I will definetley make tutorial using ACF for sure. Also thanks for the retweet :)
@denniszenanywhere
5 жыл бұрын
Minutes into the video but I am a little confused. I thought gatsby was supposed to be a platform already that can work without using WordPress. Why is it combined with WordPress here? I know you said you are using wordpress for server but why did you choose WordPress?
@WatchandLearnTutorials
5 жыл бұрын
Yes, Gatsby.js can be used without WP. And also can be used with many other systems like WP. I choose it because, me, and most of the people that visit this channel are familiar with WP.
@denniszenanywhere
5 жыл бұрын
@@WatchandLearnTutorials Good to know. Thanks for your tutorial. I have been using Wordpress for many years (never really liked it) but would also like to try something different other than Wordpress. I thought of contentful also but that is too expensive to even consider. Btw, do you think a Yelp-type website would be good to do using Gatsby and Wordpress?
@WatchandLearnTutorials
5 жыл бұрын
@@denniszenanywhere I would suggest you take a look at the October CMS videos on my channel. I also don't like WP very much, and October is just great from developer standpoint. And it is also much easier to create an APIs with it, so that you can connect to something like Vue. Lot of videos about that also on my channel. Now, about Yelp type of site, I would say absolutley not, because Gatsby.js is essentially just a static site generator, so what you end up with is just a static site, and for Yelp type functionality you really need access to dynamic features.
@sergi3629
5 жыл бұрын
At 18:10, where is that code coming from?
@WatchandLearnTutorials
5 жыл бұрын
I don't remember, it was almost a year ago.
@qbek_san
3 жыл бұрын
You didn't even talk about WP plugins I need to install. You just started it pre-installed without explanation. Thumb down.
@WatchandLearnTutorials
3 жыл бұрын
I literally say in the video I don't use ANY plugins and that it's just a vanilla installation of WP without any plugins. Maybe you should pay better attention.
@TesmonM
6 жыл бұрын
Too complicated... Only for programmers. Thank You anyway )
@ivan747
6 жыл бұрын
Yes, it is for programmers. Most of the videos on my channel are made for coders. Thanks for visiting :)
Пікірлер: 134