Make a Headless WordPress Site with Astro

Подписаться 500

Просмотров 6 тыс.

50% 1

How and why to use WordPress as a "Headless CMS"
02:41 Getting started with Astro
05:31 Running a WordPress site locally
06:11 The WordPress REST API
07:10 GraphQL for WordPress
08:41 Fetching our WordPress data from Astro
13:30 Rendering our WordPress data in our Astro frontend
16:40 Lack of type safety
19:31 The Codegen introspection tool
22:00 Getting all the types for our WordPress data
25:09 WordPress Application Passwords
26:14 Writing authenticated requests
Blog post with written tutorial
baldmanbrands....
GitHub Repo with completed tutorial
github.com/Joe...
GitHub Repo with stylized version
github.com/Joe...
Live demo of completed tutorial
headless-wordp...
Live demo of stylized version
astro-wordpres...
Local WordPress
localwp.com/
Codegen installation wizard
the-guild.dev/...
Codegen introspection tool
the-guild.dev/...
Music
"That's Not Vaporwave"
Stevia Sphere
steviasphere.b...
My Other Stuff
baldmanjapan.com/
baldmanbrands....
/ baldman.japan

Опубликовано:

15 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 29

@londelidess 7 месяцев назад

This is what I really wanted to need! After I watched video, I saw your channel name. Then I became a big fan. From Japanese man in US

@joetrubenstein 7 месяцев назад

Thank you for stopping by!

@rainlabs 13 дней назад

Thank you for this tutorial!

@christianrhodes4724 Год назад

It's a good day when the bald man himself posts a new video 😁 良いビデオです！

@joetrubenstein Год назад

褒められると嬉しいです！

@jamesdim 10 месяцев назад

That's exactly what I was looking for. Please more astro content!

@joetrubenstein 10 месяцев назад

next up is headless Ghost 👻

@EduardUngureanu Год назад

Very usefull. Would love a video showing how to deploy the Astro on a real server, what we need to do in order to make sure that once we publish a new post, that post will picked up by Astro (on live server - not locally) and display everything as expected. In addition maybe a full video series, on how to build a website with Astro, that take WordPress posts, like single posts pages, pages, etc - what a regular WordPress website can do but doing it with Astro.

@joetrubenstein Год назад

Definitely! So far I like using Netlify the best for deployment - I think showing how could make a cool follow up video.

@tsots2501 Месяц назад

thank you for the video. It's extremely helpful. Cheers.

@galexbh 11 месяцев назад

Excellent tutorial, I loved it.

@gastoncodes8824 8 месяцев назад

Awesome tutorial, really help me out! thanks man!

@joetrubenstein 8 месяцев назад

Happy to be of service!

@kellingtoncrivelaro3929 Год назад

It's amazing! Keep the good work!

@DarylMalibiran 8 месяцев назад

Love this bro. Can you please choose dark theme for your vscode next time? My eyes hurt 😞

@joetrubenstein 8 месяцев назад

It’s funny I used to really love dark mode, but I have very poor eyesight and some astigmatism issues - so I can’t read dark themes at all anymore sadly. I miss my Dracula theme!

@OneBrighDay Год назад

Great video, I have never been a fan of WordPress but this type of set up has peaked my interest. Hopefully someone will make like a full course on this including deployment. I can’t help but wonder about the set up, Astro seems to be usually hosted on Vercel but WordPress is not. It seems impractical to pay for two separate hosting plans.

@joetrubenstein Год назад

Very good point - I currently host WordPress on AWS which seems to be the best bang for my buck. For Astro - I like Netlify slightly better than Vercel, but I've never had to pay for either of them. Their free tiers are pretty good!

@OneBrighDay Год назад

@@joetrubenstein this is very interesting I really have to start playing with this type of setup. I’d be curious to what this would be like in a real world situation. For example I’m converting a restaurant WordPress site to an Astro site. Either way the future of web development is exciting.

@ShihminPlace 8 месяцев назад

謝謝你的教學, 對我很有幫助

@joetrubenstein 8 месяцев назад

謝謝!

@Codementation 7 месяцев назад

Good video sir, but Basic Auth is just a Base64 encoded string. Instead of hardcoding it you could've made a simple function to convert it using env vars: ```const credentialsEncoded = base64.encode(credentials);```