How I Used LLM To Build This Site
Baby, I couldn't help myself, the LLM bandwagon is big and flashy.
Actually I am mixed on the benefits of generative AI in coding and Web Development in specific. I have been using generative AI since 2023 when ChatGpt became memetic. I vividly remember the early days working with generative AI, mainly continuous moments of emotionally neutral code creation punctuated by intense frustration and amazement by the sci-fi like feats of AI. Now in 2026, yeah its the same. Though that's mainly because of the neophilic treadmill.The amazing feats of technology from yesteryear are just a thursday tweeting while watching netflix and ordering beyond meat pizza from uber eats and washing the pizza down with Ozempic. I find my self monotonously churning out code in my IDE until I run into a glaring bug that takes me 30 hours of yelling at various AI models until I give up and fix the code myself. When I manage to finish a project using only AI without any obvious errors (errors after deploy don't count!), I am again amazed by the capabilities of generative AI to create a To-Do app.
As such, because of the melodramatic relationship I have with LLM, its hard for me to be objective if LLMs are actually helping me. If I would of spent 20 hours on a project, learning new things and having an enjoyable time, but with AI I spend 5 hours generating the code, and 5 hours pulling my hair out to fix all the obvious bugs, is it worth it? Obviously the answer is that if you don't care about enjoying coding, or learning new things, then yes. Which is why companies push LLMs so aggressively. Though I aware that many people claim to enjoy using generative AI, and I can't yuck their yum. For me, I really enjoy learning new things, and though learning new things requires a cognitive load, when I finally pass a plateau and make it to a new level of my learning, its a very chemically and spiritually fulfilling thing. Business doesn't care for spiritually fulfilling. Like I mentioned, there is an emotional rollercoaster often involved for me in using an LLM to build complex things, but long term its rather empty. One criticism of using Generative LLms to replace junior devs is that they don't learn, they just guesses the next token. That's not strictly true. Conditioning, looking at past interaction history and having that influence responses, could kinda be called learning. Though generative AI has limits to how much information can be used for context on how to respond, nowhere comparable to an average's humans capability. This often results in an manager using AI to do simple things they usually would have a JR dev do, and the AI does it without complaint. If you use a chat AI long enough, the AI will "learn" how to glaze you correctly, so every time you create something, you feel you're doing a great job because the LLM tells you that. But the LLM only "learns" when a new trained model is released. So if I spend 1000 hours working with an LLM to solve problems, it doesn't automatically remember(because of the context limit) all the weird gotchyas I encountered unless I remember them for the LLM by writing them down and providing them as part of the context explicitly. What I achieve after using AI to create code is just that, the code. When your goal is to make money from coding, that's probably fine, when you want to be fulfilled by your job as a programmer, not so much. Welp at least for me.
So that's why this website, this is my attempt to find the line between efficiently using AI and not using LLMs in order to grow as a developer. That's the paradox actually, as LLMs objectively let you build things faster, and thus get more money in certain context, but in order to use LLMs in more ways to make things you can get paid for, you need to actually know how things work.
Ok enough rambling, this is a tech blog, you don't read tech blogs for insane rants!
I built the first version of this website, which you may be viewing right now, using ChatGPT in about 5 hours. Website's are just HTML with CSS for shiny and JS for movy. I could build the website using a CMS, a webframework, or in C. According to Tencents AutoCodeBenchmark, most AI's aren't actually that proficient in javascript, at a score of 60.9 according to the experiment. AI's are most proficient, of the languages tested with, at Elixir! If one wanted maximum proficiency in using AI for programming, we should use Elixir for everything!. Though I am functional apologist, and plan to do a Elixir vibe code experiment soon, forcing everyone at microsoft to use elixir isn't practical. What languages to use for a project isn't one based purely on the most effective use of AI, but more the comfort of the human yelling at the AI. We want to think we will understand all the code we are not writing. So I chose Typescript for this project. I chose to use the LiquidJs templating engine because I am a Shopify theme developer, and I'm familiar with that. I chose markdown for writing the blog, because duh.
For the runtime, I choose Bun, not because I think Bun will have more AI integration now that AI, but because its faster than Node, and has better interoperability with npm than Deno. I built a project using Deno, and learned that I don't love its limited variety of community packages. I learned that Bun is very interoperable with npm, but it still has bugs, and in a serious product project, that can be a deal breaker. I learned that from watching humans talk about their experiences using Bun. So for this project, I consciously decided to keep things simple at the start, to get something shipped, and then if I am decide I seriously want some aspect of this website done well, I will rebuild it myself without any help of AI. As a result, I don't really care about the edge cases of bun, as I will be using it as a static site generator, with the html hosted on render.com for free.
Once I had an idea of how I wanted to start, I wrote a quick doc with context that I put in my ChatGPT project files. Here it is bellow, note the spelling mistakes and lack of focus
I am working on building my person website.
I am web developer
The website will have a blog, so that I can write articles that will build my reputation so that I can get more freelance work. I will also host on the site various free tools that I will use as lead generators.
I want to have a progressive enhancement philosophy, I want to get the feature, the blog, up as fast as possible.
Here is what I want for my site mvp
I will host on render.com's free plan, ergo, I will start with just a static html generator.
I will use the JS programing language.
I will use the bun runtime
I will use typescript for the static site generator logic
I will vite for the backend development/previewing my changes.
I will use liquidJs as the view templating engine.
I will use vanilla MD files as the source for the blog content.
I will use gray-matter to parse the MD files.
I will use markdown-it to generate html from the MD files.
I will use vanilla javascript using a 1 custom web component per js file.
All js files will be embeded on the page using type="module" or be improrted using module syntax.
I will write vanila css, with a similar module system.
I will load the JS modules and CSS modules only wh ere needed.
Then I started chatting and refining the details of how I wanted to structure the project, bouncing ideas off of the AI until I had a more detailed plan I was more satisfied with and had Chatgpt generate a new doc to use as a ruleset for further work.
# Project Context – Personal Website SSG (MVP)
## Goal
Build a personal website focused on:
- A blog (Markdown-based) to build reputation and attract freelance work
- Hosting small free tools as lead generators
- Progressive enhancement (HTML first, JS/CSS only where needed)
- Fast MVP delivery with minimal abstraction
The site is intended to be deployed as **static output** on Render’s free plan.
---
## Core Technical Decisions
### Runtime & Language
- **Bun** as runtime and package manager
- **TypeScript** for static site generator (SSG) logic
- **Vanilla JavaScript** (ESM only) for frontend code
- No frameworks (React/Vue/etc.)
### Static Site Generation
- Custom SSG written in TypeScript
- Single build entry point:
- `src/build/index.ts`
- Build outputs to:
- `dist/`
### Development Workflow
- **Vite** is used ONLY as:
- a dev preview server
- live reload when `dist/` changes
- Vite does NOT own the build pipeline
- Dev flow:
1. Watch source files
2. Re-run build
3. Vite reloads generated HTML
---
## Content & Rendering
### Blog Content
- Stored as **plain Markdown**
- Location:
- `content/blog/*.md`
- Frontmatter parsed with `gray-matter`
- Markdown rendered with `markdown-it`
### Templating
- **LiquidJS** used for HTML templating
- Templates organized by concern:
- `templates/layouts/` → page chrome
- `templates/pages/` → page-level templates
- `templates/partials/` → reusable fragments
---
## Frontend Philosophy
### JavaScript
- Vanilla JS only
- One custom Web Component per file
- All scripts loaded with `type="module"`
- Page-level JS loaded conditionally via templates
### CSS
- Vanilla CSS
- Base styles + page-level styles
- CSS only loaded where needed
---
## Formatting & Tooling
### Prettier
- Used as the sole formatter
- Config file:
- `prettier.config.cjs`
- Uses Shopify Liquid plugin:
- `@shopify/prettier-plugin-liquid`
- No semicolons
- Single quotes
- Markdown prose wrapping preserved
### Editor
- VS Code–compatible settings used (Windsurf IDE)
- Auto-format on save enabled
- Prettier enforced as default formatter
---
## Folder Structure (Current)
├── bun.lock
├── CLAUDE.md
├── content
│ └── blog
│ └── 2026-01-06-hello-world.md
├── index.ts
├── package.json
├── prettier.config.cjs
├── prompt.md
├── public
│ ├── assets
│ ├── css
│ │ ├── base.css
│ │ └── pages
│ │ └── blog.css
│ └── js
│ ├── components
│ │ └── my-component.js
│ └── pages
│ └── blog.js
├── README.md
├── src
│ ├── build
│ │ ├── index.ts
│ │ ├── lib
│ │ │ ├── frontmatter.ts
│ │ │ ├── fs.ts
│ │ │ ├── liquid.ts
│ │ │ ├── markdown.ts
│ │ │ ├── paths.ts
│ │ │ └── slug.ts
│ │ └── steps
│ │ ├── build-blog.ts
│ │ ├── build-pages.ts
│ │ ├── build-rss.ts
│ │ ├── clean.ts
│ │ └── copy-public.ts
│ └── dev
│ └── watch.ts
├── templates
│ ├── layouts
│ │ └── base.liquid
│ ├── pages
│ │ ├── blog-index.liquid
│ │ └── index.liquid
│ └── partials
│ ├── footer.liquid
│ ├── header.liquid
│ └── head.liquid
├── tsconfig.json
└── vite.config.ts
## Build Pipeline Responsibilities
- Clean `dist/`
- Copy `public/` → `dist/`
- Render static pages from Liquid templates
- Render blog posts from Markdown
- Generate blog index
- (Later) RSS, sitemap, tags, pagination
---
## Non-Goals (Intentionally Excluded)
- No frontend frameworks
- No CMS
- No database
- No bundling of JS/CSS
- No MDX
- No server-side rendering
---
## Guiding Principles
- Progressive enhancement
- Explicit loading over magic
- Minimal dependencies
- Build output == deploy output
- Keep build logic decoupled from dev tooling
If you give a prompt of "Build me a website lol" to an AI, it will probably use nextJS and tailwind CSS, because that's what's most popular for Web Development nowawadays. As a shopify theme developer, and a specialist in Perceived Performance Optimization, I have certain opinions on how I want to build my personal website, so I made sure to communicate that to chatGPT, and discard the suggestions that I did't like. You'll notice build-rss.ts in the list. I didn't end up using that in my current version of the site, as I had no interest in using adding RSS to the blog at this stage. The AI decided to add that because most blogs have RSS. When using AI never forget that even though you can communicate a lot of context to the AI, it can always make decisions that you did not expect. This compounds as your project grows. Which is why I decide directed the AI to create the project using tooling I am familiar with in a structure I am comfortable with. I still had bugs, which took about 3-5 attempts to fix using the AI. I don't know if I "vibe" coded, I'm not really sure what that means these days. In my personal opinion, 5 hours for a simple site like this is pretty good. Yes, if I used wordpress, I could of done it in less than an hour without AI. Also I could still customize the wordpress website later to make more complex if I wanted. The thing is, I don't know PHP. I would need to learn PHP in order to customize the wordpress site to my liking, which is great. I'd have learn PHP and how to customize a wordpress website heavily, but that's not my goal. My main goal is to use my personal website to get exposure and get more clients, or piss off other tech nerds and get into online arguments. Yes, I could in theory use AI to customize a wordpress site, no I won't explain why that's a bad idea. I am using AI to get publishable results quickly, but not fooling my self into thinking that I can use AI indefinitely without diminishing returns