How I Create Page Builders Using Sanity & Astro For My Web Design Clients & Auto Trigger Deploys 🚀
Exactly how we implement Sanity as a custom page builder for our web design clients using Astro. In the last video, I showed you exactly how we use Sanity and Astro to build custom content management systems for our web design clients. This allows them to update and make changes to their website by themselves, super easily, no matter their tech skill level. In this video, I want to dive deeper and show you how we turn Sanity into an actual page builder that our clients can use to build out their websites themselves without ever having to learn a line of code.
This system has proved super popular with our web design clients, allowing us to grow Island Web Design to over 80 clients in a little over a year, gaining 43 5-star reviews across Google and Facebook. Here, I will show you exactly how to do all the following things with Sanity and Astro:
⭐️ Build out page schemas in Sanity
⭐️ Populate Page Schemas in Sanity
⭐️ Make pages re-orderable using Sanity's Orderable Document List Plugin
⭐️ Use Astro's getStaticPaths function to render your content on the frontend as a new page
⭐️ How to auto-deploy your changes to Netlify with webhooks rather than having to do it manually
This is extremely valuable content for anyone who builds websites for clients or has a web design agency and in future videos not only am I going to be showing you way more elaborate things that we do with Sanity to make it fully customisable for our clients but I am also going to be going behind the scenes in my web design agency showing you exactly how we are able to take on so many clients, and how we can actually deliver on the promises we make them which has allowed us to build up over 43 5 star reviews across Google and Facebook.
So if you want more web design and web development tips and tricks from the owner of a real web design agency then make sure you subscribe for more and if you want to see all the amazing work we are doing for our web design clients then check out our website in the link below.
Timestamps:
0:00 - Intro
0:25 - What We Are Building & Recap of Last Time
1:09 - Sanity Setup
2:00 - Building Sanity Schemas
3:30 - How the Slug Field Works
6:00 - Portable Text Object
6:30 - Sanity List Previews
7:10 - Using Sanity Reorderable Document List Plugin to Make Pages Reorderable
8:15 - Sanity Desk Structure API
9:55 - How to Generate a Slug
10:10 - Rendering the Page Using Astro's getStaticPaths Function and Dynamic Routing
11:15 - The getSanity Function
11:50 - How GROQ Queries Work
13:00 - Mapping Over Props and Params in the getStaticPaths Function
15:30 - urlForImage Helper Function
15:45 - Building the Page with Astro
19:45 - Showing the Finished Built Page
19:50 - Demo of My Actual Sanity Studio & How I Can Build Entire Reorderable Pages with It (Next Video)
20:35 - How to Use Webhooks to Automatically Deploy to Netlify Without Manual Intervention
22:00 - Demo of How the Webhook Works
22:20 - Everything I Do with My Sanity, Like Adding My Videos
22:35 - Adding HubSpot Forms with Custom Code
22:53 - Sanity Lighthouse Plugin
23:08 - Outro & What's Coming Up Next Time
⭐️ Previous video on Sanity & Astro: • How I use Sanity and Astro to Build C...
⭐️ Sanity Sign Up Page: https://www.sanity.io/
⭐️ Sanity Orderable Document Plugin: https://www.sanity.io/plugins/orderab...
⭐️ Sanity Desk Structure Api: https://www.sanity.io/docs/structure-...
⭐️ Astro Docs: https://docs.astro.build/en/getting-s...
⭐️ Island Web Design Website: https://islandwebdesign.net/
⭐️ Follow me on Instagram: / jordanislandwebdesign
#webdevelopmenttutorials #webdevelopmentagency #webdesigntutorial #contentmanagement #sanity #astrotips #webdesigntips #codingtips #codingtutorial #astro #webdevtips #guernsey
