How I rebuilt my personal website in 30 minutes using ChatGPT
How I rebuilt my personal website in 30 minutes using ChatGPT
And learn how you can use ChatGPT to build things for you too
A long required refresh and a challenge
After years of neglect, I recently decided that it was time to refresh my personal website (willbewley.com). A lot has changed since the last refresh five years ago. I don’t use the site to promote anything, drive traffic, or anything else - but it is a landing page where people can find me and contact me.
While I run a technology company - and enjoy some semi-technical projects from time to time - I mostly stick to product, strategy and business development. I leave the complicated stuff to my co-founder, Jordan, and his unstoppable coders.
The last time I rebuilt my site I used that time to explore new technologies and learn about things I thought were cool. I learned about using the Bootstrap framework and how to self-host a page for free using Github Pages. I built the site over a couple of weeks, and really enjoyed the challenge.
While I was happy with the results, there were a lot of pieces that were glued together, and not super optimal. A couple of examples:
I couldn’t figure out how to do some things in Javascript that I wanted to do so I loaded jQuery into the site (this is very bulky compared to native Javascript and overkill for what I needed it for)
After all was done, my site was still pretty horrible on mobile, and I couldn’t begin to unpick everything to make it responsive
So I wanted to rebuild it. I wanted to update the look and feel as well as make it mobile-first and fast.
Given the recent excitement around generative AI, a twist I was excited to try was that I also wanted to experiment and see if I could build it just by using ChatGPT!
Can ChatGPT really be used to build a website from scratch?
I had laid out a challenge that I thought was really interesting. I wanted to test my hypothesis. I knew it would be able to generate some static content but didn’t know how far I could get designing a page using only descriptive prompts. If I kept giving it iterative feedback then surely it would turn out okay?
If what I was reading on Twitter was true; that ChatGPT can help debug code in different languages and complete Google technical interviews, then my site should be a walk in the park for it! If I wrote my prompts correctly I should be able to get ChatGPT to write all the code necessary to get a static website up and running.
How to build a site with ChatGPT
My plan was to start by asking ChatGPT to generate HTML and CSS files for the page. I would upload these into a Github repo and then deploy it to a Github Page.
I realized I needed another step in the process as constantly updating and publishing to Github then waiting to view the changes would take a while. As a visual learner I needed a frontend graphical UI to work adaptively in real time to give feedback back into ChatGPT.
I have used CodePen for projects in the past but I was interested in trying out Replit (given I’ve been following Amjad Masad’s journey building it for a while, and also it looked like a cool way to quickly test a site idea).
My last tool was Loom so I could record the process for my own interest as well as to post this blog about it. So I was ready - armed with my ChatGPT window and a free Replit account - ready to build my site.
What should I build?
Before asking my first questions I needed to set some requirements for the site. When looking at a redesign here were my key specs:
An “about me” section with basic information (profile image, a short blurb, contact details)
Simple, clean, and mobile-friendly design - similar to that of a Notion page
A static, one-page design (no need for extra clutter at this stage)
Performant. It should be lightweight and use limited and native code (no jQuery, no frameworks, no css preprocessors; no overkill!)
I also wanted to see if ChatGPT could generate some cool features for me:
Embed Google analytics
A dark mode toggle (for fun!) - assuming this would require it to also generate me a Javascript file
HTML metadata links for better SEO
That should get us started. Let’s build!
Let’s build!
I jumped in with my first ChatGPT query:
ChatGPT willingly complied:
We were off to the races!
I jumped into Replit and generated a new project - which was insanely simple - they get you up and running in three clicks:
Create > select HTML, CSS, JS template > Create Repl. Here’s what it looks like:
Using the standard names for the HTML and CSS files (index.html and style.css) actually meant that the code from ChatGPT worked right out the gates - without even needing to rename my CSS file - pretty cool!
Okay, all in all not a bad start! It didn’t add an area for a blurb about me (I guess I didn’t explicitly ask for it) - so I added that to the query and also gave it links for my profile image and socials.
Initially the profile image URL didn’t work. I think the added parentheses threw it off. A few small tweaks and CSS formatting requests later I had a pretty great start:
Next, I wanted to try and add my nifty feature - a dark mode / light mode toggle. It was around this time that I was starting to get overly confident in ChatGPT’s ability so I started giving multiple asks in a single request:
This is when I realized I had hit my first limitation - the 4000 token limit of ChatGPT. This meant that while it knows how to answer me, the output it’s generating is longer than the limit (due to the files). When it was responding it would just cut out after providing half the updated HTML and CSS files and not even show the Javascript file:
Luckily, by asking for a file again it was able to regenerate it and provide it. This work around became a pretty consistent feature of my journey from this moment onwards.
Excitingly the site was starting to take hold, and my dark mode button worked straight away!
Getting bullish I asked it to use moon / sun icons for the dark mode toggle. I even told it to use Font Awesome for the icons. Incredibly it managed to generate the CDN link for Font Awesome and selected the right icons for me!
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">It also added icons for Twitter and LinkedIn to the website too! Apparently I was getting some free styling advice from ChatGPT 🤯
Here I gave it more feedback to change the color of the icons to be inverted when the site is toggled between light and dark mode.
End game
The site was looking great and I knew I was close to having something usable. Playing around some more, I asked ChatGPT to add a new section that would embed a Youtube video. Here I’d upload my Loom of how this site was generated.
Wanting to improve SEO, I asked it to generate metadata to make “this site more visable [sic] in Google searches,” and it complied. After launch, when I tested the site in PageSpeed it scored a 100 right off the bat for SEO!
ChatGPT also added Google Analytics to the site (where it gave me a nice step by step in addition to the required code):
After a few small tweaks the site was basically complete:
When checking it on my phone I noticed that the original build wasn’t super mobile-friendly. I simply asked it again in a later query (dropping in the HTML and CSS files into a new prompt) and it fixed it nicely.
I even asked it to add a favicon (I was starting to be pedantic now):
The final product
Final touches: I added in my own blurb (yes, I also asked ChatGPT to finesse it a bit), added a Google font and tweaked the colors. Out of the box the design was great but I wanted a slightly off-white background and after going back and forth I selected (boringly) Inter for the font (as a starting point ChatGPT chose Arial for me).
Through a later ChatGPT query I also added an improved footer.
To get it online I downloaded my files from Replit and created a new repo on Github and added the files - you can check it all out here. The site has 3 files, being the HTML, CSS and Javascript files, as well as my favicon files I generated from Favicon.io.
Here’s the final version of the site that’s live now at willbewley.com:
It also looks pretty good on mobile:
How did I do against my target spec?
After finishing my site, I wanted to review against my stated requirement:
An “about me” section with basic information ✅
Simple, clean, and mobile-friendly design similar to that of a Notion page ✅
A static, one page design ✅
Performant. It should be lightweight and use limited and native code ✅ checking my Github the whole repo came up at a whopping 75KB!
I also wanted to see if ChatGPT could add some cool features for me:
Embed Google analytics ✅
A dark mode toggle ✅ I’m super pleased with how this feature turned out
HTML metadata links for better SEO ✅
How long did all this take?
So, how long did this site take to create and would it have been faster on my own?
The answer: no way! ChatGPT made this site incredibly quickly - even with a few odd inconsistencies and the 4000 token limits.
I estimate the site took a total of one hour to generate and get online:
The main build in ChatGPT and copy/pasting into Replit took 28 mins (which included a 3 minute pause for me to go scare off deer out of my backyard)
I made a few one off ChatGPT queries to get other parts working (improved mobile-friendliness, better footer)
I also did a manual clean up of some CSS and extra HTML elements that were left over after I changed the approach a couple of times
Lastly, I took some time in Github Pages getting my old site switched for the new one
I’m not particularly technical and haven’t written anything in HTML or CSS for a few years. If I were to attempt to do this myself without ChatGPT - with all the refreshers I would have had to run through and all the Stack Overflows I would have had to read, etc - I think this could have easily cost me 20+ hours of time. I certainly couldn’t have built it all in one day. Therefore, I’d estimate that ChatGPT saved me 95% of time it would have taken me to build.
You can see below in my Loom recording the starting time stamp was 15:05 and the finishing timestamp was 15:33 - being the 28 minutes for the main build (I’ve sped the video up through boring parts to make it shorter for viewing.)
Will AI change the world?
In short, 100%. I am a believer. I saw the power of AI in action helping me to create my new site. While this was a small project that was relatively simple, by using off the shelf tools I was able to create a brand new website in a fraction of the time it would traditionally take.
We’re also still in the super early days of LLMs and AI in general. This experiment was super hacky, but there are already thousands of teams building applications on top of these models to make this sort of technology accessible to millions. In a few years that number will be billions and these models will be factorials larger and better. The best is yet to come.
At Woflow, our data scientist and engineering teams are leveraging a few generative AI technologies to complement our proprietary AI models. While still in their early days, our teams are already seeing some really exciting results! If this sort of thing interests you then you might want to check out our Careers page :)