Hành trình chuyển từ WordPress sang Jekyll: Khi AI và Static Site Generator thay đổi cuộc chơi

DemandSphere vừa hoàn tất một dự án kỹ thuật quan trọng: chuyển đổi toàn bộ website từ nền tảng WordPress sang Jekyll. Quy trình này không chỉ đơn thuần là thay đổi hệ thống quản lý nội dung (CMS), mà còn là bước chuyển mình sang mô hình Static Site Generator (SSG) hiện đại, được hỗ trợ đắc lực bởi các tác nhân AI như Claude Code.

Tại sao lại rời bỏ WordPress?

WordPress đã phục vụ DemandSphere tốt trong nhiều năm, nhưng với tốc độ phát triển nhanh chóng của công nghệ và sự phổ biến của AI, những hạn chế của nó bắt đầu lộ rõ. Vấn đề lớn nhất là tốc độ và sự phụ thuộc vào các nhà phát triển (developer) chuyên về WordPress.

WordPress thường được biết đến với các lỗ hổng bảo mật, dù việc sử dụng các dịch vụ lưu trữ uy tín có thể giảm thiểu rủ ro này. Tuy nhiên, điểm nghẽn chính nằm ở việc khó tìm kiếm và duy trì nhân tài. Một lập trình viên giỏi WordPress thường có khả năng làm tốt nhiều việc khác, nên việc để họ chỉ chăm chút cho WordPress đôi khi被视为 lãng phí nhân lực.

Cấu trúc website mới

Hơn nữa, trong bối cảnh Markdown trở thành "ngôn ngữ chung" của các mô hình ngôn ngữ lớn (LLM) và xu hướng các trang web headless lên ngôi, việc chuyển sang một framework tĩnh như Jekyll hay Astro trở nên hợp lý hơn bao giờ hết.

Tại sao chọn Jekyll?

Mặc dù Cloudflare vừa công bố một framework CMS mới dựa trên Astro (được coi là "kẻ kế thừa tinh thần" của WordPress), DemandSphere đã chọn Jekyll vì sự quen thuộc và độ ổn định. Jekyll là một SSG trưởng thành, khác biệt hoàn toàn với WordPress ở chỗ nó không sử dụng cơ sở dữ liệu hay máy chủ ứng dụng.

Thay vào đó, mọi thứ hoạt động dựa trên các tệp HTML mẫu, layout, tệp cấu hình và quan trọng nhất là Markdown. Metadata của trang được định nghĩa trong phần frontmatter (dữ liệu YAML ở đầu tệp markdown). Điều này giúp quản lý nội dung trở nên cực kỳ nhẹ nhàng và linh hoạt.

Quy trình di chuyển 288 bài viết với sự hỗ trợ của AI

Di chuyển nội dung là phần tốn thời gian nhất. Website có lịch sử hơn 15 năm với hàng trăm bài viết, nhưng không phải tất cả đều cần thiết. Đội ngũ đã sử dụng công cụ GSC (Google Search Console) nội bộ để xác định các trang có giá trị thực sự và loại bỏ những trang thừa.

Công cụ kiểm tra cấu trúc site

WordPress cho phép xuất dữ liệu dạng XML, nhưng việc xử lý dữ liệu đó thủ công là cực kỳ vất vả. Đây chính là lúc Claude Code phát huy tác dụng. Nó giúp phân tích từng trang, lọc ra nội dung không cần thiết và hỗ trợ chuyển đổi hình ảnh (featured images) một cách tự động.

Claude Code chính là yếu tố then chốt giúp dự án này khả thi trong bối cảnh cả team đều bận rộn. Nó cho phép tự động hóa nhiều quy trình mà trước đây cần thuê ngoài hoặc tốn nhiều giờ làm thủ công.

Xây dựng bộ công cụ phát triển (Dev Tools) nội bộ

Điểm sáng nhất của dự án là việc xây dựng 9 công cụ phát triển nằm ngay trong kho lưu trữ mã nguồn (repository). Các công cụ này được quản lý bởi các script audit riêng biệt và không xuất hiện trong bản dựng sản phẩm (production build).

Bảng điều khiển Dev Tools này cung cấp cái nhìn tổng quan và chi tiết về trạng thái kỹ thuật của website:

1. Site Structure: Hoạt động như một phiên bản gọn nhẹ của Screaming Frog, giúp phát hiện các URL thiếu trong sơ đồ trang (sitemap), metadata bị thiếu hoặc trùng lặp.
2. Lighthouse Auditor: Đánh giá hiệu suất trang web vượt xa tốc độ tải trang, giúp tối ưu hóa trải nghiệm người dùng.
3. Schema Auditor: Đảm bảo dữ liệu cấu trúc (schema data) luôn ở mức cơ bản tốt nhất.
4. AEO Auditor: Hỗ trợ tối ưu hóa cho câu trả lời của công cụ tìm kiếm (Answer Engine Optimization).
5. Schema Details: Phân tích chi tiết từng trang để cải thiện độ phủ sóng của schema.
6. Open Graph Preview: Xem trước cách trang hiển thị khi chia sẻ trên Facebook, LinkedIn, X và Slack.
7. Content Similarity (Topic Clusters): Sử dụng mô hình all-MiniLM-L6-v2 để vector hóa toàn bộ site, giúp hiểu rõ về sự phân nhóm chủ đề theo ngữ nghĩa.
8. Internal Linking: Sử dụng embeddings để gợi ý liên kết nội bộ, giúp các công cụ tìm kiếm hiểu rõ mối liên hệ giữa các trang.
9. Redirects: Quản lý và kiểm tra các chuyển hướng để đảm bảo không mất lưu lượng truy cập sau khi di chuyển.

Công cụ kiểm tra Lighthouse

Tìm kiếm phía Client không cần phụ thuộc bên ngoài

Một trong những cải tiến thú vị là hệ thống tìm kiếm. Jekyll tạo ra một tệp /search.json tại thời điểm xây dựng (build time), chứa danh sách tất cả các trang và bài viết.

Trang tìm kiếm chỉ cần tải một tệp JSON duy nhất này và thực hiện so khớp chuỗi (substring matching) trực tiếp trên trình duyệt. Nó đánh giá từng phần tử metadata (tiêu đề, thẻ tag, nội dung) với các trọng số khác nhau. Điều này cho phép có khả năng tìm kiếm toàn trang mà không cần Algolia, ElasticSearch hay bất kỳ API máy chủ nào, với độ trễ dưới 3ms.

Công cụ kiểm tra Schema

Kiến trúc SEO và Triển khai

Về SEO, DemandSphere thiết lập dữ liệu có cấu trúc JSON-LD trên mọi trang ngay từ ngày đầu tiên. Mọi trang đều có schema cho Organization và WebSite, BreadcrumbList, FAQPage (tự động tạo từ front matter), và BlogPosting cho các bài viết.

Việc triển khai được thực hiện trên Cloudflare Pages. Nhánh chính (main branch) được triển khai cho môi trường sản xuất (production), trong khi các nhánh khác tạo ra bản xem trước (preview). Script build.sh sẽ tự động cấu hình môi trường dựa trên biến CF_PAGES_BRANCH.

Quá trình chuyển đổi DNS diễn ra suôn sẻ nhờ đã quản lý DNS trên Cloudflare. Sau khi chuyển đổi, một số vấn đề nhỏ như favicon không hiển thị trên Google đã được khắc phục bằng cách thêm các tệp icon đa kích thước và tệp web manifest phù hợp.

Công cụ kiểm tra AEO

Kết luận và hướng tới tương lai

Dù vẫn còn nhiều việc phải làm, chẳng hạn như tối ưu hóa khoảng 65 hình ảnh lớn và phân loại lại các thẻ bài viết, DemandSphere rất hài lòng với kết quả đạt được. Việc chuyển sang Jekyll và tận dụng AI trong phát triển đã giúp họ thực hiện các ý tưởng nội dung mới nhanh hơn và với chất lượng cao hơn bao giờ hết.