Rebuilding My Blog From Scratch: Notebook Design, New Tech Stack and SEO Fixes

I finally gave my blog a complete makeover!

I had been using the old version for years. I never liked how it looked, but I kept telling myself "it works, that's enough" XD The code was messy too — it started as a fork of someone else's multilingual template, which came with plenty of problems of its own. On top of that, my Chinese posts were getting harder and harder to find on Google. So I decided to tear the whole thing down and start over.

This post records what I changed, what tech I used and how I fixed the SEO — for my forgetful future self, and for anyone thinking about tidying up their own blog.

Why rebuild

• It didn't look good: the old version was a very standard tech-blog template. Clean, but no personality, and I got more tired of it every time I opened it.
• My content changed: I used to write mostly front-end notes. Now I want to write more about life, travel and living abroad.
• SEO was broken: my Chinese posts kept dropping in search rankings. It turned out the language setup was the problem (more on that below).
• The codebase was a mess: the forked multilingual template had its own issues and was tied to a pile of packages I never used, which made upgrading painful.

The new look: a notebook

The theme this time is a notebook:

• Grid paper as the background
• Cards and buttons with wobbly, hand-drawn ink borders
• Headings marked with a highlighter, tags that look like stickers
• A sticky note on the home page with whatever I've been thinking about lately
• An album where photos are stuck to the page with masking tape

I don't load any web fonts — the site uses the handwriting fonts already on your device, so pages load fast. Dark mode is still here too; it just turns into dark grid paper.

Reorganising the content

• Navigation is now: All, Life, Travel (grouped by country), Tech, Album, About, Contact.
• The home page and "All" only show life and travel posts. The tech posts are not deleted — you can still reach them from the Tech category — they just don't take up space on the home page any more.
• Tags on post cards are clickable. Click "New Zealand" and you get every New Zealand post.
• A new album section: separate albums you can open, with photos you can swipe through on your phone.
• Comments moved from Disqus to Waline. That is a longer story, so it has its own post.

The tech

Old → new:

The bigger changes:

Dropping Contentlayer and Pliny. They came with the template and do a lot, but I only used a small part of them, and they were blocking upgrades. Now a few small tools handle the Markdown: gray-matter reads the settings at the top of each post, @mdx-js/mdx turns MDX into a page, and shiki highlights code. Fewer moving parts, and when something breaks I know where to look.

Tailwind CSS 4. Configuration moved out of a JavaScript file and into CSS, with colours and fonts defined as CSS variables. The hand-drawn boxes, stickers and highlighter strokes are a handful of shared styles in that same CSS file, reused across the whole site.

Removing what I didn't use: the newsletter sign-up and the per-tag RSS feeds are gone, and the old URLs redirect to the right place.

SEO

This is where most of the effort went.

1. Fixing the language setup (the big one)

My blog has a Chinese and an English version. The old setup made English the default language and sent the home page to the English version, and the tags that tell Google "these two pages are the same article in different languages" (hreflang) were broken. Google couldn't work out where the Chinese pages belonged, and their rankings kept sliding.

Now:

• Chinese is the primary language, and the home page goes straight to the Chinese version
• Every page correctly points to its Chinese and English versions
• Only posts that really have a translation are marked as having one
• The language switcher takes you to the same post in the other language instead of back to the home page

2. Structured data

Every post now carries structured data (JSON-LD) for search engines: that it is an article, who wrote it, when it was published and where it sits in the site. This gives search results a chance to show more complete information.

3. Share images

Each post automatically gets a preview image with its title, so links shared on social media or in chat apps are no longer blank.

4. Sitemap and duplicate content

• The sitemap lists every page together with its language versions
• Only pages with a real update date report one, so it doesn't change on every deploy
• I found two posts with duplicate content, removed one and redirected its URL to the other

5. Titles and images

• Chinese post titles were rewritten to be closer to what people actually search for
• Post covers are shown at the image's original proportions, so portrait photos are no longer cropped
• The duplicate cover image at the top of each post is gone

Wrapping up

The best part of the makeover is that I finally want to linger on my own blog when I open it — and I feel like writing again.

Having AI to help really did make things much faster. But while AI can give you quality, it can't give you taste — you still have to work out for yourself what you want it to look like.

Life is only about 30,000 days long, and I want to write down more of the small things. If you also have a blog that's been sitting untouched for a while, I hope this gives you a little push!