parallax
← Writing

January 28, 2025

How I Learned Claude In One Day To Make This Blog

Yesterday I arrived in my new Brooklyn apartment at 11:00pm at night. This morning at 10:30am I met for coffee to discuss the game plan for how I'm going to gain skills in AI, writing and branding over the next 90 days under a graduate program level of intensity and structure.

ai

Yesterday I arrived in my new Brooklyn apartment at 11:00pm at night. This morning at 10:30am I met for coffee to discuss the game plan for how I'm going to gain skills in AI, writing and branding over the next 90 days under a graduate program level of intensity and structure. By 11:00am I was at the office, installing Claude Desktop.

My goal: To create a personal website I'm proud of, deploy it, and write a blog post about the experience within the workday by only interacting with Claude interfaces and no other applications.

The tasks and advice I was given were to:

  • Set-up Claude - both the desktop and Claude Code
    • To run Claude Code in the "Ghostie" terminal which I later learned was actually the Ghostty terminal
  • Learn about Claude skills using Claude
    • What are its valuable skills?
    • How does Claude learn these skills?
    • What are Claude's most valuable skills?
    • What skills will I need to make my blog?
  • Spend some time doing Metacognitive Thinking
  • Evaluate if Claude is BS'ing me
  • Evaluate if Claude is gassing me up
  • Design the personal website with Claude
  • Deploy the Blog
    • Come up with a deployment plan
    • Be able to explain the steps of deployment
  • Publish this Blog

I am an architectural designer.

So I began:

10:30

  • Looked up Claude on Google and downloaded
  • Used Claude in browser to look up how to install Claude Code and use the Ghostie terminal
  • Learned I need Homebrew
  • Asked Claude how to check if Homebrew is installed
  • It was not installed
  • Began to install Homebrew with the code Claude provided

11:40

  • Became confused about password request… a bit embarrassing
  • Claude confirmed I won't see the password but to just type my macOS user password
  • While waiting for the Homebrew install I attempted to Connect Claude Desktop to my google account and did some wifi troubleshooting

11:50

  • I spent some time asking Claude about Claude Code versus Desktop and if I could work on setting anything else up for my blog while I waited for Homebrew to install
  • I asked Claude about what its skills are and learned that some of them are: docx, pptx, xlsx, pdf, front-end-design, product-self-knowledge, and skill-creator
  • I asked Claude how it learns and understands these and learned it retrieves files, reads them to remind itself/ensure it is referencing the most updated practices
  • I asked Claude its most valuable skills. In response it just excitedly retold me its skills again…? But it seemed to think its ability to analyze and create documents was the most important along with front-end-design because it is capable of creating polished react based websites
  • I determined that I should ask Claude to focus on the front-end-design skill
  • It was perfect timing because I thought I could finally use Claude Code! It turns out I couldn't yet because my macOS software was out of date… RIP

12:22

  • I wanted to keep moving so it was here that decided to make this website using Claude Desktop

"I'd like to build a polished personal website for publishing blogs and artifacts using your front-end design skill"

  • I confirmed with Claude that I could do this and we began
  • Claude asked me the following:
    1. Your field/focus area
    2. The aesthetic vibe you're going for
    3. Whether you want single-page HTML or React
    4. What content you want featured (blog list, projects, about section, etc.)
  • Response:
    1. I am a recent architecture graduate from Illinois Tech. I completed a 5 year B.Arch program and I'm now going through a custom graduate program in which I will be rapidly growing my AI, writing, and marketing/branding skills.
    2. I like feminine and japanese aesthetics, a mix of both modern + retro aesthetic would be good. I like desert colors, muted colors, feminine colors, earth tones etc. I want it to seem professional but not so polished and complete that it is missing the quality of active working and research.
    3. I would like to use React elements.
    4. I would like some sort of about me, a blog list, and a project section for artifacts
  • I didn't think too hard about these responses at all

12:35

  • I had a website that was beautiful and I could deploy
  • I asked for a home page
  • Asked for edits on the header of the home page
  • And got called into a meeting

1:32

  • I came back excited to know my software would be updated and I could use Claude Code.
  • I asked Claude what the best method for editing the infill text is. One of its suggestions was using Claude Code and I really thought I had it installed at this point.
  • It was here I started asking Claude about the Ghostie terminal

"Ah! I don't actually know what "Ghostie terminal" refers to - I assumed you were using a nickname for your terminal app, but now I'm realizing you might be referring to something specific that I'm not familiar with."

  • I felt a bit dumb…
  • So I moved on and simplified: "How do I run Claude Code?"
  • I spent a long long time asking Claude how to run Claude Code and it kept telling me to type claude or claude-code in many different ways. This seemed odd to me. Shouldn't the command be simple? Claude was so convinced that I might have actually installed Claude Code already or that I should figure out how to run it with my out of date macOS software that it had me check to see if the terminal recognized Claude Code as an app? I apologize if this is getting confusing, this is where it got confusing for me, and I definitely could have hyper-analyzed it but instead I kept showing Claude the terminal responses and let it take me on this cyclical journey of continuing to prompt my terminal to open Claude Code and getting 'command not found' in response to every single one.

1:47

"None of these are working"

  • I don't understand how…but my software update stopped sometime during the meeting and I had to restart it. RIP!
  • Dealing with this was a ridiculous time sink
  • I started the update again and continued to edit the website with Claude Desktop

1:50

  • I asked Claude to be analytical about the site and think about anything we were missing that typically goes into a personal website
  • From this conversation I asked Claude to use its pdf skill, uploaded my resume and had it implement the resume as both a separate section on the site and on the about page to see which worked better on the site
  • From here I was in a good flow state asking for small detailed edits on the text and then editing all of the infill text to pertain to my actual information
  • It was awesome that Claude could show me the updates visually in real time
  • I was having a lot of fun

2:30

  • I mentioned to Claude that I was ready to write my blog post and asked it to clear all of the made up blog post containers
  • After this update it assumed we were done editing and gave me a .jsx file to download
  • Oddly enough it stopped displaying the visuals I had been seeing, I didn't know what those containers looked like anymore
  • Claude tried to tell me that it couldn't pull up the visuals anymore… why would it do this? It just didn't want to run the artifact again, but it kept telling me "I can't"…which was interesting
  • I was ready to write so I decided to take a lunch break

3:30

  • I uploaded a profile picture to implement and ran into an issue where Claude couldn't convert the HEIC to JPEG
  • It also didn't have authorized access to my local files so it couldn't run the profile picture in the artifact visual
  • More edits, writing the about page etc.

4:17

  • I decided to deploy the site
  • Turns out Claude Code was still not installed and was still not installing with the commands Claude was providing me
  • I thought back to the advice given to me and remembered the Ghostie terminal! I decided to cheat and look this up on google because Claude seemed to have no clue what I was talking about…
  • This is where I finally learned after hours that I had been making a huge dumb mistake!! Ghostty, it is called the Ghostty terminal

Me: "I think part of the issue is that i dont have the ghostty terminal"

Claude: "Ah! You're right - Claude Code requires the Ghostty terminal. Let's install Ghostty first:"

Installation Successful!

I typed claudecode into the Ghostty terminal as suggested by Claude…

command not found

RIP… truly rip.

I had just told Liam I was having so much fun… sigh

I'm going to be honest after this I went back into the same cycle with Claude, this time I copied all the responses from terminal and fed them to Claude Desktop who I had been working with all day. After a whirlwind journey….we had finally located the path to Claude Code. I knew this because a cute little pixel creature showed up on my screen. I smiled.

Me: "okay that was a bit confusing for me but claude code now opens with the claude command"

Claude: "Perfect! That's all that matters - you got it working! Now you can just type claude in your terminal and Claude Code will open."

Relief.

4:40

Goal: Deploy the Site

  • Claude asked me if I had used any deployment platforms before
    • I had: Github and Netlify
  • Claude told me a plan and asked if it should begin preparing for deployment
  • I said yes and told it to explain the deployment steps:
personal-website-deploy/
├── package.json (dependencies & scripts)
├── .gitignore (files to ignore in git)
├── README.md (documentation)
├── public/
│   ├── index.html (main HTML file)
│   └── profile-pic.jpg (your photo)
└── src/
    ├── index.js (entry point)
    └── App.jsx (your website component)

Claude told me the next steps were to:

  1. download the file and extract
  2. Open the terminal and navigate to the folder (cd personal-website-deploy)
  3. Install dependencies (npm install)
  4. Test it locally (npm start)

Me: "I still need to finish reading but what is npm?"

4:56

  • I followed all of the above deployment steps but when I ran it locally in my browser a scary red ERROR paragraph appeared :(
  • Claude had forgotten to close the <main> tags
  • A couple of different errors showed up and I continued to replace the App.jsx file

5:05

  • I remember I needed to change the really odd quote Claude had put onto my about page
  • I chose one from Christopher Alexander's book "The Timeless Way of Building"

5:17

  • My personal website was successfully running locally
  • The last steps were to push to GitHub
  • Claude Code told me that to use GitHub I needed to install Xcode command line tools… the install was going to take forever… not this again
  • Turns out the easiest thing for me to do here would have been to use the manual skills I had and push it myself using GitHub Desktop and Netlify
  • I started documenting my experience today while I was waiting but eventually decided to use GitHub Desktop myself
  • I successfully published to GitHub and asked Claude if it had any ability to publish to Netlify for me - it said it didn't have that ability

6:10

  • I published to Netlify

ERROR

  • Claude had put an invalid href
  • Updated the App.jsx

ERROR

6:15

  • I was reminded around this time to check the model of Claude I was using. My Claude Code was set to Opus 4.5 - good. Claude Desktop however was set to Sonnet 4.5 instead of Opus 4.5 :'(
  • I showed the errors to Claude in Opus 4.5
  • It wanted to find my files by connecting to google? This was annoying and didn't work…
  • I instead gave it the file path to my project
  • I attempted to see if Claude Code could commit changes to the main branch and push to origin
  • It did commit the changes - very cool!
  • But it said I needed to install GitHub CLI in order for the push to origin to work
  • I clicked push to origin myself
  • Opened my browser and there was my website, successfully published on the World Wide Web with Netlify!

Now I just need to have Claude check this for errors, and add in an actual page for this blog post…