My Journey of Building and Enhancing My Personal Website with Innovative Tools
In an attempt to blog more frequently, I thought I would give a run down on how I update my personal website; from writing a blog to deploying it. This is by no means ground-breaking but I have built this site out of curiosity for the tools that exist and to broaden my knowledge and deepen my skillset. As a Product Owner or Product Manager, it is important to not only understand what you're building, who you're building for and why, but also how it should be built. Understanding how devs build software, their thinking and their constraints enables you to build better relationships and plan software development better for future projects.
Now, whilst I understand the concept of backend code languages, I'm not a software engineer. But, I love visual design, understanding UX and I enjoy learning front-end technologies. I have built and modified websites over many years, but often dipped in and out of extensive learning. This results in a period of re-learning each time I pick it up again, which slows the pace of my development.
Finally, we now have tools that help us build code with little to no knowledge in the form of GenAI. Whilst doing online courses does have the support of the online tutor, the response time is often slow to non-existent. GenAI is instant. No more hunting through online forums to find the edge-case solution to what you're trying to accomplish. And, with multiple solutions to my code questions, I can get the best solution that I can understand (if I want to at all) to what I am building. I can ask stupid questions without feeling like a twerp (though, the community is often supportive in these forums). My only worry is that these forums become less used as people silo themselves in just asking AI. And then, is AI just feeding itself? This is a bigger question for another time!
So, tooling...
I started by using ChatGPT on a Plus account. The MacOS app has a neat little integration which allows you to connect to VS Code so that you can ask questions about the code that you're currently working on. I used to have Github Copilot but didn't like the fact that I was paying two subscriptions.
My site is a very simple HTML site written with the help of Eleventy. I wrote about my Eleventy journey in my last blog post, so I'm not going to write and about that again here. But, using ChatGPT became quite frustrating as it was only looking at one file at a time. I really wanted a tool that looked across the codebase and assisted writing the code directly in the IDE rather than giving me code to copy and paste. This is where Cursor Composer comes in.
Cursor: The AI Code Editor
Cursor is "VS Code" with an added chat pane with an "Agent", an "Ask" option and an "Edit" option. The "Edit" option changed to Manual to today which is much easier to understand. I jumped right in to using it and I was quite surprised how quickly I could build an Eleventy site having previously only read that it was possible.
Image showing Cursor's Chat Pane
Cursor built me a framework based on what I wanted via simple written instructions. It explained the concepts and asks me if I want to "Accept" or "Reject" changes. It will also fix errors along the way. But, this has its pros and cons. If you're not vigilant, and you do not check what it is doing and you just accept all file changes, it will make changes that you did not ask for. If you commit these changes to your repo without testing thoroughly, even on a simple site such as mine, you'll use up further prompt credits trying to rectify the issue or time spent rolling back commits.
At first, and to an extent I am still a little confused about the differences between "Agent", "Ask" and "Manual". I was using Edit (now called Manual) all the time, where you specify the files that you want Cursor to review and ask it what you want to change and it will consider only those files. This is great but it's time-consuming to "@ tag" all the files that you wanted it to use. I just wanted it to look at the entire codebase. Later, I discovered that I could tag "@codebase", but this didn't always work as it would say that it is too many files to consider and that I needed to specify only the files that I wanted. I didn't tend to use "Ask", as I could use the "Edit" to ask questions too. Or, I work launch a mini window of ChatGPT on the Mac app to ask that question without switching panes. Also, when I asked a question in the "Ask" pane and wanted it to do that change, it felt like I needed to ask it again in the "Edit" pane to proceed with the change. I just wanted a single chat window that did it all. That's where "Agent" comes in. I don't think that the makers of Cursor did a good job on their chat UX.
Agent (previously know as Composer)
After moving away from "Edit" (now "Manual"), I now solely use "Agent". I can ask broad questions but still select specific files and even selections of code like in "Manual" mode. When I first started using "Agent", you had to choose the AI model to use (they have several available). Under the paid subscription, you have 500 fast requests to Claude 3.5 or ChatGPT 4o. I found Claude 3.5 superior despite using 4o for ChatGPT on my Plus license for everything else.
For simple requests, you can use gpt-4o-mini in "Manual" mode without any limitations - something I previously did in "Edit" mode for basic changes. However, this model isn't yet compatible with "Agent" and proved less effective for more complex changes in "Edit" mode. After extensively using Claude 3.5, I found gpt-4o-mini's outputs often fell short of expectations. The recent addition of an "Auto" AI model selector has improved the experience, though I have concerns about it potentially consuming my fast model credits too quickly. I wish Cursor's developers would provide more transparency about credit usage, or perhaps implement a complexity slider in the settings. One possibility could be automatically assigning models based on request complexity scores, though this would need to be implemented without adding significant latency. Despite these considerations, I now rely on "Agent" for all changes, including minor ones I could handle manually, as it's typically faster and catches potential issues I might overlook.
Cursor's Auto-complete
One of my favorite features in Cursor is its intelligent auto-complete functionality. When I make changes that affect multiple areas of code in different ways, Cursor proactively suggests contextual completions, displayed as subtle grey text inline. I can quickly apply these suggestions with a simple TAB press. What's particularly impressive is how the suggestions are context-aware - Cursor understands the surrounding code and offers completions that make sense for that specific situation. This feature has dramatically improved my coding efficiency, reducing repetitive typing while helping maintain consistency across similar code patterns.
Cursor's New Features
Today, Cursor updated with some new tab features, and changes to the naming of the modes which are overdue. I was confused! Read more on Cursor's Changelog - I have yet to play with these fully and I may post again if there's something worth writing about. I would really like a "custom instructions" feature like on ChatGPT where I can stipulate to use Liquid instead on Nunjucks, for example rather than mixing both into the project. Maybe that's in the above changes.
I am aware that Gemini has launched some free code assist tools in VS Code. I have installed the extension but not used it yet. I am also aware that Github Copilot is now partially free to personal projects and an agent is coming, but for now I am quite happy with Cursor.
Continuous Deployment (CD) with Github Actions
I use shared hosting. I have had it for years and I have multiple sites on there. To deploy, I commit to my Github repo, then I sync. The sync is configured with Sam Kirkland's FTP-Deploy-Action using Github Actions to deploy via FTP. It is straight forward, fast and saves manually uploading via FTP each time. I haven't set up any Continuous Integration (CI) yet, but I am intrigued by the possibility.
Conclusion
I love my setup at the moment. I do however wish Cursor made less errors and followed instructions rather than going off and changing files that I haven't asked it to. I would also like it to understand visuals better: when I feed it an image, or a URL of an element on another webpage that I would like to replicate. It often says it understands, but it doesn't. I wonder whether features from Lovable will find their way into Cursor too. Or a Figma integration. These tools make development accessible to all.
As a Product Manager using Cursor, I can test ideas directly in code before I instruct devs. I can build demos for stakeholders. I can discuss concepts and implementation with devs before they take the idea to development. These are exciting times but it's a struggle to keep up with AI developments. For now, I am happy with my setup but I will continue to play with new tools that catch my attention. I am a designer at heart, so I do wish there were more visual tools: a blend of Lovable and Figma with the intelligence of Cursor's Agent would be amazing!
I'm also exploring using Bear App for writing these blog posts, as its visual markdown editor provides a more pleasant writing experience compared to editing directly in Cursor. Bear's clean interface and native markdown support would allow me to focus on the content while still maintaining compatibility with my site's build process. The app also offers useful features like tags, internal linking, and export options - James has written an excellent guide on integrating Bear with static site generators that I plan to reference. This workflow could significantly improve my content creation process while keeping the technical benefits of my current setup.
