Building My Blog with AI: No Coding for 10 Years? No Problem!

With the rapid changes the Marketing & Technology domains are going through, especially with the advent of AI, I felt the capabilities which were becoming accessible right in front of us grew quickly and were ready for the taking.

As such, I’ve decided to start a first project using these new capabilities unlocked by AI. With my background in any form of development being roughly 10 years behind me, I thought this would be a great task to start exploring this era we’re entering in.

“Rules” for my project

As much as I was motivated to start my project, I did not want this project to be yet another WordPress site… I’ve done plenty of those in the past. This should be an actual challenge with modern technologies where I am completely blind. Additionally, I wanted to keep the pricing to a minimum… Especially in this economy!

Starting with the design

When I first had the idea to start this website, I wanted to first visualize how the site looks like. I already knew the title would be Pixels in Suits, having dabbled with the idea of starting a blog about my passion in the past. I wanted a nice design which would properly reflect the theme I had for my blog, which the name encapsulates adequately I believe: putting technology at the serve of business, without being boring (and without opening designing tools)!

So I went ahead and tried many different models, telling them approximately what I wanted. If I had to restart, I would spend more time planning the initial prompt for sure. Back then (around the beginning of June 25), I tried the free versions of Gemini, Claude, ChatGPT & v0.

Out of these 4, one very clearly outperformed the others: v0 from Vercel. From my findings, Gemini created a design which was way too basic… While Claude had created a front-end which was way too complex. ChatGPT was pretty much in-between. And then, v0. If I were to associate a specialty to each tool, v0 would definitely be a front-end designer.

At first we (v0 and I) thought about going in a very “fun” direction, with an animated pixel landscape at the bottom of the page, an animated terminal and so on. But after reflection, we were going out of the main goal. A few prompts later with better framing around the idea and we had something I was already content with.

Once the main page was built, it was fairly easy to have it build other pages such as the Articles list and the About page while maintaining theme consistency.

Turning the design into a working website

Having the design in hand was great, it gave me a clear view of what I would be building. However, up to this point, everything was hard coded (static)… Not really a blog if we can’t add any content.

As such, I went ahead and started to chat with the models that were available to me. For this task, v0 was too limited unfortunately… We also run out of prompts very quickly on the free version.

After some testing, I ended up focusing on ChatGPT for the task. At first, I wanted to find the best way to handle content updates. PayloadCMS came during our conversations and after looking a bit more into it, I was sold. This was exactly what I was looking for in terms of features and flexibility.

So we started developing… Or more likely, I would be asking what I wanted and ChatGPT would try its best to tell me how to achieve it. It walked me through the installations required to run PayloadCMS and how to implement it, set up the collections needed to run my design properly and so on.

Very quickly, I realized it was best to give it the tree of my site when starting a new conversation with this command from the terminal, which built a tree of all my files in their respective path while excluding the node_modules and .next folders:

tree -a -I node_modules -I .next

tree -a -I node_modules -I .next

Now, I would say this experience was … not the best. Having to constantly remind the model about the project, copy & paste the code every time we wanted to do something, debug while fighting against the context loss was not the ideal situation. But it was free and I would eventually get where I wanted to be every time.

At this part of the project, I would recommend setting up a Github right away and start using the version control system… Sometimes, the models get tunnel vision on how to fix an issue and go way too far, destroying your code while doing so. Without a proper VCS, a lot of time can be wasted. To do so, simply head to the Github website, create an account and then ask the model to help you set up the github for your project.

After a few weeks, I finally had a working website that looked good, handled the creation of content properly and was ready to deploy!

Deploying the site… the nightmare

Deploying the site was quite frankly the worst part of the project. To stay true to my rules, I decided to use a VPS which I got quite cheap from Hetzner. I used the Perplexity tool to find this provider and set up the VPS and it worked pretty well at first.

Once the VPS was set up, I had to get my domain name to expose my site to the right URL. For this, I chose namecheap and once again, pretty straightforward. Setting up the configurations to use my domain name to reach my VPS was also handled by querying Perplexity, same as setting up the SSL for my domain.

The problems started when I wanted to deploy my website to the VPS. At this point, I quickly learned that very small things can completely block us from deploying… And ChatGPT struggled heavily to help me deploy the site. At some point, I decided to move away from ChatGPT and use Gemini instead. This quickly proved to be a better solution as it was able to fix a bug I had been working on for 2 days in 30 minutes!

After deployment, I couldn’t run my development environment on my local machine anymore. ChatGPT kept focusing on the versions of my dependencies while the issue was actually much deeper. Simply put, my NPM tool, which was installed globally on my local machine, was causing a conflict.

After some time, I was finally able to have the proper environment where:

• I can make updates to my code locally then push with Git
• I can pull the updates from Github from my VPS
• The website is running on PM2 to stay active

And this is how I was able to build this website. What a ride! But I’ve learned a ton doing this exercise!