How I Built a Website for My Dog with ChatGPT Sites
The exact prompts, a moving grass background, and a custom domain
For the last year or two, I kept trying to make my own website. I spent probably $180 on WordPress and another eight or nine hours trying to put together a homepage. I never got a homepage I liked out of it. I kept hearing that WordPress was “so easy” and that “most of the internet runs on WordPress,” which is probably true, but it didn’t make the interface any less miserable for me to use. By hour eight I felt like I needed a certification just to move a picture three inches to the left.
I admire people who can design and build websites. I also know I don’t want to spend the next few months learning that skill before I can write about a book I read. I’ve been using ChatGPT since 2022, and when Sites came out, I decided to give the website one more shot. I spent about 20 minutes learning where things were and how to ask for changes. Then I built the site you’re reading this on in maybe 90 minutes. It was the first time the page in my head and the page on my screen looked remotely related.
So I made a tutorial. I wanted to see if I could start fresh and show every step with a site for my dog, Nacho. He now has a blog, a merch page, and a background where the grass moves when you drag your cursor through it. He has no idea any of this exists, which somehow makes the merch page funnier. I recorded the whole process, from the first draft to getting nachothedog.com working. I’m putting the prompts here exactly as I typed them, including the typos. I’m leaving out the troubleshooting detours. Whenever I refer to a photo or color palette, that image was attached to the original chat.
I started with the websites I kept coming back to
I’d spent enough time staring at websites I liked to know roughly what I wanted, even if I couldn’t build it myself. Tim Ferriss had the kind of navigation I wanted. Seth Godin had a short intro that didn’t make me scroll through a life story to find the rest of the site. James Clear had an app section I liked. So I put those references in the first message, told Sites what Nacho’s website needed to do, and let it take the first pass.
The website brief · 1:05Create a new site with [@Sites](plugin://sites@openai-curated-remote) I want to build a personal website for my dog that will have the following: a blog, a content stream for videos, toy reviews that he unboxes, recommendations for dog toys (blog), treats, lifestyle and more. I attached a reference for the overall color palette for the website. it should be similar to these references: Seth Godin's website (the top section where he has his short intro bio), Tim Ferriss for the overall navigation and organization, James Clear for his Atoms app ad in the page with the iphone.
I sent the forest-green color palette in a screenshot and told it my dog’s name. That second prompt looks comically unhelpful on its own, but there was an actual image attached. I hadn’t yet asked a computer to intuit my favorite shade of grass.
Nacho and the color reference · 3:31My dog's name is Nacho, and here is the color palette
The first preview was something I could actually click. I went through the navigation to see whether links opened real pages or just jumped farther down one enormous page. They were doing the second thing, so I told it exactly what to change. I also had photos of Nacho ready to add instead of letting it guess what my dog looks like.
Navigation, page behavior, and photos · 5:19This looks good and matches the color palette I chose, when clicking into the navigation bar links, I want the links to open new pages instead of pushing down the page, simliar to Tim Ferriss' website. Instead of explore my world change it to "See More" and the "a little more about me" it should say "about me" To The LAtest from my world: when you click latest stories on the right, it should open to another page instead of expanding the section - same when you click "read the story". I want it to go to the actual blog page with this post. I want to swap the places for the app and the "For the Toy Bin & Beyond Section" I want it to be a more compact carousel that scrolls left and right. instead of tiles, I want it to be icons of toys that he likes such as Tuffy Toys, Bark Box Super Chewer Toys, Treat dispensing toys, etc. For the App - I want it to be an ad for an app that is for dog owners to remind/send notifications to their owners that it's time for treats, food, play, etc. I am attaching pictures of Nacho to include in and throughout the website.
Then I went line by line through the homepage
This is where I finally got to do the part I wished I could do during those eight or nine hours on WordPress: point at what was wrong and describe what I wanted instead. I changed the headline, gave the toy section a scrolling row, and named the blog The Dawg Blawg. I made up post and video titles to see what the site would look like with actual content while Nacho continued his demanding schedule of sleeping and looking at the ceiling fan.
The next prompt is long because apparently, once I realized I could just describe the changes, I described every change I could think of. The app copy, toy photos, and newsletter request all went into the same message.
Homepage copy, Dawg Blawg, app, toys, and newsletter · 9:49For the home page change: A good dog's little corner of the internet - to If you touch my ball, I'll bite you Then the next section: Hi I'm Nacho (remove LIfe's pretty paw-some) In the section below small bio: I'm Nacho, I'm a Dogo Argentino (yes thats a real breed) and American Bully mix with my own website. Tell your dog I said "bark", they'll know what it means. For the Notes from the Dog Side Change "The latest from my world" to The Dawg Blawg - I want you to make placeholder blog posts and thumbnails based on the pictures I provided and gave. You can use blog posts examples like "Whine like this to get more treat", "Is the ceiling fan actually the devil?", and "Why hard nylon toys are garbage, and so are squirrels". For the video Section - I want you to also make a dummy youtube video thumbnail for the "Unboxing Diaries" where it's a picture of nacho surrounded boy torn open amazon boxes and toys everywhere, stuffing all over the place. So instead of "Coming to the stream" change it to Videos posted. and make each of the numbered items sound like a youtube title that a dog would have. 10 things every dog should have on vacation, what your collar color says about you, and Top Fish oil snacks for 2026 For the App" change a little nudge - to "Stop The Barking" under it - Get More Treats the subheader that starts with "food. treats." should be - Barking will get you sent to the dog house, so I made this app to remind my human to feed me extra treats, walk me, and annoy him until he does. Instead of "preview the app" i want it to say "Download" FOr the Toy Bin section - I want you to replace each of the icons with actual larger pictures of some of these toys. The bottom most section - mini bio replace A little more nacho with: "Hi I'm Nacho" I am very spoiled and have a pretty great life. If you want to get more treats, play, and go on vacations, subscribe to my newsletter. For the wording: subscribe to my newsletter, make that a hyperlink that will open up a new page to sign up for his newsletter. I added more pictures, please try adding them again throughout the website
When that came back, the homepage was close enough to move on. I wanted the blog and videos to live under one Media tab, with recent posts and videos first, followed by playlists and categories. I also asked it to lose a couple of decorative details that looked good in the first draft but stopped making sense once Nacho’s black-and-white photo was in place.
The Media page · 15:33this is fine for now, on the home page, please remove the "good dog energy always circle right above the picture. Also remove the sniff.play.repeat and arrow. replace the first image with the one titled "Nacho" that is in black and white. For the toy bin and beyond, the images didn't load. Nagivation changes: Meet nacho should just be Nacho, remove come hang out and add a new navigation header called Merch. Lets combine the blog and videos to just "Media" - and that webpage should be similar in layout to Tim Ferriss' site. The top of the page should have 6 most recent Dawg Blawg Posts and below that, the 6 most recent videos. Then underneath it should have video playlists in a carousel that scrolls left and right (Toy Unboxings, Treat reviews, vacation videos), and then blog post categories, make sure it's compact and hyperlinked with the title of the blog post, limit to 8 categories.
While that was rendering, I made dog merch
There’s a stretch in the video where I hop to another ChatGPT conversation and make designs for three hats. I uploaded them to AmazeCommerce so the site could show actual products. These next prompts are for the images, separate from the Sites prompts. They’re here because I show that detour in the video, and leaving it out would make the merch page appear as if Nacho had secretly hired a graphic designer.
Two hat designs · 18:21Create 2 images for me that I will upload into teespring (now Amazecommerce) for 2 hats that I will make. Both are hats that will have the Typewriter text and the first will say Tell Your Dog I Said "Bark", and Nacho Says "Hi" Both should have transparent backgrounds, the first one should have - Tell Your Dog I - on the top line and the bottom line - Said "Bark" - And the second one - Nacho Says - should be the top line and the bottom us "Hi" Please look up the Teespring/Amazecommerce site guidance on resolution, dimensions, DDPI (whatever it is) to ensure they're high quality and meet their criteria.
White text for dark hatsmake another version in white please
A third hat · 19:09lets make one more that says "Don't Touch My Balls" - the top line should be "Don't Touch My" and the bottom is Balls same typewriter effect in white with a transparent background and meeting the resolution requirements for teespring/amazecommerce
The third one is about his toy balls. He is not a generous dog with his toy balls.
Once the product pages existed, I could give Sites the AmazeCommerce shop link and ask it to put each hat on Nacho’s merch page. I wanted the tiles to go directly to each product instead of dropping everyone on a generic store page. In that same message, I made the video tiles look more obviously like videos and asked for the grass effect.
I’d seen a cursor effect on Onlook that looked like lightning moving through a dark cloud. On Nacho’s site, I wanted tall grass reacting as your cursor went through it, as if a dog were running around back there. ChatGPT did make the grass move. There just wasn’t very much of it yet.
Video tiles, merch links, and moving grass · 22:22On the media tab - I want the video section to be more obvious that it's videos. so instead of Nacho in motion make it say "Nacho, on youtube" - and under each of the video tiles, remove "view the video page" and change to "Watch On Youtube". and on each of the video thumbnails, change the playbutton to the youtube button. On the merch page, I want you to populate it with the 3 products that are available at this website with the same featured images, so when you click on the product, it'll redirect you to the respective product page (not the all products page) link: https://app.amazecommerce.com/shop/nachothedog Throughout the website, i want to add an effect to the background similar to the Onlook website, where it has a dark cloud at rest and when you move the cursor around, you see this colorful subtle thunder before it returns to rest. For this website, i want to have a similar effect - but have it be tall grass that moves with the cursor as if a dog is running in the grass
More grass · 24:08This looks great, I love the animation I want the grass to be more densely populated because right now it's a bit sparse
Then came the custom domain
I’d bought nachothedog.com through GoDaddy while the site was rendering. The site itself still had a long temporary address, so I asked ChatGPT to walk me through publishing it and connecting the name I’d just bought.
The domain I bought · 24:59I purchased a custom domain through GoDaddy for this, It's Nachothedog.com. Walk me through step by step for connecting this domain and publishing the website
I also confirmed that I wanted anyone to be able to visit. Eventually I published the existing Site through a separate chat. I’m leaving the publishing-error prompts out of this post; the successful request below is the one that pointed Sites to the project I’d already made.
Public accessYes I want it to be publicly accessible to everyone. So what do you need first
Publish the existing Site · 25:18[@Sites](plugin://sites@openai-curated-remote) [Nacho — A Good Dog’s Journal](sites-project://appgprj_6ae21aa7252c819187111c1125658186) publish this site
With the site published, I went back to the domain question.
Connect nachothedog.com · 25:56The site has been published, now what information do you need from me in order to connect the custom domain that I purchased (nachothedog.com)
In GoDaddy, I opened the DNS tab and took a screenshot of the records. ChatGPT told me which ones to change and which ones to add. For my domain, that was three changes and four additions. The column names didn’t perfectly match what I was looking at in GoDaddy, so I checked the record type, name, and value one by one. I left the TTL at its default of 600 seconds.
The values for your domain will be different. Copy the values Sites gives you for your site, and compare them against the fields in your own DNS screen. Mine briefly showed a not-found page after I saved the records. Then I waited, tried nachothedog.com again, and it worked. I still couldn’t explain DNS to you at a party. But I could find the record, copy the value, and see my dog’s website show up at the address I bought.
Nacho now has a blog, moving grass, and a place to sell hats. I spent longer trying to arrange one homepage in WordPress than I spent making an entire website for a dog who doesn’t know what a hat is.
Loading comments…