Tôi đã từ bỏ Wix và tự xây dựng sirome.net từ đầu bằng Claude Code và Notion

Tôi là Aketa Rashiro. Tôi vừa làm mới hoàn toàn trang portfolio của mình "sirome.net"!

Tôi đã tạo một trang web dễ thương—mọi người hãy khen tôi đi nào! 🎈

Tôi đã thoát khỏi Wix, xây dựng nó bằng Claude Code, và xuất bản qua GitHub cùng Vercel. Điểm nhấn lần này là tích hợp với Notion.

Tôi đã tạo ra một môi trường mà chỉ cần viết nhật ký công việc trong Notion và nhấn "Publish," trang Notion sẽ được phản ánh trực tiếp lên site! Yay! 🎉

Wheee!

Tại Sao Tôi Xây Dựng Lại

Cuối năm ngoái, Notion đã giúp tôi rất nhiều trong quá trình viết luận văn! Tôi nhận ra Notion tiện lợi như thế nào và bắt đầu tạo kho lưu trữ công việc của mình.

Trước đây, tôi đăng bài ghi chép công việc lên site Wix, nhưng tôi không giỏi chỉnh sửa bài viết trong CMS của Wix (màn hình quản lý).

Hơn nữa, tôi bắt đầu dùng Notion để ghi chép công việc hàng ngày, và trước khi tôi kịp nhận ra, một cơ sở dữ liệu công việc đã được hình thành trên Notion.

Ta-da! 🎉

"Giá mà tôi có thể biến cái này trực tiếp thành một trang web...!"

Bạn Có Thể.

Notion tiện lợi đến nỗi nó tự nhiên có tính năng xuất bản bài viết dưới dạng trang web.

Rất tiện lợi.

Nhưng, Bạn Không Thể Thay Đổi Giao Diện.

Vì các mẫu thiết kế bị giới hạn, bạn hầu như không thể thay đổi giao diện (tính đến tháng 5 năm 2026).

Trong trường hợp đó, tôi đoán mình phải tự xây dựng nó.

Đó là lúc Claude Code xuất hiện như người trợ giúp của tôi.

Đây là hình ảnh của Claude Code.

Dễ thương quá.

Claude Code Thật Điên Rồ

Đây là lần đầu tiên tôi sử dụng Claude Code.

Trước đây, khi tôi tạo Melo-bot với ChatGPT,

Việc sao chép và dán code, kiểm tra lỗi, dán lại...

Công việc đó thực sự khá tẻ nhạt.

Claude Code viết lại code được lưu trong file trực tiếp từ terminal.

• "Làm nó dễ thương hơn một chút"
• "Tôi muốn nó mở ra nhẹ nhàng khi di chuột qua"

Nếu tôi đưa ra những nhận xét bình thường như vậy, nó sẽ viết lại code phù hợp và triển khai ngay tại chỗ để cho tôi xem. Nó "thực sự điên rồ."

Tuy nhiên, nếu bạn bắt Claude Code làm việc quá nhiều, bạn sẽ chạm phải "giới hạn token" và phải đợi nửa ngày hoặc cả ngày để sử dụng lại (tôi đang dùng gói Claude Pro), vì vậy tôi đã tiến hành bằng cách gửi những câu hỏi nhỏ hoặc nguyên mẫu cho Claude thông thường hoặc ChatGPT nữa.

Phù

Tôi Biến Notion Thành CMS Của Mình

Cốt lõi của sirome.net mới là tích hợp hoàn chỉnh với Notion (💡).

Tôi thậm chí không cần màn hình quản lý site nữa.

Viết nhật ký trong Notion mỗi ngày.

↓

Chuyển trạng thái thành "Đã xuất bản."

↓

Nó tự động được phản ánh trên site.

Hơn nữa, ngay cả sau khi xuất bản, nếu tôi chỉnh sửa bài viết trong Notion, phía site cũng tự động cập nhật.

Không phải là điên rồ sao?

Tôi muốn bạn đồng cảm.

Thực sự.

Tất nhiên, tôi cũng thiết kế các trang bài viết để phù hợp với thiết kế của site.

Duỗi người

Dễ thương.

Về mặt kỹ thuật, đó là cấu hình của Notion API → Next.js → Vercel, và nó có vẻ chạy Incremental Static Regeneration (ISR) được kích hoạt bởi các thay đổi trong trường trạng thái.

Tôi cũng không hiểu rõ lắm, nhưng mà.

🎀 Điểm Nhấn 🎀

Trang Works

Đối với màn hình trượt Featured và thông số kỹ thuật hình thu nhỏ trên trang Works,

Tôi đã quyết định thông số trong khi triển khai chúng.

Những thứ như thế này (tự động lấy hình ảnh từ bài viết, thu phóng bằng chuyển động con trỏ ngang).

Có thể xây dựng trong khi kiểm tra "sẽ thấy tuyệt nếu nó trông như thế này" ngay tại chỗ là phần tuyệt nhất khi sử dụng Claude Code.

Là một nhà thiết kế, nếu tôi làm việc với một kỹ sư,

Tôi tưởng tượng mình sẽ bỏ cuộc giữa chừng, nghĩ rằng, "Nếu yêu cầu sửa nhiều thế này, chắc họ ghét mình mất."

AI thực sự là một công cụ cách mạng cho các ngành nghề sáng tạo theo nhiều cách.

Melo-bot

Melo-bot nơi Melo nói từng ký tự một từ bảng điện tử trong header.

Cái này tái sử dụng một phần chương trình tôi đã làm trước đây với ChatGPT.

Tôi rất vui vì có thể triệu hồi Melo-bot đang ngủ yên về sirome.net.

Ngoài ra, thế giới pixel art của Shiro và Melo, mà tôi đã bí mật tạo ra cùng với anh Tsukunajiro và anh Hor từ khoảng năm 2019, đã được hồi sinh.

Tôi rất vui; cảm ơn các bạn đã tồn tại.

Pixel art bởi Tsukunajiro.

Ehehe.

Dễ thương.

Trong tương lai, tôi dự định sẽ dần dần thêm nhiều yếu tố giống game hơn.

Do tích hợp Notion, thời gian tải đôi khi có thể lâu,

Vì vậy hãy dùng nó để giết thời gian nhé.

Favicon Xoay Mỗi Giây

Favicon là biểu tượng nhỏ hiển thị trên tab trình duyệt.

Tôi không thể đăng ký ảnh động GIF, vì vậy tôi đang hiển thị 10 ảnh PNG cách nhau một giây.

Dễ thương.

Trên điện thoại thông minh, tôi đặt nó làm nút menu.

Nó nhìn lại khi bạn chạm vào.

Hãy thử chơi với nó trên điện thoại của bạn nữa nhé.

sirome.net

Được Sản Xuất Trong Tổng Cộng Hai Tuần.

Vì vậy, tôi rất vui vì có thể thoát khỏi Wix. Nó đắt, sau tất cả.

Tôi đã làm nó từng chút một vào những đêm khuya và sáng sớm, và trước khi tôi kịp nhận ra, nó đã hoạt động.

AI... Tôi vẫn còn những cảm giác hoài nghi, nhưng tôi đã trải nghiệm tận mắt rằng thế giới đã thay đổi hoàn toàn.

Tôi chưa thực sự muốn sử dụng AI để tạo hình minh họa vì các vấn đề pháp lý, nhưng

Tôi hy vọng sẽ hòa hợp tốt với AI trong thiết kế và sáng tạo để tạo ra những thứ thú vị.

Hãy liên hệ với tôi để tư vấn công việc nhé.

Ngoài ra, từ bây giờ, tôi muốn đầu tư vào credit công việc và các bài viết lưu trữ,

Xuất bản từng cái một một cách cẩn thận.

Tôi cũng sẽ cập nhật lại các bài viết hiện có trên sirome.net.

Mỗi bài đều là một tác phẩm tôi đặt trái tim vào.

Nhờ mọi người, tôi đã có thể vẽ nhiều bức tranh cho đến nay,

Và tôi biết ơn vì đã sống sót theo cách này.

Nó vẫn còn đang trong quá trình hoàn thiện,

Nhưng hãy tiếp tục ủng hộ Shiro, Melo và Aketa Rashiro nhé!

Hãy xem trang web! Tôi đang chờ ấn tượng của bạn qua reply hoặc DM ✨

🔗 sirome.net

Ghi Chú Về Tech Stack

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

Nhân tiện, tôi cũng viết bài này trong Notion.

Nếu bạn thấy thú vị, hãy chia sẻ nhé!

Aketa Rashiro