Video Companion

How to Spin Up an Astro Site Locally in VS Code for Non-Coders

YouTube Description

+

🚀 How to Spin Up an Astro Site Locally in VS Code (For Non-Coders) If you're a non-coder and you're just getting started with Astro or coding with AI, this video walks you through how to get an Astro site running locally using VS Code and Codex. I keep the process slow and simple so you can follow along step by step, even if this is all new to you. 🧰 Resources & Tools Mentioned - My website: https://thomasfellows.com/ - Astro: https://astro.build/ - Visual Studio Code: https://code.visualstudio.com/ - OpenAI Codex for VS Code: https://marketplace.visualstudio.com/items?itemName=OpenAI.chatgpt - ChatGPT: https://chatgpt.com/ ⏱️ Chapters 00:00 Intro 00:18 What you need before starting 00:38 Install the Codex extension in VS Code 01:03 Create and open your project folder 02:17 Open Codex chat in VS Code 02:43 Prompt Codex to scaffold the Astro site 04:33 Start the local dev server 05:25 Open the local Astro site 05:45 Prompt Codex to build a homepage 06:39 Make a manual edit in index.astro 07:39 Initialize Git in VS Code 08:13 Recap of the full process 09:03 Final thoughts + thomasfellows.com In this video, you'll learn how to: - Set up the basic tools you need - Create a local Astro project folder - Use Codex inside VS Code to scaffold an Astro site - Start the local development server - View your site in the browser - Generate a homepage with AI - Make a simple manual edit in your Astro file - Initialize Git inside VS Code If this helped, subscribe for more videos on Astro, VS Code, Codex, AI workflows, and building websites as a non-coder.

Published

April 1, 2026

Tags

Transcript

+

If you're a non-coder and you're just getting started with Astro or coding with AI, then I'm going to help you get an Astro site up and running on your local machine using VS Code and Codex. The setup is pretty simple, but I'm going to keep it really slow so you can follow along. Any resources that I mention, I'll go ahead and put the links down in the description for you. To follow along with this tutorial, you're going to need VS Code installed, which is open source and run by Microsoft. Inside of VS Code, you're going to need the Codex extension or plug-in installed. I'll show you where to get that in a second. You're also going to need a ChatGPT Plus or higher subscription, because that's what allows you to access Codex, which is their coding agent. Once you're inside VS Code, go over to the side and click on Extensions. Up here you can search for Codex. As you can see, I already have it installed. This is Codex, OpenAI's coding agent. You'll go ahead and install that, and then sign in with your subscription. That way you can have access to Codex. When you're inside VS Code and you want to open up a project or a website, you have to go to the Explorer section and then open a folder. To show you where it lives on your machine, I'll go over to the Finder. I usually put my projects, websites, or apps inside Documents, and then inside Documents I have a folder for dev projects. So inside of there, I'll create a folder and call it My 1st Astro Site. This is where your website is going to live. Once you have that folder made, you'll go into VS Code, click Open Folder, find where your new folder is, and click Open. You can click Trust, trust the author. Under the Explorer, you can see where it says My 1st Astro Site, so that's exactly where your website is going to live. Now inside of VS Code, what we're going to do is go over to the chat area and at the top we can click Codex. This is where we're going to be able to chat with VS Code and our files in order to create the website. You can go down here and change your model and the thinking level. I'll put it at medium so it's a little bit faster. Basically, you just prompt it with whatever you want. We can start with something very simple, like, make a starter Astro site in this folder. I'll put this prompt in here, and then what it's going to do is start scaffolding the project, which basically means create the starter files for the website. Press Enter and it's thinking. It says it's setting up a starter Astro site in this folder. You can start with a prompt as simple as that, or you can go ahead and add additional instructions like TypeScript or Tailwind CSS. You can pretty much instruct it any way you want, but this is just the starter template. As you can see, the scaffold command is running now, so we'll just go ahead and wait. On the left side in the Explorer, it has already started populating with new files. If you go over to your project folder, you can see that the files are starting to appear. This is your actual website, and it's as simple as that. Every person's setup and machine is a little bit different, so if you have previous installs or things from before, it might give you some warnings about what happened. But now we have our starter site installed inside that folder, and all the files are here on my machine and opened in the Explorer inside of VS Code. If we want to see the actual website, we can go down to the terminal. If you don't see the terminal here, you can drag it up from the bottom or go up into the menu, click Terminal, and then click New Terminal. Inside the terminal you can write npm run dev, or if you don't want to mess with the terminal, you can go over to the chat and tell it to start a server and give you the link so you can see the website. I just said, start a server so I can see the site and give me the link. It says the site is now running at localhost:4321, so I'll copy the URL and check it out. Here it is. You have an Astro site up and running locally. This is just an Astro help screen, but it's not really a homepage. So we can go back to Codex and say build me a homepage. I'll write, build a homepage for a blog, and then we can see what it does for us. As you can see, the homepage is at src/pages/index.astro, so we can go over and look at it. That's our homepage, and there it is. The website is updated to be a blog for people who want clear ideas and quieter ambition. From that one prompt, this is what it came up with. Now what we can do is go ahead and make a small edit to this title and see if it works inside VS Code. If I wanted to find where this is, we know the page is index.astro, and we want to find the title. So here's the h1, and we can go ahead and change it. Now that we've made a change to the h1, we'll go up the file and click save so that the file is saved. Let's go see it. All right, My 1st Astro Site. As you can see, the website is getting changed inside of VS Code by both using manual edits and Codex, so we have success with our first Astro site. If you want to initialize Git, what you would do is go over to the source control area and click Initialize Repository. Then you would click to stage all of your changes, put a message in like quick commit, and then you have your initial commit. How to use Git is outside the scope of this video, but if you wanted to start using it, that's where it lives, and you can integrate it with GitHub from there. All right, so that's it. We created a project folder on the computer right here, My 1st Astro Site, and inside there we opened it in VS Code in the File Explorer. We used Codex to go ahead and scaffold our starter Astro website. After that, we prompted Codex to create a homepage for a blog, and then after we had the homepage built, we went ahead and did a manual edit to the h1 inside the index.astro file, clicked save, and found out that it actually changes and works. You also learned how to start the local server using Codex with a prompt. Hopefully that was very helpful to you, and you can see that it's a little easier and less intimidating than you might have thought. If this video helped you, then please hit subscribe. If you want to see a website that has been completely built by a non-coder using Codex, VS Code, and Astro, you can go ahead and visit thomasfellows.com to take a look. Thanks for watching.

Beyond The Video

Companion Updates

This walkthrough makes Astro feel less abstract by showing the exact sequence a beginner needs: open the right folder, install the right extension, scaffold the starter, run the local site, and make one small edit so the project starts feeling real instead of intimidating.

Key Takeaways

You do not need a complicated prompt to get started. A simple request is enough to scaffold a working Astro starter.
Codex can handle the early setup work, but it still helps to understand where your project folder, homepage file, and local server live.
Seeing localhost:4321 open successfully is an important confidence-building step for non-coders who are new to local development.
The video shows a practical bridge between AI-generated site setup and a first manual code edit inside src/pages/index.astro.
Initializing Git early gives you a clean starting point once the project is up and running.

Best Suited For

This video is best for non-coders, solo creators, and first-time Astro users who want a calm, literal walkthrough instead of a fast developer-centric tutorial. If you have been curious about using Codex inside VS Code but still feel unsure about local setup, folders, terminals, or what the first few prompts should look like, this is a strong starting point.

Copy And Paste Prompts

If you want a few clean prompt variations to try after the exact starter shown in the video, these are easy copy-and-paste starting points for Codex inside VS Code.

Basic Starter

This is the simple version shown in the video.

Create a basic Astro website starter project. Keep it simple and clean. Include a homepage and make sure it runs locally.

Starter Plus Tailwind

This is a common next step if you want styling and TypeScript from the beginning.

Create an Astro starter website with Tailwind CSS and TypeScript. Set up a simple homepage with a clean layout and make sure everything is ready to run locally.

Business Website Starter

This works well for local service business projects.

Create an Astro website for a local service business. Include pages for Home, About, Services, and Contact. Use clean styling and a simple layout. Make it easy to edit later.

Content Or Blog Starter

This is useful for videos, articles, and SEO-driven content sites.

Create an Astro site with a blog system using content collections. Add a homepage, a blog index page, and dynamic blog post pages using slugs. Keep it simple and organized.

YouTube Companion Site

This prompt fits a video-focused content system.

Create an Astro site for YouTube videos. Include a homepage and dynamic video pages using content collections. Each video page should have a title, description, transcript, and resources section.

Component-Based Starter

This is a better fit when you want reusable UI pieces from the start.

Create an Astro starter project with a components system. Add reusable components like Button, Card, and Section. Include a global layout and keep the design minimal and consistent.

Minimal And Scalable

This is the best overall option if you want a clean foundation that can grow.

Create a minimal Astro starter with TypeScript. Add a global layout, a components folder, and clean file structure. Keep everything simple, organized, and ready to scale.

If the result is not right, just say improve this or make it simpler in the chat and Codex can refine it.