Build and Deploy a Responsive Blog Website with Astro and Sanity

Опубликовано: 22 Август 2026
на канале: Dev Lawrence

6,296

196

🛠️ Want a Ready-Made Portfolio?
🚀 Check out PortfolioKit https://portfoliokit.netlify.app/

Whatsup guys, In today’s video, You are going to learn how to build a blog website using Astro for the frontend and Sanity as our CMS and also deploying it live as well.

Here is a part 2 on how to add comments
   • How to add Comments to your Blog Website w...

Source code
https://github.com/dev-lawrence/astro...

Astro Docs:
https://docs.astro.build/en/getting-s...

Sanity Docs
https://www.sanity.io/

Timestamps:
0:00 - Intro
7:00 - Astro overview
9:23 - Sanity overview
11:59 - Installing astro
16:47 - Installing the Astro Extension
17:33 - Adding tailwind css
19:25 - Installing astro tailwind prettier
24:34 - Fonts and Icons
26:11 - Hiding Astro dev tools
27:00 - Creating the Layout
28:39 - Making the title and description dynamic
31:13 - Using slot
33:18 - Adding React
33:59 - Header section
44:17 - Nav component
1:06:48 - Hero section
1:14:51 - Installing Sanity
1:22:01 - Embedding Sanity with Astro
1:30:47 - Creating the post schema
1:48:01 - Quering with groq
1:52:32 - Featured section
2:46:18 - Post details page
3:20:10 - Category section
3:44:43 - Creating the pages
4:07:53 - Recent post section
4:12:53 - Newsletter section
4:23:40 - Footer section
4:26:04 - Continue with the Newsletter section
4:46:46 - Creating the Endpoint
4:52:15 - Sending email to CMS
5:20:46 - Creating 404 page
5:27:12 - Adding the View Transitions Api
5:28:54 - Creating the Endpoint
5:29:01 - Deploy to netlify
5:41:33 - Outro

---
🌎 Follow Me Online
🐦 Twitter:   / lawrence_sticks
💼 LinkedIn:   / lawrence-amrasakpare
📸 Instagram:   / dev_lawrence1

---
🌐 Explore More
📁 Github: https://github.com/dev-lawrence
🌎 Website: http://devlawrence.netlify.app/
📰 Blog: https://dev.to/devlawrence

---
💼 Business & Coaching Inquiries
📩 Want 1-on-1 help with Frontend Development? Book a session: https://buymeacoffee.com/devlawrence/...
📧 E-mail: [email protected]

#Astro #TailwindCSS #WebDevelopment #FrontendMentor #LandingPage #netlify #howto #deployment #html #css #react #sanity