Build Your First AI-Powered Website (Free!)

Time: 30 minutes | Cost: $0 | Skill level: Beginner

In this guide, you'll create your own personal website with an AI chatbot that can answer questions about YOU. No software to install. No coding experience needed. Everything runs in your web browser.

What you'll build:

• A personal website hosted for free on GitHub Pages
• An AI chat widget that knows about you and can answer visitor questions
• A project you can show off to friends, family, or college applications!

What You Need

• A computer with internet access
• An email address
• About 30 minutes

That's it! Everything else is free.

Part 1: Create Your GitHub Account

GitHub is where developers store their code. Think of it like Google Drive, but for websites and apps.

Step 1.1: Sign Up

1. Go to github.com

2. Click Sign up

3. Enter your email address

4. Create a password (make it strong!)

5. Choose a username — this is important!

   Your username becomes part of your website address. For example, if your username is alexsmith, your website will be at alexsmith.github.io

6. Complete the puzzle to prove you're human

7. Check your email and enter the verification code

Congrats! You now have a GitHub account.

Part 2: Create Your Website Project

A "repository" (or "repo") is just a folder for your project. You'll create one to hold your website files.

Step 2.1: Create a New Repository

1. Click the + icon in the top-right corner
2. Select New repository
3. Fill in the details:
   • Repository name: my-website (or anything you like)
   • Description: "My personal website" (optional)
   • Public: Make sure this is selected (required for free hosting)
   • Add a README file: Check this box
4. Click Create repository

Understanding Your Website Address

Your website will be live at:

https://YOUR-USERNAME.github.io/my-website/

For example, if your username is alexsmith and your repo is my-website:

https://alexsmith.github.io/my-website/

Write this down! You'll need it later.

Part 3: Open Your Free Coding Environment

GitHub gives you a free coding environment called Codespaces. It's like having a professional coding setup without installing anything.

Step 3.1: Launch Codespaces

1. In your new repository, click the green Code button
2. Click the Codespaces tab
3. Click Create codespace on main

Wait about 30 seconds. A coding environment will open in your browser!

This is called VS Code — it's what professional developers use. Don't worry, we'll keep it simple.

Part 4: Create Your Website with AI Help

Here's the cool part: you can ask AI to write your website code for you!

Step 4.1: Open the AI Chat

1. Press Ctrl+Shift+P (Windows) or Cmd+Shift+P (Mac)
2. Type: Chat: Open
3. Press Enter

A chat panel opens on the side. This is GitHub Copilot — your AI coding assistant.

Step 4.2: Ask AI to Create Your Website

Copy and paste this prompt into the chat:

Create an index.html file for a personal website. Include:
- A hero section with my name "YOUR NAME HERE" and a short tagline
- An "About Me" section
- A "Contact" section with placeholder links
- Clean, modern styling with inline CSS
- Mobile-friendly responsive design
Save the file as index.html in the project root.

Replace "YOUR NAME HERE" with your actual name!

Step 4.3: Apply the Code

1. The AI will generate HTML code
2. Click Apply or Insert to create the file
3. You'll see a new file called index.html appear

Tip: You can ask the AI to change anything! Try:

• "Make the background dark blue"
• "Add a section for my hobbies"
• "Change the font to something more fun"

Part 5: Save and Publish Your Website

Step 5.1: Save Your Changes to GitHub

1. Look at the left sidebar — click the Source Control icon (it looks like a branch)
2. You'll see your changed files listed
3. Type a message like: Add my website
4. Click the checkmark to commit
5. Click Sync Changes to upload to GitHub

Step 5.2: Turn On GitHub Pages

1. Go back to your repository on github.com (open a new tab)
2. Click Settings (in the top menu of your repo)
3. Scroll down and click Pages in the left sidebar
4. Under "Source," select:
   • Deploy from a branch
   • Branch: main
   • Folder: / (root)
5. Click Save

Step 5.3: Wait and Visit!

GitHub needs about 1 minute to publish your site.

Then visit:

https://YOUR-USERNAME.github.io/my-website/

Your website is live!

Part 6: Add an AI Chatbot with Demeterics

Now let's add an AI assistant that can chat with your website visitors and answer questions about you!

Step 6.1: Create a Demeterics Account

1. Go to demeterics.com
2. Click Get Started Free
3. Sign in with your Google account (or create an account)

You get 100 free credits — plenty to get started!

Step 6.2: Create Your AI Chat Widget

1. Click AI Chat in the left menu
2. Click New Widget
3. Fill in the basics:
   • Name: "My Website Assistant"
   • Title: "Ask me anything!"
4. Click Create

Step 6.3: Get Your Widget Code

After creating your widget:

1. You'll see your Agent Key — it looks like DEM-XXXXXXXXXXXX
2. Copy this key (you'll need it in the next step)

Step 6.4: Add Your Website to Allowed Domains

This is important! Your widget will only work on websites you approve.

1. In your widget settings, find Allowed Domains

2. Add your GitHub Pages domain:

   YOUR-USERNAME.github.io
   

   Important: Just the domain, no https:// and no /my-website path!

3. Click Save

Part 7: Add the Chatbot to Your Website

Go back to your Codespace (or open it again from your repo).

Step 7.1: Ask AI to Add the Widget

Open the AI chat (Ctrl+Shift+P → Chat: Open) and type:

Add the Demeterics AI chat widget to my index.html.
Add these two lines just before the closing </body> tag:

<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent name="default" title="Ask me anything!" state="minimized"></dem-agent>

Replace DEM-YOUR-KEY-HERE with your actual Agent Key from Demeterics!

Step 7.2: Save and Publish

1. Save the file (Ctrl+S)
2. Go to Source Control (left sidebar)
3. Type: Add AI chat widget
4. Click the checkmark, then Sync Changes

Wait 1 minute, then refresh your website. You should see a chat bubble in the corner!

Part 8: Teach Your AI About You

Right now, your AI chatbot is generic. Let's make it know about YOU!

Step 8.1: Write Your Personal Info

Create a short bio about yourself. Include things like:

• Your name and age
• Where you're from
• Your hobbies and interests
• What you're studying or want to study
• Fun facts about you
• Your goals or dreams

Example:

My name is Alex Smith. I'm 15 years old and I'm a freshman at Lincoln High School
in Portland, Oregon. I love playing soccer, building with Legos, and learning
about space. My favorite subject is science, especially astronomy. I want to
study engineering in college and maybe work at NASA someday. Fun fact: I've
watched every Star Wars movie at least 5 times!

Step 8.2: Add Your Bio to the AI Prompt

1. Go back to demeterics.com
2. Click AI Chat → Click on your widget
3. Find the System Prompt section
4. Replace the default prompt with something like this:

You are a friendly AI assistant on Alex's personal website. You help visitors
learn about Alex and answer their questions.

Here's information about Alex:
---
My name is Alex Smith. I'm 15 years old and I'm a freshman at Lincoln High School
in Portland, Oregon. I love playing soccer, building with Legos, and learning
about space. My favorite subject is science, especially astronomy. I want to
study engineering in college and maybe work at NASA someday. Fun fact: I've
watched every Star Wars movie at least 5 times!
---

Be friendly, helpful, and keep answers short. If someone asks something not
covered above, politely say you don't have that information.

5. Click Save

Part 9: Test Your AI Chatbot!

Go to your website and try asking questions:

• "Who is Alex?"
• "What are your hobbies?"
• "What do you want to be when you grow up?"
• "What's your favorite movie?"

The AI will answer based on the info you provided!

What You Learned

Congratulations! You just:

• Created a GitHub account (used by millions of developers)
• Built a website using AI-assisted coding
• Deployed it for free using GitHub Pages
• Added an AI chatbot that knows about you
• Learned about prompts and how to customize AI behavior

These are real skills that developers and tech professionals use every day!

Make It Even Better

Here are some ideas to keep improving:

Add More to Your Website

Ask the AI in Codespaces:

• "Add a photo gallery section"
• "Add a section about my projects"
• "Make it look more colorful"

Teach Your AI More

Add more details to your Demeterics prompt:

• Your favorite books, games, or music
• School projects you're proud of
• Sports teams you play on
• Languages you speak

Share It!

Send your website link to:

• Friends and family
• Teachers (great for school projects!)
• Include it on college applications

Troubleshooting

"My website shows a 404 error"

• Wait 2-3 minutes after enabling GitHub Pages
• Make sure your file is named exactly index.html (lowercase!)
• Check that GitHub Pages is enabled in Settings → Pages

"The chat widget doesn't appear"

• Check that your domain is in Allowed Domains (just username.github.io, no path)
• Make sure you used your actual Agent Key, not DEM-YOUR-KEY-HERE
• Clear your browser cache and refresh

"The AI doesn't know about me"

• Make sure you saved the System Prompt in Demeterics
• Check that your bio information is inside the prompt
• Try asking simpler questions first

Quick Reference

Need Help?

• GitHub Docs: docs.github.com/pages
• Demeterics Support: support@demeterics.com
• AI Chat Widget Guide: /docs/ai-chat-widget

Happy building!