I think this is the most succinct video explaining how to hook up Astro to a CMS. Well done. If you're looking for more video suggestions, I'd love to see more 15 minute videos hooking Astro up to other headless CMS's. Your process here was very clear and to the point. Great job. 👏💯
I really love the combo. I’m hopeful the Content Collections in Astro expand to allow for third-party data soon, too, because that would really make this a killer stack even in larger teams
Hi @learnwithjason, I am curious is it automatically update the content if the user edit on the wordpress admin? Or we need to build the site every changes in wordpress content?
This is an excellent intro to setting up a basic headless Wordpress using Astro. I'd like to add more interactivity, such as commenting and rating posts, maybe even some Admin capabilities. That would be really handy in a multisite network where you don't want site admins accessing wordpress dashboard directly. This intro is ideal, however, for putting the content out there without revealing the WP backend. Very well explained.
Hi Jason! I've been using Astro for my clients, and I love it. I've never used WordPress, but I've been thinking about learning how to use it so that I can give my clients the ability to modify the content. I'm particularly interested in knowing how I can allow them to add new elements to the layout, such as images, instead of just updating the existing content. I have a friend who has been working with WordPress for a long time, and he suggested using the WordPress Site Editor and the Gutenberg editor (or something like that...) to create custom blocks with React. This way, I can continue developing the website as I'm used to, while also giving the client the opportunity to modify the layout. I hope I'm explaining myself clearly. Thank you!
I didn't, sorry. on Netlify there's a plugin for it: github.com/lukethacoder/wp-webhook-netlify-deploy I saw a couple for GitHub Actions but I haven't tried them so can't vouch for their quality
Most headless cms integration examples are related to blogs. Blogs are good candidates for a headless solution, but what about normal web pages? WordPess is usually used with page builders like Elementor, which enable non -devs people to design websites. Under such scenario, how can Astro help us?
if the headless CMS provides details about the layout, Astro can be set up to build pages based on that data. I haven’t tried Elementor, but I built a small proof of concept using Gutenberg. so it’s possible!
yes, if you wanted full separation. but you could use free hosting like Netlify or Cloudflare for Astro for quite a while because of how it works before you hit any usage charges or needed to upgrade
everything looks nice and clean with Astro, until we start talking about authentication. i'm trying to implement Supabase Auth with Astro and can't find any information on the internet on how to do it.
it’s hard to say without seeing the code, but it looks like one of the queries is getting an error that returns HTML instead of JSON, and that query result is being used for this call. you can add a check to make sure the response has a status of 200 to catch this and see what the error message is
I think it depends on who your customer is. I've spent a lot of hours trying to make newer headless CMS tools do WordPress things because the user was familiar with WP. Especially for folks who don't ever want to think about code, WP is still reigning champ for UX in a lot of ways.
@@learnwithjason Makes sense, I think the name recognition and the UI of the dashboard are the selling points. It would be cool to see a video from you about deploying Wordpress, either via a tool GUI CI tool like buddy, or via github actions.
Although, I agree with you for some use cases. I think when the customer is WP driven and wants to keep their content marketing team happy with what they are already using, but want to stop the issues with WP getting hacked, this is a fantastic solution.
Yeah all the marketing companies that use WP with DIvi will start using headless WP with an Astro front-end. I know companies like that who just do WP. They sometimes hire me because the LinkedIn social icon isn't available by default in the Divi settings. So I add a line of css that turns the RSS icon a LinkedIn one.
I'm not sure if it's just from the edit, but you said "I prefer Astro because I only want to ship HTML and CSS when it's necessary". Was that meant to be "ship HTML and CSS, and only JS when it's necessary" or something like that? All that aside, great video. I love Astro!
don't run that insecure WordPress software on the public internet, just run it on your personal computer that has all your data instead! this is part joke, part warning because WP could have remote code execution issues as well, so it could be checking for updates or something and hackers could intercept that and now that code is running on your personal PC, which could be mitigated by running it in virtual box, docker, or on a hosting somewhere where you can protect it with something like private VPN
fair. I think there's a spectrum here - for most folks, cutting off automated attack vectors is enough (it's easier to move on and target less protected sites). that definitely changes as a site gains prominence and/or value (e.g. data) it's an exercise for each site owner to make the call on how far they need to go with security for sure. I think the ideal in a "high value" site setup would be to run the WP instance on the company intranet behind a firewall
I think this is the most succinct video explaining how to hook up Astro to a CMS. Well done.
If you're looking for more video suggestions, I'd love to see more 15 minute videos hooking Astro up to other headless CMS's. Your process here was very clear and to the point. Great job. 👏💯
thanks! that's a great idea - I do love Astro and could definitely put together some videos on how to plug other CMS options in
thanks for watching!
Strapi next?
Astro is great
I love that you used Astro for this example. Thanks Netlify for supporting our fav Jamstack educator.
I do love Astro! and yes, extremely grateful for companies like Netlify that make creating videos like this possible for me 💜
Jason that's an AMAZING video. Honestly, I am going to do it this week-end. Thank you so much !
thanks so much for watching! let me know how it goes!
I have to say: this was one of the best tutorials i’ve ever seen. Very straightforward but also very informative.
I've been using it this way so much lately. Customers like WordPress as backend and I can design my frontend with Astro as I want. Great combination
I really love the combo. I’m hopeful the Content Collections in Astro expand to allow for third-party data soon, too, because that would really make this a killer stack even in larger teams
Hi @learnwithjason, I am curious is it automatically update the content if the user edit on the wordpress admin? Or we need to build the site every changes in wordpress content?
This is an excellent intro to setting up a basic headless Wordpress using Astro. I'd like to add more interactivity, such as commenting and rating posts, maybe even some Admin capabilities. That would be really handy in a multisite network where you don't want site admins accessing wordpress dashboard directly. This intro is ideal, however, for putting the content out there without revealing the WP backend. Very well explained.
Hi Jason! I've been using Astro for my clients, and I love it. I've never used WordPress, but I've been thinking about learning how to use it so that I can give my clients the ability to modify the content. I'm particularly interested in knowing how I can allow them to add new elements to the layout, such as images, instead of just updating the existing content. I have a friend who has been working with WordPress for a long time, and he suggested using the WordPress Site Editor and the Gutenberg editor (or something like that...) to create custom blocks with React. This way, I can continue developing the website as I'm used to, while also giving the client the opportunity to modify the layout. I hope I'm explaining myself clearly. Thank you!
Amazing guide. Did you end up making the github automation webhook/action when we have new changes video?
I didn't, sorry. on Netlify there's a plugin for it: github.com/lukethacoder/wp-webhook-netlify-deploy
I saw a couple for GitHub Actions but I haven't tried them so can't vouch for their quality
Love the vibe of this content!
thank you!
This is a great starting point. Can you suggest a full course on this subject?
all post not fetching. can you tell me what i have to do to fetch all wordpress blog post. please, answer
Love this!
Hey there, great video! Really useful! Is there a way to deploy this on a shared host or is it necessary to use a VPS? For instance, with Hostinger
I haven’t tried, so I’m not 100% sure, but it *should* work on shared hosting just fine
Would this setup also be useful for building a headless cms with Wordpress back end ?
definitely!
Hi Jason what amazing content, just I needed. Thanks for sharing ❤❤
Glad you enjoyed it!
Great vid man! Loved the content. Which browser are you using?
thank you! I’m using Arc arc.net
@@learnwithjason thanks dude! 🤙
Most headless cms integration examples are related to blogs. Blogs are good candidates for a headless solution, but what about normal web pages? WordPess is usually used with page builders like Elementor, which enable non -devs people to design websites.
Under such scenario, how can Astro help us?
if the headless CMS provides details about the layout, Astro can be set up to build pages based on that data. I haven’t tried Elementor, but I built a small proof of concept using Gutenberg. so it’s possible!
Can you also please make a video tutorials how to make Astro + GraphQL work for rendering the Gutenberg Blocks?
Would you need to pay for 2 hosting accounts if you did it this way? (Seems like you'd need one for Astro and another for Wordpress)
yes, if you wanted full separation. but you could use free hosting like Netlify or Cloudflare for Astro for quite a while because of how it works before you hit any usage charges or needed to upgrade
Great video Jason. Thank you. Does this work for woo commerce as well?
it looks like there's a way to get it running, yep! github.com/wp-graphql/wp-graphql-woocommerce
@@learnwithjason That's great. Thank you
what's the name of the melody starting at 03:03 ? great video btw, thank you
I can't remember the name of the track, but I got it from Epidemic Sound
everything looks nice and clean with Astro, until we start talking about authentication.
i'm trying to implement Supabase Auth with Astro and can't find any information on the internet on how to do it.
Hi Jason! Great video. I was trying to compose the query on GraphQL. But it returns: "{
"errors": {
"message": "Unexpected token '
it’s hard to say without seeing the code, but it looks like one of the queries is getting an error that returns HTML instead of JSON, and that query result is being used for this call. you can add a check to make sure the response has a status of 200 to catch this and see what the error message is
I haven't yet made a decoupled Wordpress site but I feel like it may be better to just use a headless cms that is made specifically to be headless.
I think it depends on who your customer is. I've spent a lot of hours trying to make newer headless CMS tools do WordPress things because the user was familiar with WP. Especially for folks who don't ever want to think about code, WP is still reigning champ for UX in a lot of ways.
@@learnwithjason Makes sense, I think the name recognition and the UI of the dashboard are the selling points. It would be cool to see a video from you about deploying Wordpress, either via a tool GUI CI tool like buddy, or via github actions.
good idea! I'll add it to my list. thanks!
Although, I agree with you for some use cases. I think when the customer is WP driven and wants to keep their content marketing team happy with what they are already using, but want to stop the issues with WP getting hacked, this is a fantastic solution.
Wait, are you the same Jason that teach at frontendmasters? That's so cool
I am! hi!
Very good video!
thank you!
Wow thanks
so you made a headless setup with wordpress as ur backend.
yep! it keeps the WP Admin off the main site, which cuts off a huge number of automated and manual attack vectors
Yeah all the marketing companies that use WP with DIvi will start using headless WP with an Astro front-end. I know companies like that who just do WP. They sometimes hire me because the LinkedIn social icon isn't available by default in the Divi settings. So I add a line of css that turns the RSS icon a LinkedIn one.
Great video
I'm not sure if it's just from the edit, but you said "I prefer Astro because I only want to ship HTML and CSS when it's necessary".
Was that meant to be "ship HTML and CSS, and only JS when it's necessary" or something like that?
All that aside, great video. I love Astro!
Instead extracting just the login page you extracted the whole site instead and left the login page? 😆
don't run that insecure WordPress software on the public internet, just run it on your personal computer that has all your data instead!
this is part joke, part warning because WP could have remote code execution issues as well, so it could be checking for updates or something and hackers could intercept that and now that code is running on your personal PC, which could be mitigated by running it in virtual box, docker, or on a hosting somewhere where you can protect it with something like private VPN
fair. I think there's a spectrum here - for most folks, cutting off automated attack vectors is enough (it's easier to move on and target less protected sites). that definitely changes as a site gains prominence and/or value (e.g. data)
it's an exercise for each site owner to make the call on how far they need to go with security for sure. I think the ideal in a "high value" site setup would be to run the WP instance on the company intranet behind a firewall
LocalWP uses docker right?
Too much work.