Choosing Your Tools & Setting Up

2025-07-06 12 min read Hong

Let's get you set up with the minimal tools you need to build a website with AI assistance. No overwhelming tech stack—just the essentials that will make you productive from day one.

Building a website with AI doesn't require a massive toolkit. In fact, starting simple is better—you can always add more tools as you grow. Today, I'll introduce you to just four essential tools that can take you from idea to live website.

Even if you're not an engineer, don't worry! I'll walk you through each step and explain everything in plain language. By the end of this part, you'll have your workspace ready and know exactly how to use AI as your development partner.

The Essential AI Tools You Need

After trying dozens of AI tools, I've narrowed it down to these four essentials. Each serves a specific purpose, and together they create a powerful development workflow:

💬 ChatGPT

Your AI brainstorming partner and problem solver

⚡ GitHub Copilot/Cursor

Your AI coding assistant that writes code as you instruct it

🤗 Hugging Face

Free AI models for advanced features such as designing (optional)

📁 GitHub

Where your code lives and how you deploy your site

ChatGPT - Your AI Assistant

Think of ChatGPT as your patient mentor who never gets tired of explaining things.

ChatGPT will be your primary brainstorming partner. Here's how I use it:

  • Idea refinement - "Help me think through this website idea..."
  • Learning new concepts - "Explain how websites work in simple terms"
  • Problem solving - "My code isn't working, here's what's happening..."
  • Writing content - "Help me write an introduction about my website."

🎯 Pro Tip: How to Talk to ChatGPT

The secret to getting great results from ChatGPT is being specific:

  • ❌ "Help me build a website"
  • ✅ "I want to build a simple website for my local bakery that shows our menu and contact info. I'm not a programmer. What's the easiest way to start?"

GitHub Copilot - AI Code Companion

If ChatGPT is your mentor, GitHub Copilot is your coding buddy who sits next to you and helps write the actual code. It integrates directly into your code editor and suggests code as you type.

💰 Cost: $10/month or $100/year (but there's a free trial)

While it's paid, the time it saves makes it worth every penny. You can start with the free trial to see if you like it.

When using GitHub Copilot, make sure you configure it to use the Agent mode, which allows it to understand your code context better and provide more accurate suggestions. I also prefer to use Claude model, such as Sonnet 3.5 or 4, which appears to be more accurate and helpful than the default model.

Cursor IDE - AI-First Code Editor

Cursor is like a supercharged code editor built specifically for AI assistance. It's what I used to kick off MiniBreaks.io, and it's completely free. You can even get a two-week trial with all premium features unlocked.

In my experience, Cursor is very fast and yields great results. I was skeptical at first, but it really does make coding easier and more intuitive. However, after using both tools extensively, I found that GitHub Copilot had gained noticeable improvements in its suggestions and accuracy.

My recommendation: Start with Cursor (free), do as much as you can in the first 2 weeks, and add GitHub Copilot later if you want even more AI assistance.

Hugging Face - AI Models Hub (Optional)

Think of Hugging Face as a library of free AI tools (check Hugging Face Space). You might not need it for your first website, but it's good to know it exists for when you want to add cool AI features later.

  • Design your landing home page, recommend Deepsite
  • Image generation for your website
  • Text translation
  • Chatbots for customer service
  • And thousands of other AI capabilities

Setting Up Your GitHub Account

GitHub is where your code will live and where you'll deploy your website. Think of it as a combination of Google Drive for code and a free web hosting service.

Creating Your GitHub Account

Head to github.com and click "Sign up for GitHub". Choose a username that represents you or your project—you'll use this in your website's URL.

Creating Your First Repository

A repository (or "repo") is like a project folder for your website. Here's how to create one:

  1. Click the green "New" button on your GitHub homepage
  2. Name your repository (try "my-first-website")
  3. Check "Add a README file"
  4. Click "Create repository"

Congratulations! You just created your first code repository. This is where all your website files will live.

Preparing Your Workspace

Local Development Setup

While you can edit code directly on GitHub, it's better to work locally on your computer. Here's the minimal setup:

  1. Download Visual Studio Code - Visit code.visualstudio.com and download the free editor
  2. Sign up for GitHub Copilot - Go to github.com/features/copilot and start your free trial
  3. Download Cursor IDE (Optional) - Visit cursor.sh and download the free editor
  4. Sign up for ChatGPT - Go to chat.openai.com and create an account
  5. Install Git - Download from git-scm.com (this connects your computer to GitHub)

Your AI-Assisted Workflow

Here's the simple workflow that will become second nature:

1

Plan with ChatGPT

Brainstorm and plan your feature

2

Code with Cursor

Write code with AI assistance

3

Deploy to GitHub

Push your changes live

Your Homework

Before we move to the next part, complete these simple setup tasks:

Create your GitHub account and first repository
Download and install Visual Studio Code
Sign up for GitHub Copilot (start your free trial)
Sign up for ChatGPT (free account is fine)
Install Git to connect your computer to GitHub (ask ChatGPT if not familiar)

⚠️ Important about Cursor: If you've never registered for Cursor before, do NOT register yet! Wait until Part 5 so you can take advantage of the 2-week trial with all premium features unlocked when you actually start coding.

Don't skip the homework! Having these tools ready will make the next parts much smoother.

What's Next

In Part 4, we'll dive into using ChatGPT strategically to craft your website idea and create your first MVP (Minimum Viable Product). You'll learn how to:

  • Use ChatGPT effectively for idea refinement and brainstorming
  • Structure conversations with AI to get better results
  • Avoid common pitfalls when planning with AI assistance
  • Create a clear scope and feature list for your first website

By the end of Part 4, you'll have a clear plan and know exactly what you want to build!

Enjoying the Series?

Share your thoughts or questions about AI-powered development.