Video Companion

[Part 1] From Zero to Live Website with AI No Coding Needed - The Foundation

YouTube Description

+

🚀 Get the exact prompts + resources I used: 👉 Visit: https://thomasfellows.com/videos/from-zero-to-live-website-with-ai-foundation/ --- Build a fully working Astro website from scratch - even if you don't code. In this video, you'll go from an empty folder to a live site using AI, GitHub, and Vercel. This is Part 1 of a series focused on building a solid foundation so everything else becomes easier. --- ⏱️ TIMESTAMPS 00:00 Intro - What you'll build in this series 00:12 Why this setup matters (AI + foundation) 00:25 What this video covers (not the full site) 00:31 Create your project folder 00:52 Open your project in VS Code 01:10 Setting up your workspace correctly 01:30 Using AI to scaffold the Astro project 02:30 Running the initial setup commands 03:30 Understanding the generated project structure 04:30 Testing your site locally 05:30 Preparing your project for GitHub 06:30 Pushing your project to GitHub 07:30 Deploying your site on Vercel 08:30 Verifying your live site works 09:00 What's next in the series --- This video walks through the exact process to scaffold a modern Astro site using AI tools like Codex or Claude, then deploy it live using GitHub and Vercel. If you're trying to build SEO-driven websites without getting stuck in setup, this is the foundation you need. --- 🔗 Resources: Astro: https://astro.build VS Code: https://code.visualstudio.com GitHub: https://github.com Vercel: https://vercel.com OpenAI Codex / ChatGPT: https://chat.openai.com Claude: https://claude.ai Tailwind CSS: https://tailwindcss.com TypeScript: https://www.typescriptlang.org --- Who this is for: Non-coders using AI to build websites Developers who want a faster setup workflow Anyone building SEO/content-driven sites with Astro What you'll get: A clean, working project structure A site running locally + deployed live A repeatable system you can reuse for future builds --- 🚀 Get the exact prompts + resources I used: 👉 https://thomasfellows.com/videos/from-zero-to-live-website-with-ai-foundation/

Published

April 12, 2026

Tags

Transcript

+

In this video, I'm going to show non-coders how to go from an empty folder on their desktop to a real Astro website that is scaffolded with AI, pushed to GitHub, and deployed on Vercel, and ready to build on. So if you're using tools like Codex, Claude, or another LLM to help you create websites, this is the part where you get the project foundation set up the right way so the rest of the build is a lot easier. We're not trying to finish the whole site in this video. This is part of a series. We're just getting the baseline in place, so the project works locally, works online, and is ready for the next steps. The first thing you have to do is choose a place on your computer and create a new folder. That way your website can live there. So I'm choosing to put my folder inside of Documents inside of a subfolder called Dev Projects. We'll go ahead and name it New Astro Scaffold. Then what we're going to do is go into VS Code and open up that folder. Inside VS Code, you can go over to the Explorer and click Open Folder, or use the menu, find it, and click Open. You can trust the authors, and it's as simple as that to get it open inside VS Code. Right there under Explorer it says New Astro Scaffold. You can use another app or tool if you want, but I'm using VS Code along with Codex inside of this build. As you can see on the right side, I have the Codex icon so I can start chatting with Codex right down here. If you don't have that installed inside VS Code yet, go over to Extensions and search for Codex, OpenAI's coding agent. The plan I'm using is just the basic Plus plan. You can do it with Pro, but I recommend a subscription. Otherwise you're going to run out of tokens right away. Before we let Codex build anything, what you have to do is prepare your prompt. I want to explain the prompt because the quality of the project and the setup depends a lot on the quality of the instructions. The prompt is where I define the stack, the direction, and the kind of foundation that we want the website to start with. Scaffolding just means setting up the initial dependencies and technology that your website is going to run on. We have it set to create the bare-bones foundation for a new site. Since we're building this step by step, we want to add things as we go along instead of having Codex build the entire website all at once. So this is not a full website build. Don't try to fully design, write, optimize, et cetera. I'll make this available for you. Our project stack is Astro, Tailwind CSS, TypeScript, Astro Content Collections, and MDX for content collections, and we're going to avoid React unless necessary. The reason we're using Astro is because it allows us to use Astro Content Collections. If you're coming from WordPress, you can think of custom post types, custom taxonomy, and custom fields. That's essentially what this is allowing us to do. We're using Tailwind because most LLMs have a good handle on Tailwind, because that's one of the most recognized CSS frameworks out there. The next thing is the MDX files for the content collections. Instead of just writing an MD file with only text, with MDX you can insert components inside the content. React is often used for extra functionality that might be necessary, and we don't want to add extra stuff like that until we actually need it. We're giving it this high-level goal: routes, folders, layouts, placeholder pages, collection directories, and basic navigation. Again, we have constraints repeated because we don't want it to build too much stuff. Here are the core pages: About, Pricing, Contact, and Intro Call. This is set up for an agency website, so that's the basis of the URL structure we're going for. Then we have Services, and after Services we have the slug. So Services by itself is an archive page, and then each individual service has its own URL there. Then we have content silos, which would be like your categories. Since the niche we're going forward with in this specific build is electricians, we're providing websites or web design and SEO-type services for electricians. When you're following along, you can choose any niche you want. You could do board game creators, online gaming, lawyers, anything you want. These are three different categories, and this is the URL structure for each of those categories. Then we have the routes for the custom post types: posts and glossary. The idea with glossary is that each post can have a tag, and that tag can have its own index page. Each letter of the alphabet has its own archive page, and then you'll have something like glossary slash S slash SEO for that specific page. We don't want a flat glossary slash term structure. My service pages are custom pages that I'll build by hand, while the posts and glossary will be templated with layouts. Now that we have the prompt prepared, I'm going to let Codex generate the initial scaffold. The goal here is not to have a finished website. The goal is to get a strong foundation, a starting baseline. This is an AI-coded workflow, so I'm using AI to create the structure quickly, and then I'm going to review what it actually made. We'll go ahead and copy and paste the prompt into VS Code. You can change your model and your reasoning effort from low, medium, high, and extra high. Remember it's going to cost more tokens and take more time to use the higher reasoning, so I'm just going to stick with medium for right now. Then I'll click send and let it build. That took 5 minutes and 51 seconds, and it said it created a minimal Astro scaffold that stays intentionally unfinished and easy to extend. If we go over to the Explorer panel, package.json is one of the first files we'll check. This is basically the setup sheet for the project. It tells us what tools the project is using and which commands are available to run the site, build it, and preview it. This is one of the quickest ways to sanity-check what kind of project Codex or Claude actually made for us. You can see Astro under dependencies, and we also have Tailwind and TypeScript. Next we can take a look at the Tailwind setup and the styling system for the project in `src/styles/globals.css`. It's very minimal, and that's on purpose, so we can build on it from there. Inside the `src` folder is the Pages folder, and that's where you can find pages like About, Contact, Intro Call, Pricing, Privacy Policy, and Terms and Conditions. These names usually map directly to your URLs, except `index`, which is the homepage. Under `src` there's also a Components folder. This is where the reusable building blocks for the site live, so instead of rebuilding the same section or card over and over, you can make it once and reuse it across the whole site. Then there's the Layouts section, which are the shared page wrappers, like templates. Components handle the smaller reusable pieces, while layouts control the bigger outer structure of a page type. The Content folder is where all the Astro Content Collections live. One of the biggest benefits here is that the AI can directly see the content and manipulate it with a prompt instead of you having to go into the back of a CMS. If you don't want clients going into the back of the website, this is a great fit. If you need that, you might want Sanity, WordPress, or another solution. The post folder inside the content collection is where the posts themselves will live, and over time this becomes the publishing engine that supports the long-term SEO strategy with the glossary. Each MDX file is a post, and each content silo or category has its own placeholder post at the moment. Just like the post folder, there's also a glossary folder, and under glossary each individual letter has its own archive with a placeholder post. Because it's MDX, we can directly edit it and place components inside it. Right now the project doesn't have a public folder yet. The public folder is for static files that should be served directly as-is, like favicons, social share images, and other static assets. I asked Codex where the public folder was, and it said there wasn't one yet because this started from an empty workspace, so I asked it to add it. We have scaffolded the project, but we haven't actually seen the website itself yet, so we want proof that Codex generated a website we can actually see. We're going to need to start a local dev server. You can open a terminal and run `npm run dev`, or you can just go over to the chat and tell Codex to start a local server and give you the link to the homepage. Here's our homepage. This is the site that it made. It says New Website Scaffold, we have Home, we have Services, and they are clickable. We can move around the website, and it seems to be working. We have our archive pages and everything else. So we have evidence that the website is working on our local machine inside the folder that we made at the very beginning. Now that we have our website up and running locally, we're going to have to initialize Git, which is basically your website's version history. Think of Google Docs where it automatically saves version history, but with Git you get to choose when it saves a version. To start that, you'll go over to Source Control and click Initialize Repository. Once we have initialized Git, you can see all the changes because we haven't made any commits yet. To make your first commit, you'll type a message like initial commit. Later, when we start to make changes after the site is live online with a custom domain, then what you would do is create separate branches away from main and call them something like contact-page if you're going to edit the contact page or add another page. To show how changes work, we go over to the website and change the homepage title from New Website Scaffold to My Cool Scaffold. Then, just like any file on your computer, you save it. Over in Source Control we can see the change on `index.astro`, and when we go back to the website it updates right away. If we want to save this as a version, we stage the changes, give it a message, and commit it. So now we have a new version in our history. Now that we have Git initialized, we need to put this on GitHub. GitHub is basically the cloud version of this version history, because when we use Vercel to host it, Vercel pulls the website from GitHub. If you don't have GitHub, you need to go to GitHub.com and make an account. Same with Vercel. I already have it connected, so right here I click Publish Branch. It'll be called New Astro Scaffold, and I'll publish it to GitHub as a private repository. Then we go over to Vercel. I'm on the Hobby plan, so it's free hosting. I click Add New Project, import the Git repository, and if I don't see the new website there, that means I have to adjust the GitHub app permissions. Once that's set, I can import it and deploy it. Now we have a `vercel.app` URL, and here is the new website that we just made. If I click here, we have the localhost version, and if I click here, then we have the live version that's online and hosted so you can visit it from anywhere. Later in the series we're going to attach a custom domain, but for right now it's good to go. This is more like your staging site. After it's live on your custom domain, you can make new branches on your Git and GitHub setup, start making edits, and see how they look on a live domain. The value that I'm trying to show here is the workflow itself. You're going from having just a prompt to having a scaffolded project on your local machine, on your computer, and online. This is a repeatable workflow, a process that you can build upon and fit to your own needs. With this foundation in place, the next step is to decide what the site should actually feel like and what visual direction it should take. In the next video, we're going to define the visual direction by choosing the fonts, colors, and overall style that's going to shape the rest of the website. One more little tidbit is that this is the second time I'm recording this video, so this scaffolded project will look a little bit different in the next video. If you want to follow along, go ahead and check out the next one.

Beyond The Video

Companion Updates

This first part is really about reducing setup friction before the real design and content work begins. The walkthrough shows a non-coder-friendly workflow for creating a deliberately unfinished Astro foundation, checking what the AI actually generated, and getting the project live on GitHub and Vercel so future iterations have a stable base.

Key Takeaways

The first prompt should focus on structure, routes, and content architecture rather than trying to finish the full website in one pass.
Reviewing files like package.json, global styles, page routes, layouts, and content folders is an important quality check after the scaffold is generated.
Astro Content Collections and MDX create a strong file-based foundation for SEO content and AI-assisted editing workflows.
Git, GitHub, and Vercel are part of the foundation, not cleanup tasks for later, because they make the project versioned, shareable, and deployable right away.
The real win in this video is the repeatable workflow: empty folder to local site to live staging URL with a setup that is intentionally minimal and easy to extend.

Best Suited For

This video is best for non-coders, solo builders, WordPress-adjacent creators, and anyone using tools like Codex or Claude to speed up website setup without skipping the foundation. If you want a calmer walkthrough of how to scaffold an Astro project, inspect the output, and get it live before moving into design decisions, this is a strong Part 1 to watch.

Copy And Paste Prompt

If you want to recreate the same intentionally unfinished scaffold shown in the video, this prompt keeps the build focused on routes, placeholders, layouts, and content structure instead of jumping ahead into polish too early.

Set up the bare-bones foundation for a new website.

This is NOT a full website build.
Do NOT try to fully design, write, optimize, or complete the site.
The goal is to create only the structural scaffold so it can be properly built out later.

PROJECT STACK
- Astro
- Tailwind CSS
- TypeScript
- Astro Content Collections
- MDX for content collections
- Avoid React unless clearly necessary

HIGH-LEVEL GOAL
Create only the structural foundation:
- routes
- folders
- layouts
- placeholder pages
- collection directories
- basic navigation

Keep everything minimal, clean, and easy to expand.

STRICT CONSTRAINTS
- Do not attempt to finish the website
- Do not write real marketing copy
- Do not create a polished design system
- Do not overbuild components
- Do not add unnecessary dependencies
- Do not force React
- Do not implement advanced functionality
- Do not create full collection schemas yet unless required for the project to run
- If something can be stubbed, stub it
- Placeholder content is preferred

SITE STRUCTURE

Core pages:
- /
- /about/
- /pricing/
- /contact/
- /intro-call/

Services:
- /services/
- /services/[slug]/

Content silos:
- /electrician-websites/
- /seo-for-electricians/
- /electrician-marketing/

Supporting post routes:
- /electrician-websites/[slug]/
- /seo-for-electricians/[slug]/
- /electrician-marketing/[slug]/

Glossary (IMPORTANT: nested structure):
- /glossary/
- /glossary/[letter]/
- /glossary/[letter]/[term]/

Set up routing to support:
- glossary index page
- letter archive pages
- individual term pages nested under each letter

Do NOT use a flat /glossary/[term]/ structure.

Legal:
- /privacy-policy/
- /terms-and-conditions/

CONTENT MODEL DIRECTION (DO NOT FULLY IMPLEMENT YET)

Custom pages (no collections):
- core pages
- service pages
- silo hub pages

Prepare directories for collections:
- src/content/posts/
- src/content/glossary/

Future intent (for awareness only):
- posts will belong to one silo
- glossary terms will connect to posts
- glossary will support letter-based navigation

Do NOT fully implement schemas or relationships yet unless required.

NAVIGATION

Primary nav:
- Home
- Services
- Pricing
- About
- Resources
- Contact
- Book a Call

Resources should conceptually include:
- content silos
- glossary

Footer:
- minimal
- include core pages and legal pages

IMPLEMENTATION STYLE
- Be minimal
- Be practical
- Be clean
- Be easy to extend
- Make sensible structural decisions
- Avoid premature abstraction

OUTPUT EXPECTATION
Create a working Astro project that includes:
- correct route structure
- placeholder pages
- base layout(s)
- header + footer
- basic navigation
- collection directories
- minimal Tailwind setup

The result should be a clean scaffold ready for future phases.

FINAL RULE
When in doubt, do less.
Choose the simplest implementation that preserves the intended architecture.
Avoid premature decisions about schemas, content, styling, and advanced functionality.