DEV Community

Aisalkyn Aidarova
Aisalkyn Aidarova

Posted on

Build Your First Website with AI Using Jules and GitHub

What are we going to build?

Today we are going to create a real business website without writing code.

Imagine you own:

  • A trucking company
  • A beauty salon
  • A restaurant
  • A dental office
  • A law firm

Normally, you would hire a web developer.

Today, instead of hiring a developer, we will hire an AI Software Engineer called Jules.

Step 1 – Create a GitHub Account

Go to:

https://github.com

Click Sign Up.

Why?

Think of GitHub as Google Drive for programmers.

Instead of storing Word documents, GitHub stores software projects.

Your AI developer (Jules) needs a place to save your website.

Step 2 – Create a New Repository

After logging into GitHub:

Click

New Repository

Repository Name:

my-first-website
Enter fullscreen mode Exit fullscreen mode

or

beauty-salon
Enter fullscreen mode Exit fullscreen mode

or

trucking-company
Enter fullscreen mode Exit fullscreen mode

Choose

✅ Public

Click

Create Repository

Congratulations!

You just created an empty project.

Think of it as an empty folder waiting for files.

Step 3 – Open Jules

Go to

https://jules.google.com

Sign in using the same Google account.

The first time you use Jules it will ask permission to connect to GitHub.

Click

Authorize GitHub

Now Jules can work inside your GitHub repositories.

Think of Jules as your software engineer.

Step 4 – Select Your Repository

Inside Jules choose

my-first-website
Enter fullscreen mode Exit fullscreen mode

Now Jules knows exactly where to create your website.

This is just like telling a real employee

"Please save everything inside this folder."

Step 5 – Tell Jules What You Want

Example prompt

Create a professional website for my trucking company.

Company Name:
Freedom Trucking LLC

The website should include:

  • Home
  • About
  • Services
  • Fleet
  • Testimonials
  • Contact
  • Quote Request Form

Use HTML, CSS and JavaScript.

Create a professional project structure.

Commit all files to my GitHub repository.

Then click

Start

Step 6 – Jules Starts Working

Now Jules behaves exactly like a software engineer.

It creates files such as

index.html
Enter fullscreen mode Exit fullscreen mode 
style.css
Enter fullscreen mode Exit fullscreen mode 
script.js
Enter fullscreen mode Exit fullscreen mode

It organizes everything.

Then Jules automatically saves everything into your GitHub repository.

This is called a commit.

Think of a commit as pressing Save.

Step 7 – Review the Changes

Jules will often create something called a Pull Request.

What is a Pull Request?

Imagine an employee says

"I finished my work.

Would you like to review it before adding it to the project?"

That review request is called a Pull Request.

If everything looks good

Click

Merge Pull Request

Now your website officially becomes part of your project.

Step 8 – Open Your Repository

Go back to GitHub.

Now you should see

index.html
Enter fullscreen mode Exit fullscreen mode 
css
Enter fullscreen mode Exit fullscreen mode 
js
Enter fullscreen mode Exit fullscreen mode

Your website is now safely stored in GitHub.

But...

Can people visit your website?

NO.

GitHub stores your files.

It is not yet showing your website to the world.

Step 9 – Publish Your Website

Click

Settings

↓

Pages

You will see

Source

Choose

Deploy from Branch

Choose

Branch

main
Enter fullscreen mode Exit fullscreen mode

Folder

/(root)
Enter fullscreen mode Exit fullscreen mode

Click

Save

Wait about one minute.

GitHub now copies your files onto its web servers.

This is called hosting.

Hosting simply means:

Your website files are now stored on computers that are connected to the Internet 24 hours a day.

Step 10 – Your Website Gets a Public Address

After about one minute GitHub displays something similar to

https://yourusername.github.io/my-first-website
Enter fullscreen mode Exit fullscreen mode

This is your public website.

Now anyone in the world can visit it.

Congratulations!

You are now the owner of a real website.

What is Hosting?

Before publishing

Your files looked like this

My Laptop

index.html
style.css
script.js
Enter fullscreen mode Exit fullscreen mode

Only YOU could open them.

After enabling GitHub Pages

GitHub Servers

index.html
style.css
script.js
Enter fullscreen mode Exit fullscreen mode

Now everyone can visit.

Hosting simply means

"Putting your website onto computers connected to the Internet."

Why Do We Need a Domain Name?

GitHub gave us

https://yourusername.github.io/my-first-website
Enter fullscreen mode Exit fullscreen mode

This works perfectly.

But it doesn't look very professional.

Instead you may want

www.freedomtrucking.com
Enter fullscreen mode Exit fullscreen mode

or

www.annassalon.com
Enter fullscreen mode Exit fullscreen mode

or

www.bestrestaurant.com
Enter fullscreen mode Exit fullscreen mode

Step 11 – Buy a Domain Name

You can purchase a domain from companies like

  • GoDaddy
  • Namecheap
  • Cloudflare Registrar

Buying a domain does NOT create a website.

It simply reserves the name.

Think of it as buying the street address for your business.

Step 12 – Connect the Domain

After buying your domain

Open your domain provider.

Find

DNS Management

GitHub Pages will tell you exactly which DNS records to add.

Usually you will add:

  • A records
  • or CNAME records

Example

www.freedomtrucking.com
        │
        ▼
GitHub Pages
        │
        ▼
Your Website
Enter fullscreen mode Exit fullscreen mode

Visitors type

www.freedomtrucking.com
Enter fullscreen mode Exit fullscreen mode

GitHub automatically shows your website.

You no longer need the long GitHub URL.

Understanding the Entire Process

Business Owner

↓

"I need a website."

↓

Jules (AI Software Engineer)

↓

Creates Website Files

↓

GitHub

↓

Stores Project

↓

GitHub Pages

↓

Publishes Website

↓

Public URL

↓

Optional Custom Domain

↓

Customers Visit Your Website

Simple Definitions

GitHub

Stores your project.

Jules

Creates your website.

Commit

Saving changes.

Pull Request

Asking for approval before saving work.

Merge

Accepting the changes.

GitHub Pages

Makes your website available on the Internet.

Hosting

A computer connected to the Internet that stores and serves your website.

Domain Name

A friendly website address like

www.mybusiness.com
Enter fullscreen mode Exit fullscreen mode

DNS

The system that connects your domain name to where your website is hosted.

Final Thought

Today, you did not learn programming.

You learned how modern businesses create websites using Artificial Intelligence.

You described your business.

AI wrote the code.

GitHub stored it.

GitHub Pages published it.

With one more step—a custom domain—your website becomes your professional online presence.

Top comments (0)