4 Things I Learned Using ChatGPT for a Project Website
If you’re less interested in the context/project and just want to skim my take aways/lessons learned, you should click here.
The Problem
Because I can be a bit vain, I wanted to setup a small project website to document my learning journey of using AI (mostly LLMs and some ML) to speed up workflows and explore new creative outlets. While this sounds trivial for those with web development experience, I am not so lucky.
While I have some toy web development experience, I do not currently have the skill to make anything that looks passable, is responsive, and functions correctly with code.
At first, I considered the most straightforward and laborious option — “get good” and just learn the required basics.
While I agree that a deeper understanding of HTML, CSS, JS/TS will be helpful as I progress, and something I intend to learn more about, it wasn’t the best option in that moment. Being filled with New Year’s optimism and energy, I knew I needed a quick win before “quitters’ day.”
As such, my design requirements were akin to a greedy squirrel:
- I wanted something that just worked and was “good enough” in a short span of time.
- I was cheap and didn’t want to pay for hosting/templates for a project I wasn’t entirely sure I was committed to.
- I wanted a degree of separation from emails related to the project (so the ability to use an email other than my personal one.)
As a result, paying for a webhost and running WordPress for CMS was out.
My first solution was a classic example of overengineering a simple problem. With “new year, new me” energy flowing I initially thought — “I could just set up the hosting on a home server, no problem.”
Yeah — that may have been overly ambitious.
After about two hours of reading about how to correctly set up reverse proxies and changes I would need to make to my home network to safely expose the service, I realized it was best left as a separate project for another day.
While the rabbit hole was a fun detour, it left me in a bind — I still had no way to host a project site without spending money. Like The Fairy Godmother in Shrek 2, I was left crying out in need for a hero.
While superman was unavailable, there was another champion — ChatGPT.
My Solution
Given the namesake of the project, and some of the amazing results I saw online, I wondered if ChatGPT (version 3.5) could help me find new solutions that met my use cases and constraints. Turns out, that strategy for this simple project was just the ticket.
While I’m happy with my good enough results for now, it wasn’t entirely smooth sailing. I stumbled into some moments of growth along the way.
I’m hopeful that sharing my experience as a novice with this technology will be helpful for others and present opportunities for kind souls to help me further improve!
I’m aware that it’s been out a whole year, at least in a very public fashion (already!?) As such, I won’t be detailing my process of basic prompting since you have probably played with the tool. Instead, I’ll mostly be reflecting on my experience using it and what I learned.
Things That Worked Well
I think the biggest win for me was ChatGPT quickly helped convert my “unknown unknowns” into “known unknowns.”
Prior to this project, I thought the only two ways to get my desired outcome (a hosted website) was to pay for hosting to then install a CMS like WordPress, or to selfhost the webserver and code. I didn’t know about the GitHub pages option.
I similarly thought the only way to have an email with a custom domain extension was through purchasing hosting and setting it up that way. I was stuck in a misty overpass, unsure of which way to go.
Thankfully, as my problem and potential solutions have been well-worn, ChatGPT was able to quickly find an acceptable solution. As a result, it was able to act like a lantern, helping to illuminate my own areas of ignorance so I could further explore and expand.
While simple or trivial for many, it was an empowering experience for me.
Things That Were Frustrating
Sometimes, even with help, we have to go the long way around to get to our final destination.
Unsurprisingly, one of the first suggestions ChatGPT had produced was more fruitful for me, my skill level, constraints, and intended use case. I didn’t know it at the start however due to a minor (unintentional) hiccup.
In the initial brainstorming session, ChatGPT suggested I use one of the pre-existing static website generator frameworks. The first one I looked at (and was suggested) admittedly was a bit intimidating to me as I have no background with Gems or Ruby, so I balked.
In a panic, I abandoned the proposed plan and tried to set off on my own. Instead, I wanted to see if I could use ChatGPT to create a website in the more traditional way of directly coding HTML, CSS, etc. While the resulting HTML and CSS I asked for with an (admittedly weak) series of prompt was acceptable, the overall website created this way felt stale and unclean.
I attribute this failure to two main issues:
- I’m still learning more effective prompting methods and how to combine prompts with custom instructions.
- I only have a surface level understanding of HTML and CSS, so it was hard for me to know what modifications to make, and what solutions were “good” or “poor” until I had run the code to test and see.
In this case, although the first suggestion was ultimately a good enough solution for me (using a static website template generator) the resource ChatGPT pointed me to wasn’t quite right for my level. As a result, I thought the solution was wrong, rather than that flavor of the solution.
Sometimes, to quote Taylor Swift, “I’m the problem, it’s me.”
However, like a thirsty camel in a dessert oasis, I eventually came crawling back to the initial solution.
Unfortunately, due to my reaction/inexperience and a resource that wasn’t quite right for me, I threw out the entire solution prematurely. As a result, I wasted time trying to go the “old school” route of a custom style instead of sticking with the proposed solution.
While I am frustrated that the wasted time was ultimately due to my error, it did reinforce something valuable. Sometimes the general solution may right, even if a specific implementation doesn’t meet my needs.
My failure in this regard however did help me realize a helpful combination — ChatGPT and Google. As I explore in one of my takeaways, the use of an LLM and Search Engine together for their appropriate tasks can be quite useful.
Thankfully, with this “mighty morphing” combination of Google and ChatGPT I was able to get my desired result.
My Takeaways
ChatGPT can be Great for First Pass Idea Generation and Solution Finding
In my case, there were a lot of unknown unknowns. Previously when using Google, I may have been left to stumble around a bit more. I believe this is due to a strength and weakness of Google — your experience is based on the total knowledge you have of a specific subject so that you can use the correct keywords.
ChatGPT can be a bit more forgiving in this instance as it attempts to frame things in context — even when you may have incomplete information. As someone who was exploring and trying to get a first pass understanding of options in an unfamiliar space, this was invaluable.
If it wasn’t for this approach, I’m not sure I would have discovered the elegant solution it proposed.
For those curious, the result was purchasing a custom domain and then setting up a Zoho free email plan. This allowed me to create an email linked to my custom domain and using that email for a new GitHub account to create a GitHub site.
Admittedly, there may be a simpler route, but this worked for me and let me learn some new things along the way while minimizing my cost, so I chalk it up to a win. It felt like being Neo the first time he saw the Matrix.
Through my experimentation, I’ve noticed that ChatGPT and similar tools still lack that human context and “common sense.” In my case, the suggestions were right on, but sometimes when I was playing around with the tool the provided suggestions were impractical as to be useless (depending on the prompt I used.)
Despite the above caveat, I found using ChatGPT’s ability to quickly highlight common and some unknown (to me) paths as invaluable. In this project, I found the detours to be an ally, but also learned an additional truth. I believe exploration with ChatGPT is like any trekking adventure, the map may be directionally correct, but it’s up to the individual to judge the risk and viability for themselves.
ChatGPT is Great for Getting the TL;DR on Well Documented Procedures
While DNS still feels like voodoo magic, I would have been lost trying to connect Zoho, GitHub, and my custom domain without ChatGPT’s aggregation of the published help pages provided by each service. It saved me a lot of time by getting the “bare essentials” from each that let me push the stone further up the hill.
While this worked great in my use case with using solutions from big companies with good documentation culture, this also exposed a potential dragon. If the solutions I were using were more niche or less well documented, I could have been led astray.
In some side experimentation I did prior to this project, this exact thing happened to me. That failure reinforced a valuable lesson to me, using ChatGPT is like using any other tool — while I may be wielding a hammer, not every challenge I encounter is a nail.
Sometimes ChatGPT Benefits from Collaboration with an Old Friend
In my experience, is was not a case of choosing a search engine or ChatGPT, but a well-choreographed dance between them. I found each tool had it’s strengths that helped move my project along.
After this experience, I feel as though the collaboration between the tools can be thought of as a fisher’s net and fishing line when attempting to accomplish a goal.
Hopefully, you can bear with my analogy here.
Based on a lot of the reading I’ve done and my experience so far, ChatGPT can be great for tactile strikes — like a fishing line. If you’re precise with your request, and it’s well documented, ChatGPT can be quite helpful in filtering down the universe of information to only the essentials.
Similarly, I think of Google a bit more like a fishing net. You need to know the general area to cast your net, but once you’re narrowed down to that level of precision, Google’s “net” helps you capture more variety associated with your query of interest.
This was my experience in my project.
ChatGPT was great at helping me follow a series of steps and get a good enough implementation for setting up the website, but the static generator it suggested wasn’t quite right for me. Using the same thread suggested by ChatGPT, I was then able to “cast out the net” using Google to hunt for the best static generator for my needs.
Like Many Fables with Genies, Be Thoughtful with What You Ask For
I won’t cover this too much as there are smarter people who have covered this in more depth; however, I did relearn this lesson throughout my project. When my asks were poor, the results were similarly poor. When my asks were aligned with my needs and better constructed, the results were much better.
As Cassie Kozyrkov has mentioned in a couple of her videos about prompt engineering, the need to give clear instructions to achieve desired outcomes is still essential and remains.
Whether you’re rubbing an ancient lamp, casting an incantation, consulting with bones, talking with your coworker in cubicle 3, or querying a software tool, the story of better asks leading to better results remains.
What’s Next
I had a lot of fun both building the project site and learning some basic uses of LLM models. So much so, I’d like to continue to explore and I have a few fun projects in mind:
- Help flesh out my home server with more ChatGPT magic
- Learning how to use an AI “copilot” for data analytics
- See how an LLM can be a creative thought partner for invention/product design
If that sounds interesting to you, I’d love for you to join the journey.
Note: All views expressed here are representative of my opinions alone and do not necessarily reflect those of my employers.
