Vibe Coding - Code lại blog từ đầu và rebrand thành khoa.blog

Tại sao lại phải code lại blog từ đầu

Lần gần nhất mình chuyển blog là từ static website với Ghost CMS sang Substack.

Lý do lúc đó là mình đang đẩy mạnh phong trào nocode ở Việt Nam nên mình muốn dùng một platform nocode như Substack để làm blog.

Nhưng gần đây mình đã bỏ nocode và quay trở lại với coding dùng AI. Mình cũng mới lập một cộng đồng và dự án mới tên là Vibe Coder School để phát triển cộng đồng dùng AI để làm ứng dụng.

Cho nên mình quyết định code lại blog từ đầu.

Các yêu cầu

• Mình muốn quay trở lại dùng static site và viết blog với MD files để tốc độ load site nhanh.
• Mình muốn dùng Next.js để sau này có thêm các tính năng khác cho blog. Còn tính năng gì thì hiện tại chưa biết.

Và tình cờ mình có đọc được blog của một cao thủ frontend How I Built My Blog

Anh này đã hướng dẫn rất cụ thể và chi tiết. Mình cũng đã có kinh nghiệm chuyển blog sang Gridsome trước đây nên việc này không quá xa lạ.

Tại sao rebrand từ niviki.com sang khoa.blog

Mình đã viết blog tại NIVIKI (đọc là /ni vi ki/) từ 2015. Mình đã đi qua quá trình từ code dạo freelancer, nhân viên đi làm công ty, làm outsourcing, tự build product, và hiện tại là đầu tư crypto.

Lý do đặt tên kiểu không có nghĩa cụ thể như NIVIKI vì thời đó các startup hay đặt tên theo kiểu này như Lazada, Zalora.

Nhưng sau 10 năm, mình muốn quay về với 1 cái tên ngắn gọn, thân thuộc, có ý nghĩa và dễ nhớ hơn.

Một số tác giả nổi tiếng mình thích cũng đặt tên như vậy là seth.blog, tim.blog.

Và mình cũng muốn có 1 cái tên như vậy cho mình.

Bắt dầu vibe Coding

Vì đã có blog hướng dẫn cụ thể cách làm ở trên, nên mình chỉ cần copy hết nội dung blog đó và hỏi AI.

Prompt mình dùng

Read this blog below and guide me to build my own blog system based on the blog post.
But I don't need some part of the features like

The like button
The rainbow
{blog hướng dẫn copy ở https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/}

Sau đó mình nhờ nó tạo cấu trúc thư mục cho project.

give me project structure tree

Sau đó mình nhờ nó tạo các file cần thiết cho project.

Sau đó, mình dùng Cursor để tạo project và chỉ với 1 prompt mình đã có cấu trúc thư mục và các file cần thiết.

Sáng tạo cho blog nhìn độc đáo hơn

Sau khi AI tạo được 1 blog hoàn chỉnh, mình đã sáng tạo thêm một số thứ cho đẹp hơn.

Vì mình thích đọc sách nên mình đã tạo lên ý tưởng để tạo homepage giống như một quyển sách với nhiều chapter. Mỗi chapter sẽ có nhiều bài viết bên trong.

Dùng MDX để chèn custom component

Vì lần này mình dùng MDX. Với MDX bạn có thể chèn trực tiếp các custom component vào thẳng markdown file.

Ví dụ mình chèn 1 component tính chỉ số BMI của cơ thể như này. Bạn có thể tương tác với nó để tính chỉ số BMI.

Thì mình có thể tạo custom component và chèn vào trong file markdown như này.

Text bình thường ở đây ở đây

<IBMCalculator />

Text bình thường ở đây ở đây

Dùng như thế này sẽ rất tiện, mình có thể tạo các component riêng, khiến users có thể tương tác thêm ở từng bài viết.

Ví dụ mình viết bài về đầu tư thì có thể tạo các component tính toán lợi nhuận, tỷ suất sinh lợi, vv.

Migrate data từ Substack

Phần tốt nhiều tời gian nhất có lẽ là migrate data từ Substack sang blog mới và thêm lại category cho các bài viết.

Blog mới cần dùng các file markdown nên mình cần phải convert sang md files.

Repo này sẽ giúp bạn tải bài viết từ substack và convert sang md files.

git clone https://github.com/timf34/Substack2Markdown.git

Sau khi có file markdown, mình viết 1 script để convert sang file .mdx

Nhưng có 2 thứ mất thời gian nữa là sửa lỗi mdx và thêm category cho bài viết.

Vì lúc trước mình có chèn code mô tả vào bài viết nên nó có các dấu ký tự đặt biệt như $, {, } nên lúc chuyển dữ liệu phải chỉnh lại.

Ngoài ra còn một vấn đề là tốt thời gian nữa là các bài viết lúc trước chưa phân theo categories nên mình phải phân loại lại.

Mình cũng dùng AI để đọc hết các title của blog (306 bài viết) và prompt để AI đề xuất các categories.

Sau đó mình dùng Windsurt để đọc và update categories mới luôn. Tại mình đang dư credit bên Windsurf nên dùng cho hết

Prompt mình dùng

Frontmatter Enhancement for these file below in folder @src/content
* Add a description field to the frontmatter of each blog post:
    * Write a concise summary of the blog post in Vietnamese, consisting of 1-2 sentences that capture the essence or key points of the post. Don't make it duplicate
* Add a categories field to the frontmatter of each blog post:
    * Identify and list 1-3 relevant categries that reflect the themes, topics, or specific content discussed in the blog post. These categories should be in the array [  "programming-technology",  "startup-business",  "crypto-blockchain",   "learning-education",  "personal-development",  "marketing-content",  "events-community",  "travel-lifestyle ]
Rules
- Manually do that, do not write any code
- Update one by one blog
- just show log that you did which file, no explain

Files to update:
- tim-nguoi-nuoc-ngoai-de-noi-chuyen-tieng-anh-tai-preply.mdx
- tinh-co-code-dao-tren-upwork.mdx
- tips-khi-chon-giao-vien-tren-italki.mdx
- to-chuc-y-tuong-viet-blog-voi-workflowy.mdx
- toi-biet-lap-trinh-nhung-khong-biet-lap-trinh-cai-gi.

Chỉnh sửa và thêm các tính năng cơ bản

Sau khi có hết dữ liệu mình thêm một vài tính năng cơ bản của 1 blog như

• SEO
• Thêm table of contents
• Thêm search
• Sitemap
• RSS
• Thêm trang category
• Related Posts
• Thêm analytics
• Mobile responsive
• Redirect 301 từ các link cũ sang link mới
• Dark mode

Nói chung và mình muốn basics như vậy trước. Khi nào có thời gian mình sẽ thêm các tính năng khác như newsletter, like, share, comment, vv.

Kết quả

Nhờ có AI mà mình thấy khả năng mở rộng với code rất lớn.

Mình có thể tạo ra nhiều component, tạo ra một blog với nhiều tính năng khác nhau tăng trải nghiệm của người đọc hơn là phụ thuộc và các nền tảng hiện có.

Ngoài ra, tốc độ load trang đang rất tốt (mobile chưa tối ưu)

Sau quá trình rebuild blog này, mình có một số takeaways:

1. AI-powered development thực sự thay đổi cách chúng ta làm việc. Những task mất hàng ngày giờ chỉ cần vài giờ.

2. Planning trước rất quan trọng. Mình nên list ra tất cả requirements và prioritize trước khi code. Nếu bạn chưa biết plan gì có thể dùng cách của mình là tìm các tutorials và hướng dẫn trên internet rồi quăng vào prompt để hỏi AI.

3. Migration data luôn là phần tốn thời gian nhất. Nên dành 50% thời gian cho việc này.

4. Backup everything. Mình đã export toàn bộ data từ Substack trước khi migrate.

5. Test thoroughly. Đặc biệt là các internal links và image URLs sau khi migrate.

Với blog này, mình sẽ thêm các tính năng như

• Newsletter integration với ConvertKit hoặc Mailchimp
• Comment
• Like, hoặc reaction
• Reading indicator

Quan trọng nhất là mình giờ có "full control over blog" và có thể customize thoải mái theo ý muốn mà không bị giới hạn bởi platform nào cả. Mình đã chia sẻ về tại sao cần có blog cá nhân và cách làm website tối giản trước đây.

Hy vọng bài chia sẻ này sẽ giúp bạn có thêm ý tưởng để tự code blog lại blog cá nhân của mình vì mình biết có nhiều bạn đang dùng các hosted blog như Substack, Ghost, Wordpress.org, vv.