Gone are the days when you needed to spend months learning complex programming languages just to build a simple website. With the rise of advanced Artificial Intelligence, you can now generate a fully functional website in seconds.
In this tutorial, we will learn how to create a website using Claude AI, upload the source code to GitHub, and launch it live on the internet for free using Netlify.
Choosing the right typography is crucial for making your website look modern and professional. Google Fonts is a free and popular library that offers thousands of beautiful web fonts. In this guide, we will show you exactly how to use Google Fonts in HTML and CSS using a few simple steps.
1: Generate Code Using Claude AI
First, we will ask Claude AI to generate clean and responsive HTML, CSS, and JavaScript code for a modern personal portfolio website.
Open Claude.ai and log in.
Enter the following prompt in the chat box:
“Write a single-file responsive HTML, CSS, and JavaScript code for a modern professional portfolio website. Include a hero section, about me section, projects section, and a contact form. Use a clean dark mode theme.”
Claude AI will generate a complete code file. Copy the generated code.
2: Save the Code on Your Computer
Open Notepad on Windows or TextEdit on Mac.
Paste the code you copied from Claude AI.
Save the file with the following name:
index.html
Make sure the file extension is .html and not .txt.
3: Create a GitHub Repository
To store your website code and prepare it for deployment, upload it to GitHub.
- Go to GitHub.com and sign up or log in to your account.
- Click the New button to create a new repository.
- Name your repository, for example:
- my-ai-portfolio
- Set the repository visibility to Public.
- Click Create repository.
- On the next screen, click the “uploading an existing file” link.
- Drag and drop your index.html file into the upload area.
- Finally, click Commit changes.
- Your website code is now stored in your GitHub repository.
4: Deploy Your Website Live Using Netlify
Now your code is available on GitHub, but you need a hosting service to make your website accessible online.
Go to Netlify.com and sign up or log in using your GitHub account.
Click:Add new site → Import an existing project
Choose GitHub and authorize Netlify to access your repositories.
Select your repository:
my-ai-portfolio
Review the deployment settings and click the Deploy site button.
Netlify will build and deploy your website.
Important Note on Your Live URL
Once the build process finishes successfully, which usually takes a few seconds or up to a minute depending on the project and build queue, Netlify will generate a unique production URL for your website.
It will look something like this:
👉 https://your-site-name.netlify.app
You can share this URL with anyone to show your portfolio website online.
Bonus: How to Make the Contact Form Actually Work?
If you ask Claude AI to create a contact form, it may only provide the HTML, CSS, and JavaScript structure for the form.
A normal HTML/JavaScript contact form will not automatically send emails when someone clicks the Submit button unless it is connected to a backend server or a form-handling service.
Since we are hosting the website on Netlify, one easy option for handling form submissions without building a traditional backend is Netlify Forms.
Netlify Forms can process form submissions from your website, allowing you to receive messages submitted through your contact form.
This means you can build and launch a modern AI-generated portfolio website using a simple workflow:
How to activate it:
Simply add the data-netlify="true" attribute to your HTML <form> tag. Here is the verified code template you can copy or reference in your project:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My AI Generated Portfolio</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #121214;
color: #ffffff;
margin: 0;
padding: 0;
text-align: center;
}
header {
padding: 80px 20px;
background: linear-gradient(135deg, #6366f1, #a855f7);
}
h1 { margin: 0; font-size: 2.5rem; }
p { color: #cbd5e1; font-size: 1.2rem; }
.form-container {
max-width: 400px;
margin: 40px auto;
padding: 20px;
background-color: #1e1e24;
border-radius: 8px;
}
input, textarea, button {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #444;
background-color: #2a2a35;
color: #fff;
box-sizing: border-box;
}
button {
background-color: #6366f1;
cursor: pointer;
font-weight: bold;
border: none;
}
button:hover { background-color: #4f46e5; }
</style>
</head>
<body>
<header>
<h1>Hi, I am a Developer</h1>
<p>This beautiful landing page was generated using Claude AI and hosted via GitHub.</p>
</header>
<div class="form-container">
<h3>Contact Me</h3>
<!-- Functional Netlify Form -->
<form name="contact" method="POST" data-netlify="true">
<!-- Hidden input for Netlify bot detection -->
<input type="hidden" name="form-name" value="contact" />
<input type="email" name="email" placeholder="Your Email" required />
<textarea name="message" placeholder="Your Message" rows="4" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</body>
</html>What happens next?
When you deploy this code to Netlify, it automatically detects the form attribute. Every time a visitor types a message and submits it, the data will be securely saved under the “Forms” tab right inside your personal Netlify Dashboard for free!