Uploaded August 2026 | Updated September 2026, 2 weeks ago
In this tutorial, you will learn how to build your first website using Astro, a free web framework built for content heavy sites like blogs, portfolios, and small business pages. I'll walk through installing Astro, exploring the project structure, and even using AI to rebuild a real one page website in about five minutes.
🧠 What You Will Learn
- What Astro is: a framework built for content driven, static websites
- Prerequisites: checking your Node.js and npm versions
- Project setup: scaffolding a new Astro project with one command
- Starter templates: minimal vs basic, and how to pick one
- File structure: what goes in the public folder vs the src folder
- Adding pages: creating a new .astro page from scratch
- Local dev server: starting, stopping, and restarting with npm run dev
- Using AI: rebuilding a real site from assets and a simple prompt
🔗 Links Mentioned:
⚡ Astro: https://astro.build
🟢 Node.js: nodejs.org
📺 How to Deploy Your Astro Website to Cloudflare Pages: [link coming soon]
Tools I Use:
🌐 Mike Murphy AI: mikemurphy.ai
🚀 Hostinger VPS: go.mikemurphy.ai/vps
🎙️ ElevenLabs: go.mikemurphy.ai/elevenlabs
⏱️ Timestamps:
00:00 Intro: About The Tutorial
00:15 What is Astro?
01:15 Astro Website
01:36 Prerequisites
02:21 Is Node.js Installed?
03:34 Create New Project Folder
03:42 Open in VS Code
03:54 Open VS Code Terminal
04:26 Astro Install Command
04:48 Astro Install Wizard
05:38 Murphy Concierge Overview
05:56 Astro Install Wizard
07:53 Start Local Dev Server
08:47 Astro Website is Live!
09:25 Astro Overview
10:42 Add Astro Pages
11:56 Astro README
12:29 Build Murphy Concierge
13:00 Codex Prompt
13:57 Murphy Concierge Preview
15:08 Restart Local Dev Server
15:36 Recap: How To Build Astro Site
17:49 Astro Widget
⭐ Connect with Me
➜ Website: mikemurphy.ai
➜ YouTube: youtube.com/mikemurphyco
➜ Newsletter: mikemurphy.ai/newsletter
➜ X: https://x.com/mikemurphyai
⚖️ Disclosure Some links may be affiliate links, which means I may earn a commission if you purchase through them at no extra cost to you. I only share tools and services I use, trust, or think are useful for creators, small businesses, and tutorial makers.
#astro #astrojs #webdevelopment #nodejs #vscode #staticsite #webframework #beginnercoding #webdesign #frontenddev #ai #codingtutorial #tutorial #mikemurphyai
In this tutorial, you will learn how to build your first website using Astro, a free web framework built for content heavy sites like blogs, portfolios, and small business pages. I'll walk through installing Astro, exploring the project structure, and even using AI to rebuild a real one page website in about five minutes.
🧠 What You Will Learn
- What Astro is: a framework built for content driven, static websites
- Prerequisites: checking your Node.js and npm versions
- Project setup: scaffolding a new Astro project with one command
- Starter templates: minimal vs basic, and how to pick one
- File structure: what goes in the public folder vs the src folder
- Adding pages: creating a new .astro page from scratch
- Local dev server: starting, stopping, and restarting with npm run dev
- Using AI: rebuilding a real site from assets and a simple prompt
🔗 Links Mentioned:
⚡ Astro: https://astro.build
🟢 Node.js: nodejs.org
📺 How to Deploy Your Astro Website to Cloudflare Pages: [link coming soon]
Tools I Use:
🌐 Mike Murphy AI: mikemurphy.ai
🚀 Hostinger VPS: go.mikemurphy.ai/vps
🎙️ ElevenLabs: go.mikemurphy.ai/elevenlabs
⏱️ Timestamps:
00:00 Intro: About The Tutorial
00:15 What is Astro?
01:15 Astro Website
01:36 Prerequisites
02:21 Is Node.js Installed?
03:34 Create New Project Folder
03:42 Open in VS Code
03:54 Open VS Code Terminal
04:26 Astro Install Command
04:48 Astro Install Wizard
05:38 Murphy Concierge Overview
05:56 Astro Install Wizard
07:53 Start Local Dev Server
08:47 Astro Website is Live!
09:25 Astro Overview
10:42 Add Astro Pages
11:56 Astro README
12:29 Build Murphy Concierge
13:00 Codex Prompt
13:57 Murphy Concierge Preview
15:08 Restart Local Dev Server
15:36 Recap: How To Build Astro Site
17:49 Astro Widget
⭐ Connect with Me
➜ Website: mikemurphy.ai
➜ YouTube: youtube.com/mikemurphyco
➜ Newsletter: mikemurphy.ai/newsletter
➜ X: https://x.com/mikemurphyai
⚖️ Disclosure Some links may be affiliate links, which means I may earn a commission if you purchase through them at no extra cost to you. I only share tools and services I use, trust, or think are useful for creators, small businesses, and tutorial makers.
#astro #astrojs #webdevelopment #nodejs #vscode #staticsite #webframework #beginnercoding #webdesign #frontenddev #ai #codingtutorial #tutorial #mikemurphyai
