A Personal Blog Built with Claude Code — An Ad Guy Who Let AI Write All the Code
My digital avatar's usage blew up past what I can afford — time to take it offline. And friends keep telling me the videos run too long, they want a text version. Two things at once — so let's just build a blog.
- Before you start, get the AI to teach you the concepts involved (domains / iframe / servers / ICP filing)
- I'd already bought a server on Tencent Cloud, and gave Claude Code the API key so it drives the server directly
- Visuals run on the light version of my own PPVM skill
- Mandatory WeChat QR login to read the body text, WeCom QR code stays
- Raw full transcript + a restructured digest — both versions
- I'd hit the WeChat callback-domain trap before, and that lesson is in memory where it can look it up itself
- Didn't look at a single line of code the whole way
The domain is XNTJ.tv, same as my site, and the old Live2D digital avatar goes offline.
A lot of you have figured out by now that my WeChat Channels handle is my own website.
My Live2D digital avatar has had a usage spike lately that I can’t afford to keep paying for, so I’m taking it down. At the same time plenty of people keep saying my daily videos run too long — is there any chance of a text version?
Two things at once — so today, step by step, I’ll build the blog that becomes my site, and put the transcripts and tutorials from past videos on it.
1. Briefing the digital avatar — ask the AI how it should be done first
I started by having my Live2D digital avatar hand me two implementation paths:
- Notion + Super — the requirements are clear, it’s a content-display site, videos plus tutorial text.
- Ghost — you never touch code, you just write; far cleaner than WordPress, ships with a membership system, so paid content later is already there.
The avatar’s call: you’re in the phase where volume matters, don’t burn time on tooling. Start with Notion + Super, live within a day if it goes smoothly; once the content piles up, then think about migrating to Ghost or self-hosting.
It added one more structural read — traffic comes from short video and accumulates in the blog. WeChat Channels is the entrance, the blog is home base.
2. The most interesting part of learning with AI — when you don’t know a word, keep asking
I hadn’t heard of a lot of the words in those options: iframe, WordPress, ICP filing. For a total beginner, even “server” and “domain” may be new.
So keep asking: “What is a domain? How do I get one of my own?” “What’s an IP? What’s ICP filing?”
Learning those basics is on you — go ask the AI.
3. Open Claude Code and give it the brief
So today we open Claude Code and get this site built.
Before this step I’d already bought my own server on Tencent Cloud and handed the Tencent Cloud API key to Claude Code. Meaning Claude Code can now operate my server directly — write code locally and deploy it straight to the server.
The brief:
- Put the thinking or the tutorial from every video on the blog
- Users have to log in by scanning a WeChat QR code, so I know who’s been reading
- Clean, good-looking UI, no complicated features
- Deploy to my Shanghai server
- Use XNTJ.tv as the domain (the site’s old Live2D digital avatar can go offline — the compute really did blow past budget)
- Do the overall plan first; only once the plan is out do we talk implementation
It came back with a complete plan: WeChat login, content architecture, UI design principles, tech stack recommendation, domain and deployment cutover — it had thought the whole thing through.
I added one constraint: visuals follow my own PPVM skill, light version (that’s the standardized system I built for UI design taste; it has a light set and a dark set, and this time we go light).
4. Content details — I want both versions
It came back with questions: how should the long-video transcripts be handled?
My answer: keep the raw transcript, and produce a digest alongside it. The digest isn’t a summary — it’s the core content pulled out and restructured. I want both.
No video embeds for now; links to WeChat Channels or other platforms may come later.
Login strictness: mandatory. You must log in to see the body text. Purely read-only, no interaction, but keep my WeCom QR code so people can reach me.
5. The WeChat callback — the lesson is in memory, it can find it itself
WeChat QR login has an old trap: the callback domain throws an error. I hit it the first time I built this, and I put the lesson into memory.
This time Claude Code went straight into my project memory and found that earlier experience. When you go do this yourself, don’t worry that you don’t have that much project experience — all of mine came from hitting traps one at a time.
And if it can’t crack it either? Have it go find the WeChat page that documents callback usage in detail, hand that page to Claude Code, and it reads the page and solves it itself.
So through this entire process I didn’t look at a single line of code, all right? Not one line of code.
6. Opening the site for a real test
It’s done. Open the site and look — it took some initiative based on my habits:
- The homepage lets you add me on WeChat
- Every episode has its cover, title, summary, and date
- Click in and you get the digest (rough figures)
- Once you log in you can read the full text
- Login state shows in the top right
- The full text also gets one-click copy-all → paste it into an agent to study
- And you can see the episode’s full transcript
Ran the QR login end to end — all working. A fully usable personal blog.
That’s it for today. On the 21st I’ll be in Shenzhen for the Feifan Awards event — come find me on-site and talk AI.
Source: EP0012_audio.mp3 · ASR model gemini-2.5-pro · full text of the 10-minute original recording
[00:00] Lately I’ve noticed a lot of you already know that the handle on my WeChat Channels account is my official site. Usage of my digital avatar has exploded recently, with a lot of people coming to ask all kinds of questions. And I can’t carry it anymore, so I’m going to take that digital avatar offline. So what I’m covering today is how to build your own official site. And it works out well, because a lot of you have been saying my daily videos are too long, right, and asking whether there could be a text version. So today I’m going to walk you step by step through building a blog site, and putting the full transcripts and tutorials from my earlier videos on that site.
[00:30] So let me go ahead and ask my avatar: how do I build my own blog, and put the tutorials from my video content on the internet for people to see.
[00:40] My digital avatar is pretty fun — it’s a Live2D paper doll. Two implementation paths for you. First, Notion plus Super. This requirement is very clear: content-display type, video plus tutorial text, and the two directions that suit you best are these. Second, just use Ghost. The upside is you don’t have to touch any code, you just focus on writing content. You write the tutorials in Notion, and Super turns it into a real website for you.
[00:58] See — learning AI, a good-looking interface, deployed on your own server, a few dozen yuan a month. For video, just embed a YouTube or Bilibili iframe. This one is a blogging platform built specifically for content creators, much cleaner than WordPress. It comes with a membership system, so if you want paid content later, it’s already there. My read: you’re in the scaling-up phase right now, so don’t burn too much time on tooling. Start with Notion plus Super — you can be live in a day at the fastest. Once the content has built up, then consider migrating to Ghost or self-hosting. How much existing content do you have right now? Traffic comes from short video and settles in the blog. That structure is right. The video content is — the blog is your home base, and WeChat Channels and the other platforms are traffic entrances, right?
[01:26] This is the interesting part about learning AI. When we have a need and we put the question to AI, its answer is full of words we may never have heard before. For instance, for someone brand new to development, they might never have heard of servers, domains, or terms like iframe or blogging platforms like WordPress. And you can just keep following up with it — like asking it what a domain is, right, what that concept is, how I get my own domain. I’ll leave learning those basic concepts to you to go ask AI yourself.
[01:53] So today let’s open Claude Code and get our site built. Before this step, I’d already bought my own server on Tencent Cloud, and given Claude Code the Tencent Cloud API key. Which means my Claude Code right now can operate my server directly, and can write code locally and deploy it to my server. So let’s give it the requirements.
[02:16] Lately quite a lot of people have been following the content on my WeChat Channels account, and everyone’s feedback is that my videos are too long — a dozen-odd minutes of substance, and they don’t have time to finish it. Is it possible to build a blog and put the thinking or the tutorial from each of my videos on that blog? And my thought is that these users need to log in via WeChat, so that I know who’s been reading.
[02:38] And the UI design of this blog needs to be clean and good-looking. No complicated features — just get the most basic presentation right, that’s all. And it can be deployed on my Shanghai server. For the domain, use my official site’s domain, XNTJ.tv. And on that domain, my old digital avatar can go offline, because honestly the compute usage is running a bit over budget. So let’s do the most basic overall plan first, okay, and once the plan is out we’ll discuss the specific implementation.
[03:10] This really isn’t hard at all. First, before doing this, go learn the relevant concepts by asking questions. Once I know what a domain is, what an IP is, what filing and registration is, what a server is — then I can tell Claude Code very clearly what I need. And while it’s in the thinking stage, let me also make a recommendation for you.
[03:33] So this little tablet I can’t put down lately — this isn’t an ad, I haven’t taken a cent of ad money, it’s just that good. It’s the Huawei HarmonyOS MatePad Mini, an 8.8-inch small tablet, extremely light, only 200 grams. You can see on the back I’ve stuck on a privacy film, and it can attach to all kinds of mounts. And I’ve also stuck on a little laptop stand foot. The whole thing weighs almost exactly what a phone weighs.
[03:59] And what do I use it for? I use it to remote into my computer. See this little stand — one press and it opens, and you can prop it landscape or portrait, either works. And this tablet is just unreal: narrow bezels, right, and the response is extremely fast. And you can all see it’s displaying my computer’s current screen, and as my finger slides, the mouse has not one bit of latency.
[04:22] You can do this with Sunlogin’s remote-control setup, or I’m using this Moonlight setup, where the latency is even lower — totally works. Whether I’m lying in bed, or out and about with it stuck to the car, I can talk to my Claude Code any time.
[04:41] And likewise, I can use HarmonyOS’s Xiaoyi input method. I think it’s better than my own input method, and it’s a shame it only has a HarmonyOS version. So say I’m driving it right now, and let me think what I want to say: this site should use my visual style’s design aesthetic, and go with the light-mode version. See, it went straight out, straight out. It really is great.
[05:10] I’m not a Huawei fan, but I genuinely think Huawei’s tablets are extremely well made. So let’s look, it’s come back already. Good, and we can see it’s produced a complete plan. Including the WeChat login, including the content architecture, the UI design principles, the tech-stack recommendation. And what a tech stack is — you can go ask AI that too. Domain deployment and the switchover. Very thorough thinking.
[05:36] So what I asked it for on my Pad just now was that it needs to use my visual style’s design aesthetic, and go with light mode. Basically I have a skill that standardizes a whole system for UI design aesthetics, and it’s called PPVM. That system has a light version and a dark version, and I restricted it to the light version, so it’ll design to that standard.
[05:55] And I think there’s basically nothing wrong with this plan of its, the thinking is pretty complete. So let’s tell it: good, just execute according to your whole plan. And once the site is done, test it yourself. Once your testing comes back clean, I’ll test it live. Good, so now we just wait on it. It’s that simple.
[06:18] It’s asked some questions — about the full transcripts of the long videos. I think let’s do it this way: the original text of the full transcript needs to be kept, and then we need a digest version, a rewrite, meaning pull the core content out of it and make a restructured version. I want both versions.
[06:38] And then it thinks to ask whether we need to embed video in the blog. We won’t embed video in it — later on we might add links to WeChat Channels or the other video platforms.
[06:51] Login strictness: mandatory. You must log in to see the body text. Purely read-only, no interaction — but we can keep my WeCom QR code, so it’s easy for people to reach me. Good, let’s see how it does the design.
[07:09] Sorry, I’ve got a bit of a cough today. Beijing really did get a huge downpour yesterday, and I have a bit of allergic airway sensitivity — this is the first year I’ve had this problem.
[07:21] We can see it’s finished building, and it needs me to do some configuration and testing. So let’s just tell it to keep going. My WeChat callback domain is already bound to the main domain. And once the main domain is bound, the subdomains all work too. This is how WeChat’s callback works, please go confirm it.
[07:40] So let’s just put all the articles from the real-person long videos live on the blog, and once that’s all done, take the Live2D digital avatar down. And just use my main domain as the blog’s domain. Once it’s all done, I’ll test it. Make absolutely sure the WeChat login’s callback works properly. And we’ve dealt with this problem before, so you can look up the relevant experience in memory.
[08:05] Good, so we’ve told it to keep going. And you can all see that throughout the process, it’s very capable of finding the experience from my earlier projects. And when you go do this yourself, don’t worry — don’t worry about not having this much project experience. Because all that project experience came from hitting one pitfall after another.
[08:21] Like the first time I did a WeChat callback, it kept telling me there was a problem with the domain. So what do we do then? All we have to do is have it research which page WeChat documents the callback instructions on in detail. Just find that page, hand it to Claude Code, and it can read the page itself and solve the problem. And I actually didn’t look at a single line of code through this whole process, okay? Not one line of code. So let’s keep waiting for it to finish building this.
[08:46] Good, let’s take a look — it’s done. Open the site, and it’s presumably taken some liberties based on my habits. First, you can add me on WeChat, and then you can see each episode’s cover, title, and a summary. It has which episode, and what day each episode’s content was published. And once you click in, you can see an overview. And once you log in you can read the full text. So let’s log in by QR code and see, let’s log in.
[09:18] You can see that after logging in, it shows an overview, a digest version. This episode’s content — and you can also copy this episode’s full text and paste it straight into an agent to study it. And you can also see this episode’s full transcript. The full transcript — and once you’re logged in, the login status shows in the top right corner. It’s already in a completely usable state, a personal blog.
[09:42] Good, that’s actually it for today’s content. And since you’ve watched all the way to the end, let me run one tiny ad. Some of you have been DMing me lately asking whether you can come meet me in person. So in a couple of days, on the 21st, I’ll be in Shenzhen for the Feifan Grand Awards event. Come find me there and talk AI with me. See you, bye-bye.