How-To

Using Vibe Coding to Create a Website

In a previous article, I described how I used GitHub to create and host a free, cloud-based web page, as I wanted a central hub for my work and an opportunity to experiment with AI coding and to see if I could host it for free. I chose GitHub Pages to host it for its simplicity and support for static sites. I used ChatGPT to generate HTML code for a straightforward "Hello World" web page. I then set up a local GitHub repository to manage updates.

In this article, I will discuss my experience creating the code that I used to generate the page's content.

Vibe Coding
To create the HTML code that lists my articles, I wanted to use a Vibe coding methodology. At first, I thought that Vibe coding wasn't an official technical term. I felt it was more of a cultural or slang expression I had heard about. However, after further research, I discovered that "Vibe Coding" was first introduced into the lexicon at the beginning of 2025 by AI researcher Andrej Karpathy. He used it to describe using an AI assistant to write code.

Vibe coding, at its core, typically means coding without a strict plan, allowing intuition or "the vibe" to guide you rather than following a detailed design document or a rigid methodology. It is basically about experimenting with ideas quickly and seeing what feels right, which is often a valuable approach, particularly for prototypes or personal projects. It is about quickly creating code to discover what works, test concepts, or learn something new without worrying too much about polish at first.

This applied to me as I didn't have a formal design document for my project and just wanted to hack together some dirty code to generate my page. As I am a part-time coder and didn't want to do a complete syntax refresh, I figured I could use AI to create the code I needed.

First Decisions
My thought was to create a spreadsheet containing the basic information about the content (articles and such) that I had created. The spreadsheet would include the content's name, URL, and creation date, and other details. I would then run a program against the JSON file to create the HTML code for the web page.

I considered which programming language to use and chose PowerShell, as I would be working primarily from a Windows laptop, had some familiarity with the language, and was aware of its numerous built-in functions that would aid in creating the HTML file.

I looked at various AI PowerShell development platforms. After reviewing them, I found that they were either too expensive or overly complicated for my task, so I decided to use ChatGPT to develop the code and then paste it into Windows PowerShell ISE.

After reading about using AI to generate code, I developed some general guidelines for generating the code, including being specific about my goals, defining what I would use as input and what I would expect as output, and requesting step-by-step comments in the code. However, the two most important were to iterate in small chunks and always review generated scripts before running them.

Creating a List of my Articles
For the web page, I would need a list of the articles that I had written over the years. I would need to extract the article's name, URL, and publication date.

Getting a list of the articles seemed like an easy thing to do, as Google allows you to check a specific site for keywords. In my case, I would use this to search the various sites that I have written for the keyword "Tom Fenton." An example of this would be site:https://virtualizationreview.com/ "tom fenton"

[Click on image for larger view.]

I also found a way to sort this list by date. An example of this would be

site:https://virtualizationreview.com/ "tom fenton" before:2025-10-01 after:2025-1-1.

This generated a list of articles, and I thought I could easily parse out the information I needed by examining the code. However, I found that Google discourages this by obscuring the HTML output. Fortunately, many people have found ways around this by "Scraping" the web page for the data. After trying various scrapers, I settled on "Easy Scrapper," a free Chrome browser extension that worked very well for extracting the fields I needed into a CSV file.

[Click on image for larger view.]

Using this tool, I created a CSV file containing a list of my articles.

Tom Tip - Easy Scraper can automatically extract results from multiple pages of search results. I find this helpful, as my results spanned multiple pages.

I stored the CSV file in the same local folder as my code, so it would also be stored on GitHub.

Vibe Programming Using AI
I opened the CSV file in Excel, made a few more changes, and saved it as a CSV. This is when I use AI to start my AI-assisted vibe coding and convert it into an HTML page.

The first prompt I entered into ChatGPT was

Create a PowerShell script to convert the contents of a CSV file to an HTML web page, using the first line of the file as the name of the column, and make a clickable link to a URL. Document what the code does. 
[Click on image for larger view.]

A few seconds later, it came up with not only the code but also documentation and sample usage.

[Click on image for larger view.]

After storing the page, examining the code, and running it in Windows PowerShell ISE, it produced the following page.

[Click on image for larger view.]

I was genuinely surprised that it produced the page without any issues! I knew I wanted to modify the page output, so I committed the pages to GitHub and asked ChatGPT to alter the code to do the following.

  • Add a title to the page "Tom Fenton's Past Articles"
  • Sort the output by "Article Date"
  • Add a column to the output for each article that lists the website of the article, call it "Article Website"

Not only did it make those changes, but it also came back with some suggestions.

[Click on image for larger view.]

I responded yes, and it then came back with this.

[Click on image for larger view.]
I downloaded the new code, but when I tried to run it, I got various error messages. I pasted the messages in and asked it to correct them. I came back with the following.
[Click on image for larger view.]
After a few more interactions with ChatGPT, I developed a web page that I was satisfied with. Below is a screenshot of it; you can view it live on Tom Fenton's Past Articles.
[Click on image for larger view.]

Now that I have the page developed, all I need to maintain it is to add my new articles to my CVS file in Excel, run the PowerShell script, and commit the changes to GitHub.

What Does It Cost to Generate AI Code
As this article was going to press, I came across an article comparing the performance and cost-effectiveness of three popular AI models for building a functional Tetris game from scratch. This revealed the differences they had in pricing and quality: DeepSeek was the most affordable at approximately $0.005, though it failed to produce a playable game on the first attempt; GPT-5.2 cost about $0.07 but provided a poor user experience; and Claude Opus 4.5 was the most expensive for a single successful run at $0.09, yet it was the only one to deliver a polished, playable game immediately.

Tom's Tip - the author concluded that while DeepSeek is significantly cheaper, the "hidden cost" of debugging failed code makes high-performing models like Claude Opus more efficient for professional daily coding tasks.

Final Thoughts
In these two articles, I wanted to share how I used GitHub Pages and a Vibe coding methodology with AI to create a free web page.

I found GitHub pages easy to set up and work with. Initially, I thought I would use Git-SCM and the command line to work with and upload my files, but after trying GitHub Desktop, I found that its ease of use led me to prefer it.

I know that this project was a very minimal example of using Vibe coding and AI to create a program, but I was genuinely impressed with how easy it was to use. In the past, for both professional and personal coding projects, I would spend hours or even days creating specifications, and then more days writing code. With this project, I conceived the idea, fed prompts into an AI engine to generate the code, and refined it until I achieved the desired output in an hour or two. The AI engine even prompted me with suggestions, and when I encountered debugging issues, it diagnosed and corrected them. It even provided documentation for the program.

Tom's Tip - I would not suggest using this method for large formal projects, as a formal, structured methodology is still required. However, for one-off and proof-of-concept projects, it worked well.

After working on this project, I can see why using AI as a coding assistant has gained significant traction with coders. Additionally, as someone who works from home, I don't have the opportunity to bounce ideas off others and have them review my code to help debug it. AI also helped with this aspect. I would not suggest running code without verifying its validity and security. Although nothing can replace the tribal knowledge of coders with years of experience, I do see why AI code generation has become so popular.

Featured

Subscribe on YouTube