Old layout
I was using Docusaurus for my website development previously. While it was very lightweight, and also easy to develop and maintain since everything was out of the box, the website itself looked old and dull.
Honestly it might've looked nicer since I didn't touch a whole bunch of configuration less the font, colour, and maybe the favicon (lol). But I decided to move ahead with recreating my website to modernise it.
Inspiration
I was inspired by Will Wang, founder of Clova. His website looked so simple and elegant. He mentioned in his video that he used Claude Code for his website. I wanted to try it for myself, using his website as inspiration, injecting a little of my own flair, just to see how good Claude Code was.
The verdict: Pretty damn good.
Installation
I followed the installation guide from the Claude docs, input my credit card details to get subscribed to the Pro plan and I'm all set.
All I need now is to call claude in my terminal within any repository.
claude╭─── Claude Code v2.1.76 ──────────────────────────────────────────────────────╮
│ │ Tips for getting │
│ Welcome back zj! │ started │
│ │ Run /init to create a … │
│ ▐▛███▜▌ │ Note: You have launche… │
│ ▝▜█████▛▘ │ ─────────────────────── │
│ ▘▘ ▝▝ │ Recent activity │
│ Sonnet 4.6 · Claude Pro · zj's │ No recent activity │
│ Organization │ │
│ /Users/ │ │
╰──────────────────────────────────────────────────────────────────────────────╯Migration Works
I went into the root directory and called Claude to read through my existing website, and instructed it to generate a static website with my header, description, what I'm doing now, and timeline.
Claude went to work, looking through the entire codebase and all I needed to do was verify the code that Claude generated, fine-tune anything that looked off, added my preferred font and colour theme.
It's a wonder looking at it happen in real time. If I needed to do this back then I would've required a few hours to plan, and also a few hours of looking through documentation to understand how to tweak things, and then another few hours to debug any bugs.
MDX Files
Initially I was using .md files, this was great to make the posts very simple. However, there are tons of features that cannot be done, such as syntax highlighting, metadata, indexing of pages, and also make the blog more interactive using code (something that I have yet to experiment with).
Reading Time
It sounds dumb but I've always wanted to see a x min read. With Claude, I am able to quickly develop such feature.
// ... continuation from code portion
const wordCount = content.trim().split(/\s+/).length;
const readingTime = Math.max(1, Math.round(wordCount / 200));Reading progress
I believe a sticky table of contents was necessary to ensure a contextual reading experience; I want to know where I am on the blog as I read it, in recent years I have realised that my attention span has become relatively short. Having these context allows me to have the "motivation" to finish reading anything.
I've also included a reading progress bar at the top, inspired by several websites with this sort of interactive experience, I feel that it makes my blog more interactive, and more enjoyable to read.
Conclusion
I've implemented other cool things that I would like to discuss about and share in the future blog. I've had a blast using Claude Code to make this migration, it's amazing how much tech has developed over the years, my only regret is I got started on this too late. But because I joined the club late, I'm able to use better models to help make the tasks way more efficient as compared to older models.
To you who has made it this far, thank you for reading! If you are keen, do feel free to click on the TLDR ✨ button at the very top if you haven't! I'll definitely be sharing about that feature in future blogs to come.