How to create a personal website on GitHub Pages using ChatGPT

AI makes things easier over time, and ChatGPT is a good example of this. Now we can create websites within a short time. We no longer need to write the code from scratch because ChatGPT has changed the game. ChatGPT might not be able to create a full-fledged website for us, but it definitely provides a moderate website, and we can customize it according to our requirements.

Before creating the website, we must log in or sign up with ChatGPT. We can start using ChatGPT by prompting a question in the message box and sending a request by hitting the “Enter” button. This is the basic way to use ChatGPT. Now let’s divide this Answer into two steps:

  1. Creating a personal website

  2. Hosting a website on GitHub Pages

Let’s get started!

Creating a personal website

Creating a website involves multiple prompts. We’ll see the prompts that help achieve the goal of site creation. Let’s start with the first prompt that will help us define the scope of our website because a personal website can be of many types.

  • Prompt: “What are the most common types of personal websites?”

In response to the above query, ChatGPT extracts the most common types, as given below.

Types of personal websites
Types of personal websites

Let’s select a portfolio website. Next, we need to define the outline of our website. We can execute the following sample query in the message box to define the outline:

  • Prompt: “Generate an outline of the portfolio website for a programmer.”

ChatGPT generates the outline for our website, as given below:

As we can see above, ChatGPT helps us create an outline or structure for our website. We can also add or remove the features if we want to. Let’s follow these steps for generating the code for the programmer portfolio website:

  • Prompt: “Generate the HTML code for the programmer portfolio website.”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Programmer Portfolio - [Your Name]</title>
</head>
<body>
	<header>
		<h1>[Your Name]</h1>
		<nav>
			<ul>
               <li><a href="#about">About</a></li>
               <li><a href="#experience">Experience</a></li>
               <li><a href="#projects">Projects</a></li>
               <li><a href="#contact">Contact</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<section id="about">
			<h2>About Me</h2>
			<p>[Write a brief introduction about yourself and your career goals.]</p>
		</section>
		<section id="experience">
			<h2>Experience</h2>
			<ul>
				<li>
					<h3>[Job Title]</h3>
					<h4>[Company Name] | [Location]</h4>
					<p>[Job Description and your contributions to the project or the team.]</p>
				</li>
				<li>
					<h3>[Job Title]</h3>
					<h4>[Company Name] | [Location]</h4>
					<p>[Job Description and your contributions to the project or the team.]</p>
				</li>
			</ul>
		</section>
		<section id="projects">
			<h2>Projects</h2>
			<ul>
				<li>
					<h3>[Project Title]</h3>
					<p>[Brief description of the project and your role in it.]</p>
				</li>
				<li>
					<h3>[Project Title]</h3>
					<p>[Brief description of the project and your role in it.]</p>
				</li>
			</ul>
		</section>
		<section id="contact">
			<h2>Contact Me</h2>
			<form action="/" method="GET">
				<label for="name">Name:</label>
				<input type="text" id="name" name="name">
				<label for="email">Email:</label>
				<input type="email" id="email" name="email">
				<label for="message">Message:</label>
				<textarea id="message" name="message"></textarea>
				<input type="submit" value="Send">
			</form>
		</section>
	</main>
	<footer>
		<p>&copy; [Year] [Your Name] - Programmer Portfolio</p>
	</footer>
</body>
</html>

ChatGPT creates this code within a few minutes. Let’s verify this code in the following widget.

To improve the website, we need to add some styling. We can add styling to our website using CSS. We use the following statement to get the CSS of the code above.

  • Prompt: “Generate the CSS code for the HTML page above.”

/* Reset default styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* Body styles */
body {
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	background-color: #f7f7f7;
	color: #333;
}
/* Header styles */
header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
header h1 {
	font-size: 24px;
	font-weight: bold;
	margin-right: 30px;
}
nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}
nav li {
	margin-left: 20px;
}
nav a {
	color: #333;
	text-decoration: none;
	transition: all 0.3s ease;
}
nav a:hover {
	color: #007bff;
}
/* Main styles */
main {
	padding: 40px;
}
section {
	margin-bottom: 40px;
}
section h2 {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
}
ul {
	list-style: none;
}
li h3 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 5px;
}
li h4 {
	font-size: 16px;
	color: #888;
	margin-bottom: 15px;
}
li p {
	margin-bottom: 15px;
}
/* Contact form styles */
form label {
	display: block;
	margin-bottom: 5px;
}
form input,
form textarea {
	display: block;
	width: 100%;
	padding: 10px;
	border: 2px solid #ccc;
	border-radius: 4px;
	margin-bottom: 20px;
	font-family: inherit;
	font-size: inherit;
}
form input:focus,
form textarea:focus {
	border-color: #007bff;
}
form input[type="submit"] {
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 10px 20px;
	cursor: pointer;
	transition: all 0.3s ease;
}
form input[type="submit"]:hover {
	background-color: #0062cc;
}
/* Footer styles */
footer {
	background-color: #333;
	color: #fff;
	padding: 20px;
	text-align: center;
}
footer p {
	margin: 0;
}

ChatGPT creates the CSS for the website creater earlier. Here, ChatGPT’s strength is that it remembers the previous prompt. For example, if we create a website via ChatGPT and miss an important requirement in the website, then we just need to prompt that specific requirement in the message box, and ChatGPT creates a response accordingly.

Let’s verify this code in the following widget.

Next, we can add some validation to the form submission. Form validation can be done via JavaScript. So now we prompt the following message into the chat box.

  • Prompt: “Generate JavaScript code for form validation for the programmer portfolio website we created earlier.”

function validateForm() {
   var name = document.getElementById("name").value;
   var email = document.getElementById("email").value;
   var message = document.getElementById("message").value;
  if (name == "") {
    alert("Please enter your name.");
    return false;
  }
  if (email == "") {
    alert("Please enter your email.");
    return false;
  } else if (!validateEmail(email)) {
    alert("Please enter a valid email address.");
    return false;
  }
  if (message == "") {
    alert("Please enter a message.");
    return false;
  }
  return true;
}
function validateEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email);
}

Along with this code, ChatGPT also tells us where we should place this code, and some explanation for it. Let’s test this validation by adding the code in the index.js file, as given below.

After this, we can improve our site by adding the Bootstrap carousel. ChatGPT will create the code for us and guide where to place the code. Let’s execute the following prompt:

  • Prompt: “Add Bootstrap carousel to the programmer portfolio website we created earlier.”

Add these lines for Bootstrap to work properly:

// Add Bootstrap CSS file 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
// Add Bootstrap JS file
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

Add this piece of code to the HTML document:

<section>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
    <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/1200x400?text=First+slide" class="d-block w-100" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some text goes here that describes the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/1200x400?text=Second+slide" class="d-block w-100" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some text goes here that describes the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/1200x400?text=Third+slide" class="d-block w-100" alt="Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some text goes here that describes the third slide.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>
</section>

Also, add the following script to enable the Bootstrap carousel:

 var myCarousel = new bootstrap.Carousel(document.getElementById('myCarousel'));

Let’s test the carousel code that ChatGPT generates for us. We added the carousel code after the <header> tag in the following widget:

Woohoo! We successfully added the carousel to our existing functionality. At this point, we know how we can improve our website by asking multiple queries of ChatGPT. Further, if we want to remove the slide number from the carousel, we can ask for the following.

  • Prompt: “Can you please remove the slide number from the carousel?”

.carousel .carousel-indicators {
  display: none;
}

As we can see above, we directly asked ChatGPT to remove the slide number from the carousel. Of Course, ChatGPT can’t remove the slide number directly from the website. The query is slightly incorrect, but ChatGPT still understands the prompt and gives us the relevant response.

Let’s add this piece of code to our previous executable.

We can add different styling and JavaScript to this website to make it more interactive. In this Answer, our focus is on giving an idea of how ChatGPT is used to create a personal website.

Now we’ll move to the next part of this Answer: hosting a website on GitHub Pages.

Hosting website on GitHub Pages

GitHub gives the option of free hosting for a website. Let’s prompt ChatGPT to provide the steps for hosting a website on GitHub Pages.

  • Prompt: “How to host this website on GitHub Pages?”

ChatGPT generates the following steps for hosting a website:

Create a new repository on GitHub. Make sure to name it <your-username>.github.io, where <your-username> is your GitHub username.
1 of 4

That’s it! Our website is ready and hosted on GitHub Pages. This website is publicly accessible for now. ChatGPT provides valuable suggestions to help us get the work done and make web development faster and easier for us.

Unlock your potential: ChatGPT for everyday tasks, all in one place!

To continue your exploration of ChatGPT for everyday tasks, check out our series of Answers below:

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved