How I AI-Generated my Blog

How I AI-Generated my Blog

I'd like to preface this by stating that this will not cover the entire process of buying a custom domain or setting it up to work with Github Pages. I'll be focusing on the AI-generated code and how I used Cursor to generate it.

Cursor is a powerful AI-powered code editor that can generate code for you. Whether it's the chat mode or the composermode, Cursor can become your best friend. I used this to my advantage to generate this blog. I started by writing a descriptive prompt that told Cursor what I wanted my blog to look like and the features I wanted it to have.

I didn't need to use Vue.js, but since my job utilizes it, I figured it would be a good idea to learn it. Since I'm hosting from Github Pages, I needed to use Nuxt.js as well to generate the static pages.

For reference, the following text was the prompt I started with:

For now, ignore the 3 existing files. I'd like a website for a tech blog. It should utilize Vue.js and should support github markdown as well as mermaid diagrams in the actual articles.

Pages themselves should probably be markdown filess that are posed as a webview on top of a template background and stored in a pages parent folder and then organized further into dated child folders with the format of yyyy-mm-dd.

It should have a minimal amount of frameworks and modules as it will be hosted on Github Pages. In order to host it there, you may need to implement something like Nuxt in order to do static html page generation. 

Additionally, any dependencies should be current. No deprecated dependencies should be added.

I don't claim to be a master at prompting, because I spent the next hour and a half tweaking what it spit out. The 3 files I told it to ignore were my CNAME (for my custom domain), a github workflow file I copied from someone else (I'll link the source below), and a index.html.bak that I kept in case this whole project went south and I needed to revert to the old index.html.

I don't even know if mermaid works yet, but I'll give it a try now:

It doesn't appear to in the preview panel, but maybe fixing it will be a topic for my next article.

How about a powershell script?

Get-Process | Select-Object -Property Name, Id, CPU, Path | Format-Table -AutoSize | Sort-Object -Property CPU -Descending

My Inexperience Showed

Once my prompt was in place, we were off to the races. Cursor started to do its thing.

The first issue was that although I did specify that I wanted no deprecated dependencies, there were about four or five that it added. I restated my demand and copied the list of dependencies that npm install declared as deprecated into the prompt.

It also recommended that I add a compatibility date to my nuxt config file, so I did.

Then the rest of the time was spent tweaking the package.json and the nuxt.config.js file.

It kept having an issue with a rollup dependency when it ran npx as part of the build step in the workflow I mentioned. It was expecting a linux specific rollup dependency, but I'm on Windows. Instead of doing this via the package.json, I added a generic rollup to that file and I added the linux rollup dependency as an install that occurs directly in the workflow file.

It's far from done at this point, but it's a start. I'll likely work on either the mermaid issue next, or modernizing the homepage. It could use a title bar and a menu to navigate the site with maybe an "about me" page, a socials page, and maybe a page for my email and Swipe donation button.

I'm looking forward to it. Until next time, happy coding!

• Dakota Lewis