Making This Website | Matthew Greenfield's Blog

I have made many, many personal websites before. I didn't like any of them enough to keep them up. I didn't like Wordpress, Squarespace, and the like—I always built them from scratch.

But now that generative AI is built into our editors, it was much easier for me to setup the file/code structure how I like, then have AI do most of the styling and layout.

First, I told ChatGPT what I wanted to build and what tools I wanted in it:

Next.js
TypeScript
React
Tailwind CSS
A way of rendering GitHub-flavored markdown (GFM)
And deploy it to GitHub pages (at least initially)
A collection of icons that include things like LinkedIn, GitHub, etc.

ChatGPT gave me what I needed to get started

Installation

# Creates a Next.js project called `omg-website` using TypeScript
npx create-next-app@latest omg-website --typescript

cd omg-website

# Installs dependencies
npm install react-markdown remark-gfm gray-matter react-icons

Dependency breakdown

react-markdown - React components for renderd markdown
remark-gfm - Adds GitHub Flavored Markdown (GFM) support
gray-matter - Parses front-matter (AKA "YAML preamble") metadata from the top of markdown files
react-icons - React components for lotsa icons

A note on all the `omg` stuff

I used to have many accounts with my first initial and last name: mgreenfield. At some point, I decided to add an o to make it OMGreenfield. Not only did it make me giggle, but for most platforms that username isn't used.

It's common to give short prefix on branches or tools to distinguish them—often with an abbreviated version of the author's name. I wasn't the only Matthew (or even the only Matthew G) at Medely, so I picked omg/some-thing-cool over matt/some-thing-cool

Letting AI take the wheel

Generative AI has gotten to the point where you can say things like "change the style of my website to more closely match this screenshot", and it will go through a loop of requests to the AI models you specify reading your app's codebase, and editing your files to try to make it happen. You can review and approve each step or auto-approve and go get a sandwich

As always, you can't expect it to build something perfect, but over several iterations, it can act as a performance booster.

Option 1: VSCode and the Cline extension

Cline then forwards the costs onto you through API keys or an OpenRouter account. How much your request costs depends on which model(s) you want to use. Building the structure for this website cost ~$2 using Claude Sonnet 3.7

Option 2: Cursor

Cursor is an open source custom build off of VSCode. Because it's built by a startup and not a giant corporation, Cursor development is much faster than VSCode's. Because of this, the kinds of capabilities available in Cline are already baked into Cursor. You just pay for your subscription ($20/month) and it takes care of the rest.