Exactly how we implement custom content management systems using Sanity Studio & Astro for our Web Design Clients at Island Web Design. In my last video I did a deep dive into a real client web design project and walked you through my thought process and how I go about putting these websites together at Island Web Design.
People ask me this all the time, and the comments on the last video were the same so in the first of this video series about how we use Sanity as a Content Management System at Island Web Design I am going to show you how we set up the initial Sanity project, show you some of the default schemas that we use for every project and I am even going to recreate the hero section of one of my clients websites to show you exactly how you build the content in Sanity and how you fetch it into your front end in Astro, although all of the exact same methods apply in vanillaJs.
All of the tutorials online for Astro are based around React or NextJs, trying to find information in video form on how to use Sanity in any other way is a nightmare and sends you down massive rabbit holes of blog posts and articles, trust me thats how I learnt all this.
In future videos in this series I will show you exactly how we do the more elaborate stuff with Sanity including full page builders, form builders, blogs, settings for management of seo and meta data and deploying the build straight from your Sanity Studio. We even build a custom dashboard into this studio for our clients to manage their Studio (If they have multiple team members working on it). We do so much with this and its a really interesting deep dive so if you can actually pay attention for 35 minutes then you should, if you can't well I don't know what to tell you, you wouldn't be able to build this anyway.
Timestamps:
2:30 - Setting up the lib folder for Sanity API fetch function
4:17 - Creating a Sanity project
6:51 - Installing packages
11:56 - Sanity Desk Structure Introduction
14:22 - Setting up pages in Sanity
21:29 - Front End Development
25:20 - Auto-fill stops working - Tips to fix
26:50 - Building the header in Astro
27:30 - Header styles
28:40 - Fetching content from Sanity and structuring a GROQ query
29:40 - Using switch statements to render sections conditionally
32:20 - Styling content
34:50 - Logical CSS properties and why they are better
35:05 - Finished result
⭐️ GitHub Repo: github.com/mauger1998/paragon...
⭐️ Sanity Sign Up Page: www.sanity.io/
⭐️ Sanity Desk Structure Api: www.sanity.io/docs/structure-...
⭐️ Astro Docs: docs.astro.build/en/getting-s...
⭐️ Island Web Design Website: islandwebdesign.net/
⭐️ Follow me on Instagram: / jordanislandwebdesign
#webdevelopmenttutorial #webdesigntutorial #webdesignagency #contentmanagement #webdesigntips #webdevtips #codingtips #codingtutorial #astro
16 мар 2024
