Welcome!
In this book, you'll learn how to create a professional one-page website using AI, edit it without coding, host it for free, and connect your own custom domain.
You do not need:
By the end of this book, you'll have a website that anyone can visit on the internet.
A website is a collection of pages that people can visit through a web browser such as Chrome, Edge, or Firefox.
Examples:
Every website is made up of files that are stored on a server and delivered to visitors through the internet.
A one-page website contains all information on a single page.
Typical sections include:
When visitors scroll down, they can see all sections without opening another page.
A static website consists of files such as:
It does not require a database or complex backend.
Advantages:
For beginners and small businesses, static websites are perfect.
Hosting is the computer where your website files are stored.
When someone visits your website, the hosting server sends those files to their browser.
Think of hosting as the land where your website house is built.
A domain is the address people type to visit your website.
Examples:
Think of a domain as your home's address.
Domain = Address
Hosting = Land where the website lives
You need both to create a professional website.
GitHub is a free platform where you can store website files online.
We will use GitHub for:
Advantages:
Step 1:
Visit github.com
Step 2:
Click Sign Up
Step 3:
Choose:
Step 4:
Verify account
Step 5:
Login
A repository is simply a folder stored online.
This folder will contain:
Step 1:
Click the "+" icon
Step 2:
Click "New Repository"
Step 3:
Enter repository name
Example:
my-website
Step 4:
Select Public
Step 5:
Click Create Repository
Repository created successfully.
Gemini is Google's AI assistant.
It can generate complete websites from a simple prompt.
Visit Gemini.
Login with your Google account.
Use this prompt:
Create a modern responsive one-page website for a restaurant.
Requirements:
Return everything in a single index.html file.
Gemini will generate HTML.
Copy all code.
Open Notepad.
Paste the code.
Save file as:
index.html
Double-click index.html.
The website opens in your browser.
Congratulations!
Your website is working locally.
Open your repository.
Click Add File.
Select Upload Files.
Upload:
Click Commit Changes.
Create folder:
src
Inside src upload:
Commit changes.
Your project should look like:
index.html
src/
logo.png
banner.jpg
image1.jpg
image2.jpg
Open:
index.html
Click Edit
Find:
Business Name
Replace with your own business name.
Replace:
9876543210
with your number.
Replace with your address.
Click Commit Changes.
GitHub automatically saves the update.
Open Repository.
Click Add File.
Upload File.
Upload image with same filename.
Example:
old:
banner.jpg
new:
banner.jpg
The website updates automatically.
Download free professional images.
GitHub Pages turns your repository into a live website.
Open Repository Settings.
Click Pages.
Under Source:
Select:
Deploy from Branch
Choose:
main
root
Click Save.
GitHub will generate a URL.
Example:
username.github.io/my-website
Open it in browser.
Your website is now online.
Instead of:
username.github.io/my-website
Use:
mybusiness.com
This looks professional.
Buy a domain from:
Open:
Settings → Pages
Enter:
mybusiness.com
Save.
Add required records at your domain provider.
GitHub will provide the DNS information.
Add:
Wait for DNS propagation.
Usually takes a few minutes to 24 hours.
GitHub automatically provides SSL.
Enable:
Enforce HTTPS
Your website is now secure.
You have successfully:
You now have the skills to create websites for yourself, friends, clients, or local businesses.