Gabrielle.day: Building a website with AI
Gabrielle.day: Building a website with AI
DEAR READER: Welcome back to Dear AI, where the AI and I explore working together on a project! We're building Gabrielle, the AI-powered advice columnist. And today, we take you behind the scenes of making the Gabrielle.day website. They say Rome wasn't built in a day, but guess what? This website was!
It's easy nowadays to build a website in a day. You can create one in an hour with website builders and ready-to-use templates. And you may have seen AI build a website from a sketch in seconds. However, our project is not about speed but exploring the human + AI collaboration.
So we took a day, trying different tools and running into magical and frustrating moments. It became an excellent mini-example of the collaborative journey.
So, grab your virtual hardhat, and read about the site's construction! We'll take you through the day, from AI-assisted design to image generation, coding, and even finding a free hosting solution.
A) Overall design and structure
The day started with a huddle, where ChatGPT and I discussed the goals for the website. We agreed on something simple and professional-looking to encourage people to submit their questions for advice. ChatGPT suggested using a website builder like WordPress or Wix. They both looked promising, with beautiful starting templates and a graphic user interface to customize the website. I found a template I liked on WordPress and continued there.
Next, I needed guidance about what content to include on the website. I turned to ChatGPT, and it gave a clear outline that made sense:
The starting template already had similar sections, like testimonials and products, and I just needed to update the content. ChatGPT helped write that content pretty quickly:
1) A blurb for the hero image at the top: we started with something simple that conveyed what problem Gabrielle helps solve (life...):
2) Three profiles for Gabrielle's team members:
3) Funny testimonials:
Lastly, ChatGPT helped write the FAQ section with questions and answers.
Quick interior design (well, colors and fonts)
We had the website structure and content ready and needed to decorate!
I found an AI color picker called colormind.io. It was easy to use and gave pretty color combinations. ChatGPT agreed with Colormind's professional opinion. I'm not a professional, and it seemed fine, but I also liked the template's original colors. Ultimately, we compromised on something between the starting template and Colormind's choices.
ChatGPT also had advice on the right fonts for headlines and regular text. I tried them out, chose something decent, and we moved on quickly.
B) AI images with Playground.AI
With the website's walls freshly painted, we needed photos to represent Gabrielle's unique flavor of AI wisdom. People would appreciate a face to associate with the brilliant advice.
One of my favorite image-generation tools is Playground AI. The reason is simple - it's free! At least for the first 1,000 images daily - a limit I've never hit, even on my most creative days.
I typed in the following prompt for Gabrielle's photo:
"A realistic studio headshot of Gabrielle, an advice columnist in her early 50's. She's sitting at her desk responding to an email from a writer, and is pensive. HD resolution, beautiful photography, award-winning."
Many things can influence the image result, from the AI model to the prompt to the generation parameters. However, the prompt is often one of the best ways to control what you get. For example, most images didn't include the desk I requested. It happens - the AI sometimes misses pieces. One way to solve that is to put what's missing earlier in the prompt, e.g., "An image of a Gabrielle at her desk..."
But I took another approach in this case - following the AI's lead. I liked the results that focused on the face and let it continue without the desk. Eventually, I saw Gabrielle staring at me.
Then it was on to Gabrielle's teammates. This time, I used chatGPT's descriptions of Lisa, Miguel, and Jane as part of the prompt and again let the model run until the right faces caught my eye.
Playground AI has several more awesome features. For example, if the image you get has bugs like weird eyes or an awkward mouth, "face restoration" can help. "Upscaling" gives higher-resolution versions of the image. And "outpainting" allows you to zoom out of a photo and complete the missing areas around it. In our case, I used it to add more background around Gabrielle's face.
C) Recreating the website in code with Replit
With the draft on WordPress, we could have published it from there. But for the sake of the journey, we decided to rebuild it with code.
To code the website, I turned to Replit. It's become one of my favorite tools to code because it's all in the browser, very easy to use, and you don't have to install anything. Instead, you just choose what language you want to work with, and it sets up a virtual machine that's ready to go. You can also start from one of many templates and user-generated examples.
Replit also has its own AI-powered helper called Ghostwriter. I wondered if it could recreate the website for me, so I asked:
"Hi! I'm building a website for Gabrielle.day. It's an AI-powered advice column. I need a simple website that has the following sections:
Header
Hero image with text
My team section with a selection of 3 columnist personas - each has an image and a description
A testimonial section with 3 customer testimonials
An FAQ section with expandable questions
A footer
I'd like to build with Bulma. Can you start me off with the outline, including the above?"
I let it run... and it worked like a charm! I got this working website in seconds:
That was awesome!
The following steps were frustrating. I mentioned Bulma - a CSS framework that defines essential website elements like buttons, columns, and headers. Those definitions made it easy for Ghostwriter to build the website, but I later struggled when trying to change them.
For example, I wanted to move the website logo to the middle of the header. I asked Ghostwriter to change the code. It gave me an answer that seemed right but didn't work in practice. ChatGPT gave me a similar solution that didn't do anything. The logo stuck to the left of the page like it was superglued.
I continued to fail until I realized the "logo on the left side" was one of Bulma's built-in definitions. Unfortunately, Ghostwriter's and ChatGPT's solutions didn't consider that. When I finally got it, an easy solution was to remove the Bulma definitions for the header and get Ghostwriter to rewrite it.
Struggling through Bulma's presets also burned through my 15 free credits of Ghostwriter. So I returned to the free and practically unlimited access to ChatGPT. Hard to beat that price point - even if it takes a bit more copy-paste. I'm still curious about Ghostwriter and will try it again sometime. Even without it, Replit is a fantastic development environment.
Having overcome the Bulma blunder, ChatGPT and I quickly adjusted the website to look more like the WordPress template. We aligned all the elements and filled in the content.
The next fun thing was I asked ChatGPT to help make the FAQ section interactive. I wanted to have the answers animate into view when a question was clicked. ChatGPT explained this is easy to do with some javascript code and provided the solution.
The best part? ChatGPT added some extra-cool animation. I initially asked for "+" symbols next to each question to indicate they can be expanded. When I ran the code, I discovered that the "+" rotates to become an "x" when an answer is opened, showing that the question can be minimized. ChatGPT had added that little bit of magic all on its own!
D) Feedback... with some AI hallucinations
Before declaring the website done, I asked for ChatGPT's feedback on the code. For some reason, it had two "hallucinations" in there:
Sometimes, conversational AI can generate answers that sound confident but are disconnected from reality, known as "hallucinations." In this case, it imagined that the hero section had black text on a dark blue background. But, in fact, the hero section had white text on a black background, without any dark blue. So I asked chatGPT about it, and it apologized for the mistake:
Similarly, it claimed the images in the "My Team" section were too big, which didn't make sense. So I regenerated the response and got more helpful feedback, like adding a favicon to the site and a call-to-action button, which I eventually added.
I've written before about asking chatGPT for feedback, which is a valuable part of working together. Just be mindful that sometimes hallucinations can pop in, and don't fall into the trap of believing everything it says. Also, if you have any human friends, see if you can ask one of them for a second look.
E) Hosting the website
This part could have gone better. I had all the files ready to go on Replit. I now needed a place where I could host the website. I asked ChatGPT if Google Cloud Platform had any website hosting solutions. The answer was yes! I could do that with the Google Cloud Platform, and chatGPT gave me a complete guide on how to do it.
I followed the guide and uploaded my files to a Google Cloud Storage Bucket. In step 4, the tutorial pointed me to a "website" tab, which didn't exist. I searched and searched and got stuck. I asked for another explanation, and this time got a different set of steps, where I had to find a "bucket details page." That, too, didn't exist. Eventually, I got frustrated and found a detailed walkthrough on the Google Cloud Platform help site.
We already met this challenge with chatGPT - its information is sometimes outdated, given it was trained on data collected in 2021. Fortunately, the official walkthrough was up-to-date with the user interface. No more tabs or pages that don't exist. Even though it was a bit complicated, I got the website up and running!
But, can you find my big mistake in this process?
A few days after I put up the website, I noticed my Google Cloud Billing statement was unexpectedly high. In that walkthrough of setting up the website hosting, I turned on several new GCP services without realizing they came at a daily cost. It wasn't a lot, around $20/month. But part of the reason to write the website from scratch was so I could do this for practically free. Otherwise, I could have stayed with Wix or WordPress hosting.
I rushed to find a solution and wondered how I could have ended up with such a costly hosting option. Did ChatGPT lead me astray? But then I saw the reason - I never even asked. I assumed the correct solution was on Google Cloud, and that's what I asked ChatGPT to do. I finally went back and asked if it had any recommendations for free hosting solutions. It sure did, and I eventually chose Netlify, thanks to chatGPT's explanation that it had a more user-friendly platform.
So this final lesson was - ChatGPT can save you money, but you need to ask!
Conclusion:
And there you have it! The AI and I went from the initial design to an up-and-running website in a day! We designed it, wrote the content, generated images, and wrote the code from scratch - all for free.
What did we learn? Well, a couple of thoughts:
AI can work incredible magic: I loved the single-answer website, the clever FAQ animation, and the content it helped write.
You can't always get what you want: like in the case of the desk missing from the photos. But just as the song says, if you're open to collaborating with the AI... you might find you get what you need.
The AI doesn't know everything: outdated information and lack of context led to frustrations with Bulma and out-of-date instructions.
Hallucinations happen: ChatGPT was so convincing about the blue font on a black background that I thought I wasn’t seeing clearly. So remember to double-check or ask for clarifications.
Overall, it was a fun mini-project to collaborate on! And it shares many similarities with the broader adventure of building Gabrielle. Check out Gabrielle's website to see how it turned out, and let us know what you think in the comments!
Stay tuned for our next posts in this limited series, where we'll tackle writing, marketing, and more topics! If there's anything, in particular, you'd like us to explore, let us know below.
In Gabrielle's words:
"Building a website in a day is like baking a soufflé on a roller coaster. Hang on tight and pray it doesn't collapse!"
Liked this post? Share with others who might like it too!