我放弃了 Wix，利用 Claude Code 和 Notion 从零构建了 sirome.net

我是 Aketa Rashiro。我完全重新制作了我的个人作品集网站 "sirome.net"！

我制作了一个可爱的网站——大家快来夸夸我吧！🎈

我从 Wix 毕业，用 Claude Code 构建，并通过 GitHub 和 Vercel 发布。这次的重点是与 Notion 的集成。

我创建了一个环境：只需在 Notion 中写工作日志并点击"发布"，Notion 页面就会直接反映在网站上！耶！🎉

哇哦！

为什么重建

去年年底，写论文时 Notion 帮了大忙！我意识到 Notion 有多方便，于是开始创建我的工作档案。

以前，我在 Wix 网站上发布工作记录，但我不太擅长在 Wix CMS（管理界面）中编辑文章。

后来，我开始用 Notion 记录日常工作笔记，不知不觉中，Notion 上就形成了一个工作数据库。

嗒哒！🎉

"要是能直接把这个变成网站就好了……！"

你可以做到。

Notion 非常方便，它本身就有一个将文章发布为网站的功能。

很方便。

但是，你无法改变外观。

由于设计模板有限，你几乎无法改变外观（截至 2026 年 5 月）。

既然如此，我想我只能自己动手了。

这时，Claude Code 作为我的助手出现了。

这就是 Claude Code 的样子。

好可爱。

Claude Code 太疯狂了

这是我第一次使用 Claude Code。

以前，我用 ChatGPT 制作 Melo-bot 时，

复制粘贴代码、检查错误、再粘贴……

说实话，那项工作相当繁琐。

Claude Code 可以直接从终端修改文件中保存的代码。

• "让它更可爱一点"
• "我希望鼠标悬停时能柔和地展开"

如果我给出这样随意的评论，它就会适当地重写代码，并当场实现给我看。这"真的太疯狂了"。

不过，如果你让 Claude Code 工作太多，就会遇到"token 限制"，需要等半天或一整天才能再次使用（我使用的是 Claude Pro 计划），所以我也会把一些小问题或原型扔给普通的 Claude 或 ChatGPT。

噗

我把 Notion 变成了我的 CMS

新 sirome.net 的核心是与 Notion 的完全集成（💡）。

我甚至不再需要网站管理界面了。

每天在 Notion 中写日志。

↓

将状态改为"已发布"。

↓

它会自动反映在网站上。

而且，即使发布后，如果我在 Notion 中编辑文章，网站端也会自动更新。

这难道不疯狂吗？

我希望你能感同身受。

真的。

当然，我也设计了与网站设计相匹配的文章页面。

伸个懒腰

可爱。

从技术上讲，它是 Notion API → Next.js → Vercel 的配置，似乎通过状态字段的变化触发增量静态再生（ISR）。

不过，我其实不太懂。

🎀 魅力点 🎀

作品页面

对于作品页面上的精选幻灯片展示和缩略图规格，

我是在实现过程中决定规格的。

像这样（自动从文章中获取图片，通过水平光标移动进行缩放）。

能够当场边测试"如果这样看起来感觉不错"边构建，这是使用 Claude Code 最棒的地方。

作为一名设计师，如果我和工程师合作，

我猜自己会半途而废，心想："如果要求这么多修改，他们肯定会讨厌我。"

AI 在多个方面确实是创意行业的革命性工具。

Melo-bot

Melo-bot 让 Melo 在页眉的电子公告板上逐字说话。

这复用了我之前用 ChatGPT 制作的一个程序的一部分。

我很高兴能把沉睡的 Melo-bot 召唤到 sirome.net 上。

另外，我从 2019 年左右开始与 Tsukunajiro 先生和 Hor 先生秘密创作的像素艺术 Shiro 和 Melo 的世界也复活了。

我很开心，感谢你们的存在。

像素艺术由 Tsukunajiro 创作。

诶嘿嘿。

可爱。

未来，我计划逐步添加更多游戏元素。

由于 Notion 集成，加载时间有时可能会很长，

所以请用它来消磨时间。

每秒旋转的 Favicon

Favicon 是浏览器标签页上显示的小图标。

我无法注册 GIF 动画，所以每秒显示 10 张 PNG 图片。

可爱。

在智能手机上，我把它作为菜单按钮放置。

点击时它会回头看。

请也在手机上试试玩它。

sirome.net

总共两周完成。

所以，我很高兴能从 Wix 毕业。毕竟它很贵。

我在深夜和清晨一点一点地制作，不知不觉就上线了。

AI……我仍然持怀疑态度，但我亲身体验到世界已经完全改变了。

由于法律问题，我目前还不太想用 AI 生成插图，但

我希望在设计创作中与 AI 好好相处，做出有趣的东西。

工作咨询请随时联系我。

另外，从现在开始，我想在作品署名和归档文章上多下功夫，

用心发布每一篇。

我也会追溯更新目前 sirome.net 上的文章。

每一篇都是我倾注心血的作品。

感谢大家，我才能画到现在，

并且很感激能这样生存下去。

虽然还在进行中，

但请继续支持 Shiro、Melo 和 Aketa Rashiro！

来看看网站吧！期待通过回复或私信收到你的感想 ✨

🔗 sirome.net

技术栈备注

• Claude / Claude Code
• Next.js
• Notion API
• GitHub
• Vercel
• Sharp

顺便说一句，这篇文章我也是在 Notion 里写的。

如果你觉得有趣，请分享！

Aketa Rashiro