Can ChatGPT Build A Website?

Yes, and I have just created a “link-in-bio” website.

ChatGPT wrote the HTML and CSS. I mostly copied and pasted from ChatGPT to the index.html file.

But just like all AI products, you’ll eventually have to “bring it home” by modifying bits and pieces to attain perfection.

Why use ChatGPT to build a website? It’s super efficient

I recently got a free domain, heyits.xyz. It needed a simple website to direct people to my main websites.

If you want to build a very simple website, it might not make sense to spin up WordPress or a CMS.

You’ll be spending half the time configuring your CMS.

Writing code by hand is also pretty tedious, even for a simple site. There’s lots of referring to the docs and trial-and-error.

Nah! I got good news.

If you want to build a simple website, try ChatGPT.

Here’s what I got.

chatgpt builds link in description website

Creating a general website by prompting and praying

It all started with this prompt.

Create a webpage with two hyperlinks centered.
Hyperlink 1 says "Portfolio" and links to https://xyzcreativeworks.com
hyperlink 2 says "How to Pronounce My Name" and links to "https://howtopronouncemyname.com"
Background color: f6f6f6
Font-family: Inter

And this is what I got.

chatgpt builds website with two anchor links

<!DOCTYPE html>
<html>
  <head>
    <title>Hyperlinks</title>
    <style>
      body {
        background-color: #f6f6f6;
        font-family: Inter;
      }
      .center {
        text-align: center;
      }
      a {
        display: block;
        margin: 20px auto;
        padding: 10px 20px;
        background-color: #fff;
        border: 1px solid #000;
        border-radius: 5px;
        color: #000;
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <a href="https://xyzcreativeworks.com">Portfolio</a>
      <a href="https://howtopronouncemyname.com">How to Pronounce My Name</a>
    </div>
  </body>
</html>

Interestingly, the links are actually buttons that stretch the width of the browser.

Asking ChatGPT to modify <a> tags to become <button>

I wanted it to look more like buttons. So I further prompted ChatGPT.

Create a webpage with two buttons centered vertically and horizontally
Button 1 says "Portfolio" and links to https://xyzcreativeworks.com
Button 2 says "How to Pronounce My Name" and links to "https://howtopronouncemyname.com"
Background color: f6f6f6
Font-family: Inter

Specifying “button” created two buttons. (Code below only shows changed portions)

	button {
			padding: 15px 30px;
			background-color: #fff;
			border: 1px solid #000;
			border-radius: 5px;
			color: #000;
			font-size: 20px;
			font-weight: bold;
			text-transform: uppercase;
			margin: 10px;
			cursor: pointer;
		}
...
<button onclick="location.href='https://xyzcreativeworks.com'">Portfolio</button>
		<button onclick="location.href='https://howtopronouncemyname.com'">How to

And the result…

Even better!

Modifying styles and adding components

I wanted to add a placeholder image so I asked ChatGPT to “Insert a placeholder image above the two buttons”.

build your own link in bio website with chatgpt

Interestingly, ChatGPT was able to use a placeholder image from placeholder.com.

	img {
			width: 300px;
			height: 300px;
			object-fit: cover;
			border-radius: 50%;
			margin-bottom: 20px;
		}
...
<img src="https://via.placeholder.com/300x300" alt="Placeholder Image">

If you noticed, I wanted to use the Inter font. It’s the font I use across my brand.

It’s not a standard font available on all computers. So, I had to specify it in the CSS.

I asked ChatGPT to “Add a link to the Inter font file named “Inter-Regular.ttf” and it spat this out:

@font-face {
        font-family: 'Inter';
        src: url('Inter-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;

Final modifications done by hand

As with all AI projects, you will need to do the final adjustments to ensure perfection.

Some things I had to change were the <title> and update my placeholder image with my portrait.

I also had to put Inter-Regular.ttf into the root folder.

The final HTML is as such:

<!DOCTYPE html>
<html>
  <head>
    <title>Hey It's XYZ!</title>
    <style>
      @font-face {
        font-family: "Inter";
        src: url("Inter-Regular.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
      }
      body {
        background-color: #f6f6f6;
        font-family: Inter, sans-serif;
      }
      .center {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      button {
        padding: 15px 30px;
        background-color: #fff;
        border: 1px solid #000;
        border-radius: 5px;
        color: #000;
        font-family: Inter, sans-serif;
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
        margin: 10px;
        cursor: pointer;
      }
      img {
        width: 300px;
        height: 300px;
        object-fit: cover;
        border-radius: 50%;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <img src="me.jpg" alt="Placeholder Image" />
      <button onclick="location.href='https://xyzcreativeworks.com'">
        Portfolio
      </button>
      <button onclick="location.href='https://howtopronouncemyname.com'">
        How to Pronounce My Name
      </button>
    </div>
  </body>
</html>

Hosting a ChatGPT website with Netlify

Since this is a static site, you can host it for free on Netlify.

It’s more or less two steps:

Point your domain to Netlify
Upload the folder with your index.html, font, image

Steps to upload your website to Netlify

Here are the steps to manually deploy your static website on Netlify:

Create a Netlify account if you haven’t already.
Once you’re logged in, click on the “New site” button on the dashboard.
Choose “Drag and drop your site folder” and select the folder where your static site’s files are located.
Configure the necessary build settings for your static site. If you have a simple static site without any build process, you can skip this step.
Once you’ve configured the build settings (if necessary), click on the “Deploy site” button.
Netlify will build and deploy your site. Once the deployment is complete, you’ll be given a URL where your site is hosted.

How to point your domain to Netlify

Log in to your domain registrar’s website and navigate to your domain’s DNS settings. This may be called “DNS management”, “Name servers”, or something similar depending on your registrar.
Add a new DNS record for your domain. Frankly, you’d be better off just reading Netlify’s docs on how to set this up.
Save the DNS record(s) and wait for them to propagate, which may take up to 24-48 hours.

Another method to create and host website for free

AI is amazing but if you want something that can be easily edited in the future, you’re going to need better methods.

I have a tutorial on creating a zero-running-cost WordPress website that I have successfully commercialized.

If you expect regular changes, then having a CMS might be a better choice.

More AI tutorials

Can’t Write? Prompts To Write A Business Plan With ChatGPT

ChatGPT Can Summarize Articles! (3 Prompts For Great Output)

How To Use AI To Write Articles (Using Make & ChatGPT)

SDXL, CFG, Sampling Steps Sweet Spot

RealVisXL, CFG Scale and Sampling Steps Sweet Spot

How to keep face in Stable Diffusion with ReActor

Have a project in mind?