Sanity & Astro Visual Editor Tutorial - Build Click To Edit Websites For Your Clients
Want the latest Sanity / Astro tips + more straight to your inbox each week: 👉 https://islandwebdesign.net/blog/?utm...
Want a website guaranteed to get you more customers: 👉 https://islandwebdesign.net/?utm_sour...
Want a social media campaign guaranteed to get you more customers: 👉 https://islandwebdesign.net/social-me...
If you're a developer building websites for your clients, especially Astro websites using Sanity as the content management system then you will know as well as I do that the only real way to learn how to use this stuff is to dive deep in to article rabbit holes, reading and reading, hoping you find what you need.
At Island Web Design we build over 10 websites a month for our clients using Sanity and Astro and we keep up to date with all the latest happenings in the Astro and Sanity eco system and to save you the time and effort of having to dive deep into articles, I have put together this tutorial to show you exactly how to implement visual editing in your Astro Sanity website.
If you want to see how we fully set up these Astro Sanity projects, and how we build out the site to the point you see us starting at here then you can check that video out on our channel, I show you how we set up the Sanity Studio, how we set up the Astro project and how we render all the content in to our front end: • How I use Sanity and Astro to Build C...
If you want more free value like this from the owner of a real web design and social media marketing agency then make you you subscribe for more and sign up to our free newsletter on our website, I am going to be going behind the scenes showing you everything that goes into growing Island Web Design and everything that goes in to our projects 😁
Timestamps:
0:00 - 0:38 Introduction
0:38 - 1:00 My challenge to you
1:00 - 1:45 Starting our Sanity Studio and Astro server
1:45 - 2:01 The problem with Sanity
2:01 - 2:12 Sanity studio set up structure
2:12 - 2:32 ClickUp Standard Operating Procedures
2:32 - 3:18 Adding Server Side Rendering With Netlify Adapter
3:18 - 3:42 Adding React To Astro
3:42 - 5:35 Adding Presentation Tool in your Sanity Config file
5:35 - 5:57 Adding preview query string to our presentation tool url
5:57 - 6:20 Testing presentation tool
6:20 - 7:29 Creating our load query loader file
7:29 - 8:25 Explaining how load query works
8:25 - 9:12 getCleanClassName javascript file
9:12 - 9:42 Getting your Sanity Api key
9:42 - 10:18 Creating your .env file
10:18 - 11:08 Writing the code to toggle visual editor enabled on or off
11:08 - 12:00 Change all our queries to use our load query function
12:00 - 12:36 Add stega to Astro config
12:36 - 13:57 Add visual editing component to your Layout
13:57 - 18:07 Installing missing packages and adding sanity integration properly
18:07 - 18:35 Why the sanity astro package install’s everything wrong, why noone can follow the docs (fixing an error)
18:35 - 18:44 Showing you the visual editing working
18:44 - 19:24 Using our getCleanClassName function to fix our styles
19:24 - 20:25 Testing the visual editor
20:25 - 20:39 How to turn off edit mode and use buttons and links
20:39 - 21:15 Making other queries enabled
21:15 - 22:42 Adding function to append preview string to all links to navigate between pages
22:42 - 25:48 Fixing another getCleanClassName issue
25:48 - 26:00 Summarising what I have covered
26:00 - 26:45 Changing all local host urls to production urls
26:45 - 28:11 Adding your env variables to netlify
28:11 - 28:42 Deploying on netlify
28:42 - 28:45 Testing live links
28:45 - 28:58 Deploy your sanity studio
28:58 - 29:34 Testing live site and presentation tool
29:34 - 30:50 Editing content live
30:50 - 31:23 Use cdn on or off
31:23 - 31:57 Go and sign up for our free newsletter
📦 Packages Included In This Tutorial:
✅ Official Sanity Astro Integration: https://www.sanity.io/plugins/sanity-...
✅ Astro Netlify Adapter: https://docs.astro.build/en/guides/in...
✅ Astro React Adapter: https://docs.astro.build/en/guides/in...
Want the latest Sanity / Astro tips + more straight to your inbox each week: 👉 https://islandwebdesign.net/blog/?utm...
Want a website guaranteed to get you more customers: 👉 https://islandwebdesign.net/?utm_sour...
Want a social media campaign guaranteed to get you more customers: 👉 https://islandwebdesign.net/social-me...
#codingtutorial
