{"id":2106,"date":"2023-04-05T17:03:32","date_gmt":"2023-04-06T00:03:32","guid":{"rendered":"https:\/\/xyzcreativeworks.com\/?p=2106"},"modified":"2023-04-25T03:19:08","modified_gmt":"2023-04-25T10:19:08","slug":"can-chatgpt-build-a-website","status":"publish","type":"post","link":"https:\/\/xyzcreativeworks.com\/can-chatgpt-build-a-website\/","title":{"rendered":"Can ChatGPT Build A Website?"},"content":{"rendered":"\n

Yes, and I have just created a “link-in-bio” website.<\/p>\n\n\n\n

ChatGPT wrote the HTML and CSS. I mostly copied and pasted from ChatGPT to the index.html file.<\/p>\n\n\n\n

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

Why use ChatGPT to build a website? It’s super efficient<\/h2>\n\n\n

I recently got a free domain, heyits.xyz. It needed a simple website to direct people to my main websites.<\/p>\n\n\n\n

If you want to build a very simple website, it might not make sense to spin up WordPress or a CMS. <\/p>\n\n\n\n

You’ll be spending half the time configuring your CMS.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Nah! I got good news. <\/p>\n\n\n\n

If you want to build a simple website, try ChatGPT.<\/p>\n\n\n\n

Here’s what I got.<\/p>\n\n\n\n

\"chatgpt<\/figure>\n\n\n

Creating a general website by prompting and praying<\/h2>\n\n\n

It all started with this prompt.<\/p>\n\n\n\n

Create a webpage with two hyperlinks centered.\nHyperlink 1 says \"Portfolio\" and links to https:\/\/xyzcreativeworks.com\nhyperlink 2 says \"How to Pronounce My Name\" and links to \"https:\/\/howtopronouncemyname.com\"\nBackground color: f6f6f6\nFont-family: Inter<\/code><\/pre>\n\n\n\n
And this is what I got.<\/p>\n\n\n\n
\"chatgpt<\/figure>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Hyperlinks<\/title>\n    <style>\n      body {\n        background-color: #f6f6f6;\n        font-family: Inter;\n      }\n      .center {\n        text-align: center;\n      }\n      a {\n        display: block;\n        margin: 20px auto;\n        padding: 10px 20px;\n        background-color: #fff;\n        border: 1px solid #000;\n        border-radius: 5px;\n        color: #000;\n        text-decoration: none;\n        font-size: 20px;\n        font-weight: bold;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <div class=\"center\">\n      <a href=\"https:\/\/xyzcreativeworks.com\">Portfolio<\/a>\n      <a href=\"https:\/\/howtopronouncemyname.com\">How to Pronounce My Name<\/a>\n    <\/div>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Interestingly, the links are actually buttons that stretch the width of the browser.<\/p>\n\n\n
Asking ChatGPT to modify <a> tags to become <button><\/h2>\n\n\n
I wanted it to look more like buttons. So I further prompted ChatGPT.<\/p>\n\n\n\n
Create a webpage with two buttons centered vertically and horizontally\nButton 1 says \"Portfolio\" and links to https:\/\/xyzcreativeworks.com\nButton 2 says \"How to Pronounce My Name\" and links to <\/strong>\"https:\/\/howtopronouncemyname.com\"\nBackground color: f6f6f6\nFont-family: Inter<\/code><\/pre>\n\n\n\n
Specifying “button” created two buttons. (Code below only shows changed portions)<\/p>\n\n\n\n
\tbutton {\n\t\t\tpadding: 15px 30px;\n\t\t\tbackground-color: #fff;\n\t\t\tborder: 1px solid #000;\n\t\t\tborder-radius: 5px;\n\t\t\tcolor: #000;\n\t\t\tfont-size: 20px;\n\t\t\tfont-weight: bold;\n\t\t\ttext-transform: uppercase;\n\t\t\tmargin: 10px;\n\t\t\tcursor: pointer;\n\t\t}\n...\n<button onclick=\"location.href='https:\/\/xyzcreativeworks.com'\">Portfolio<\/button>\n\t\t<button onclick=\"location.href='https:\/\/howtopronouncemyname.com'\">How to <\/code><\/pre>\n\n\n\n
And the result…<\/p>\n\n\n\n
\"chatgpt<\/figure>\n\n\n\n
Even better!<\/p>\n\n\n
Modifying styles and adding components<\/h2>\n\n\n
I wanted to add a placeholder image so I asked ChatGPT to “Insert a placeholder image above the two buttons”.<\/p>\n\n\n\n
 <\/p>\n\n\n\n
\"build<\/figure>\n\n\n\n
Interestingly, ChatGPT was able to use a placeholder image from placeholder.com.<\/p>\n\n\n\n
\timg {\n\t\t\twidth: 300px;\n\t\t\theight: 300px;\n\t\t\tobject-fit: cover;\n\t\t\tborder-radius: 50%;\n\t\t\tmargin-bottom: 20px;\n\t\t}\n...\n<img src=\"https:\/\/via.placeholder.com\/300x300\" alt=\"Placeholder Image\"><\/code><\/pre>\n\n\n\n
If you noticed, I wanted to use the Inter font. It’s the font I use across my brand.<\/p>\n\n\n\n
It’s not a standard font available on all computers. So, I had to specify it in the CSS.<\/p>\n\n\n\n
I asked ChatGPT to “Add a link to the Inter font file named “Inter-Regular.ttf” and it spat this out:<\/p>\n\n\n\n
@font-face {\n        font-family: 'Inter';\n        src: url('Inter-Regular.ttf') format('truetype');\n        font-weight: normal;\n        font-style: normal;<\/code><\/pre>\n\n\n
Final modifications done by hand<\/h2>\n\n\n
As with all AI projects, you will need to do the final adjustments to ensure perfection.<\/p>\n\n\n\n
Some things I had to change were the <title> and update my placeholder image with my portrait.<\/p>\n\n\n\n
I also had to put Inter-Regular.ttf into the root folder.<\/p>\n\n\n\n
The final HTML is as such:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Hey It's XYZ!<\/title>\n    <style>\n      @font-face {\n        font-family: \"Inter\";\n        src: url(\"Inter-Regular.ttf\") format(\"truetype\");\n        font-weight: normal;\n        font-style: normal;\n      }\n      body {\n        background-color: #f6f6f6;\n        font-family: Inter, sans-serif;\n      }\n      .center {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        height: 100vh;\n      }\n      button {\n        padding: 15px 30px;\n        background-color: #fff;\n        border: 1px solid #000;\n        border-radius: 5px;\n        color: #000;\n        font-family: Inter, sans-serif;\n        font-size: 20px;\n        font-weight: bold;\n        text-transform: uppercase;\n        margin: 10px;\n        cursor: pointer;\n      }\n      img {\n        width: 300px;\n        height: 300px;\n        object-fit: cover;\n        border-radius: 50%;\n        margin-bottom: 20px;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <div class=\"center\">\n      <img src=\"me.jpg\" alt=\"Placeholder Image\" \/>\n      <button onclick=\"location.href='https:\/\/xyzcreativeworks.com'\">\n        Portfolio\n      <\/button>\n      <button onclick=\"location.href='https:\/\/howtopronouncemyname.com'\">\n        How to Pronounce My Name\n      <\/button>\n    <\/div>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n
Hosting a ChatGPT website with Netlify<\/h2>\n\n\n
Since this is a static site, you can host it for free on Netlify.<\/p>\n\n\n\n
It’s more or less two steps:<\/p>\n\n\n\n