- Primo v3.2 biểu diễn site đồng thời dưới dạng tệp cục bộ và các hàng trong cơ sở dữ liệu trên máy chủ, cho phép agent sửa mã còn biên tập viên không chuyên kỹ thuật chỉnh sửa cùng một site trong trình duyệt
- Nhà phát triển xử lý trang, nội dung, thiết lập và route bằng component Svelte cùng tệp YAML, rồi đồng bộ với cơ sở dữ liệu quan hệ trên máy chủ bằng
primo push
- Trình chỉnh sửa trên trình duyệt cung cấp chỉnh sửa văn bản ngay trên trang đã render, kéo-thả block, các kiểu trang và trường tùy chỉnh, nhờ đó ít phụ thuộc hơn vào màn hình CMS thiên về biểu mẫu
- Đối tượng chính là nhà phát triển, freelancer và agency cần bàn giao site tùy chỉnh cho biên tập viên không chuyên kỹ thuật, với 12 starter và hơn 40 block
- Nội dung nằm trong SQLite dựa trên PocketBase, mã vẫn ở repository của người dùng; giấy phép MIT và xuất tĩnh bằng
primo pull giúp giảm phụ thuộc vào dịch vụ
Mô hình CMS dùng chung tệp và cơ sở dữ liệu
- Primo v3.2 là CMS mã nguồn mở được phát triển từ năm 2019, biểu diễn toàn bộ site đồng thời dưới dạng tệp và các hàng trong cơ sở dữ liệu
- Tệp cục bộ được agent chỉnh sửa trực tiếp, còn cơ sở dữ liệu trên máy chủ là đối tượng để con người chỉnh sửa trực quan trong trình duyệt
- Luồng cơ bản là tạo site bằng agent, sau đó chuyển quyền chỉnh sửa trên trình duyệt cho khách hàng hoặc người quen
- Trong ví dụ,
claude tạo kiểu trang pricing, viết pages/pricing.yaml, blocks/pricing-tiers/component.svelte, rồi triển khai 3 tệp bằng primo push
- Sau khi triển khai, người dùng có thể trực tiếp chỉnh sửa câu chữ và giá của các gói pricing trong trình duyệt
Cấu trúc tệp cục bộ do agent xử lý
primo pull tải toàn bộ site xuống dưới dạng tệp thông thường
- Bao gồm component, trang, nội dung, thiết lập và route
- Block là component Svelte, còn nội dung và thiết lập là YAML
- Có thể scaffold site mới hoặc tải xuống site hiện có
- Các CLI agent như Claude Code, Cursor, Codex chỉnh sửa trên toàn bộ repository
- Đây là luồng chỉnh sửa toàn bộ codebase giống như khi xử lý codebase Next.js hoặc SvelteKit
- Lệnh ví dụ là
$ claude "redesign the pricing page"
primo push đồng bộ các tệp đã thay đổi với cơ sở dữ liệu quan hệ trên máy chủ
- Khách hàng chỉnh sửa cùng site trong trình duyệt, ngay trên trang đã render
- Các trường do block khai báo được hiển thị thành trường có thể chỉnh sửa
CMS chỉnh sửa ngay trên trang đã render
- Trình chỉnh sửa hoạt động ngay trên trang đã render, không yêu cầu tab CMS riêng hay chế độ xem biểu mẫu làm trải nghiệm chỉnh sửa mặc định
- Mọi trường do block khai báo đều được hiển thị bằng bề mặt có thể nhấp và nhãn
- Dùng cùng mô hình mà renderer đọc, không có tầng chuyển đổi riêng
- Chỉnh sửa trên trang là cách nhấp vào văn bản trên trang đã render để nhập trực tiếp
- Chip trường cho biết mục hiện đang được chỉnh sửa
- Với block kéo-thả, có thể sắp xếp lại, thêm, xóa block trong cây trang và ghi thay đổi trực tiếp vào nguồn
- Kiểu trang tùy chỉnh cho phép định nghĩa hình dạng trang một lần, sau đó khách hàng có thể tạo bao nhiêu trang cần thiết mà không phá vỡ cùng mô hình
- Trường tùy chỉnh hỗ trợ text, rich text, image, link, number, group và repeater
- UI chỉnh sửa được tạo từ schema
- Cộng tác thời gian thực là tính năng cho phép nhiều người cùng chỉnh sửa một trang đồng thời, bao gồm hiển thị sự hiện diện trực tiếp và chỉnh sửa không xung đột
- Chế độ xem biểu mẫu có cấu trúc được dùng cho các trường không hiển thị trên trang như SEO, metadata, repeater và thiết lập ẩn
Starter và block cho người làm site tùy chỉnh
- Primo nhắm tới nhà phát triển, freelancer và agency xây dựng site tùy chỉnh cho biên tập viên không chuyên kỹ thuật
- Marketplace cung cấp starter theo từng loại khách hàng và các block section phổ biến
- Ví dụ có starter cho nhà hàng, coach, portfolio và dịch vụ địa phương
- Quy mô cung cấp là 12 starter và hơn 40 block
- Mỗi starter là một site tự hoàn chỉnh
- Bao gồm component Svelte và các trường kiểu dữ liệu
- Được scaffold thành repository
- Không có khóa chặt vào framework hay runtime ẩn
- Người dùng có thể fork starter, chỉnh sửa rồi triển khai, hoặc tự tuyển chọn starter và block của riêng mình
Khác biệt với WordPress, Headless CMS và site builder
- WordPress được so sánh như giải pháp cung cấp site khách hàng có thể chỉnh sửa, nhưng với cấu trúc nội dung và theme PHP đan xen
- Headless CMS có thể làm cấu trúc mã gọn gàng, nhưng schema nằm trong màn hình quản trị riêng
- Site builder cung cấp kéo-thả, nhưng được đối chiếu như hình thức thuê kết quả từ nền tảng
- Điểm khác biệt mà Primo nhấn mạnh là một nguồn duy nhất được cả đội ngũ và agent cùng chỉnh sửa
- Vị trí mã là các tệp Svelte và repository của người dùng
- Vị trí chỉnh sửa của khách hàng là trang đã render
- Schema đặt trong
fields.yaml cạnh .svelte
- Agent có thể chỉnh sửa toàn bộ site dưới dạng tệp
- Hosting và giấy phép được nêu là self-host và MIT
Quyền sở hữu dữ liệu và trạng thái vận hành
- Nội dung được lưu trong SQLite thông qua PocketBase, còn mã vẫn ở repository của người dùng
primo pull cung cấp bản xuất tĩnh của mã và nội dung bất cứ lúc nào- Primo dùng giấy phép MIT và cho biết ngay cả khi dự án biến mất, mã đang chạy và các site đã xây dựng vẫn tiếp tục hoạt động
- Trạng thái vận hành là v3.2 sau 7 năm, với các ví dụ site production gồm dự án khách hàng của agency, cửa hàng thương mại nhỏ, site tài liệu và trang marketing nội bộ
- Agent không được xem là sản phẩm mới, mà là client mới của cùng một mô hình đã được duy trì từ năm 2019
Payload, TinaCMS, Sanity Studio và hỗ trợ React
- Payload là headless CMS, với schema nằm trong màn hình quản trị và nội dung được lấy qua API
- TinaCMS được so sánh như cách đặt trình chỉnh sửa dựa trên Git phía trước các tệp Markdown
- Sanity Studio là màn hình quản trị dựa trên React trên một content lake được host
- Primo để trình chỉnh sửa và renderer cùng đọc các tệp Svelte và hàng cơ sở dữ liệu, không có tầng chuyển đổi API giữa hai bên
- React hiện không được hỗ trợ trong block của Primo
- Primo được xây dựng xoay quanh cách tiếp cận compile-time của Svelte, và cấu trúc này biến block thành tệp mà trình chỉnh sửa và renderer có thể đọc trực tiếp
- Hỗ trợ React bên trong block Primo không nằm trong roadmap
- Roadmap có
primo integrate <framework>
- Trước tiên là cách đặt Primo lên trên ứng dụng SvelteKit hiện có
- Sau đó Astro được nhắc tới, còn Next.js vẫn là điều mong muốn
- Theo hướng này, component production vẫn nằm trong framework tương ứng, còn Primo chỉ phụ trách nội dung và trình chỉnh sửa
Cấu trúc block và xác thực CLI
- Block gồm hai tệp đặt cùng nhau
- Component phụ trách render
- Schema cho trình chỉnh sửa biết có những trường nào
- Ví dụ
blocks/hero/fields.yaml khai báo các trường headline, subheadline, cta
headline và subheadline là textcta là link
- Xác thực CLI đọc
PRIMO_TOKEN từ biến môi trường
- Token được tạo trong màn hình quản trị theo từng site
primo pull <host> sao chép dự ánprimo push chỉ tải lên các tệp đã thay đổi
- Xác thực giống với phần biên tập viên sử dụng, nên không cần học bề mặt API riêng
- Hoạt động qua HTTPS trên mọi instance Primo, bao gồm cả instance self-hosted
Lệnh bắt đầu
- Workspace mới được tạo bằng lệnh sau
npx primo-cli init my-workspace
- Sau khi tạo, trạng thái
workspace ready và server.yaml written được hiển thị
- Nội dung về giấy phép và giá được nêu là MIT, mã nguồn mở và miễn phí vĩnh viễn
1 bình luận
Ý kiến trên Hacker News
Trình biên tập CMS kéo-thả trông rất ấn tượng trong bản demo, nhưng khi từng vận hành một trình biên tập tương tự trong công ty, đó đúng là địa ngục cập nhật không hồi kết
Những yêu cầu kiểu “có thể căn phải văn bản và đổi thành màu xanh không?” cứ liên tục xuất hiện, và cuối cùng mỗi block lại ngày càng có thêm nhiều thuộc tính
Người viết nội dung thực tế cũng thấy khó sử dụng hiệu quả, và kết quả tạo ra nhìn chung cũng không mấy hài lòng
Có thể đào tạo thêm thì sẽ khá hơn, nhưng sự đánh đổi giữa mức độ tự do và việc duy trì nhận diện thương hiệu vẫn luôn còn đó
Trong trường hợp của chúng tôi, CMS headless có vẻ là cách tiếp cận tốt hơn. Chỉ cung cấp nội dung, rồi để một vài chuyên gia triển khai bằng code theo đúng thiết kế sẽ ổn hơn, nhưng không phải ai cũng có đủ dư địa để làm vậy, nên chắc chắn loại CMS này vẫn có chỗ đứng
Vài tháng trước, khi làm mới một trang thương mại điện tử cho khách hàng, chúng tôi đã tạo các section/block có thể chỉnh sửa bằng Maglev, và trải nghiệm biên tập tự nó là khá tốt
Nhưng sau khi ra mắt, khách hàng tuyển một nhân viên marketing chỉ biết HTML/CSS ở mức rất cơ bản, và chúng tôi đã phải vất vả thuyết phục người đó rằng thay vì tự viết HTML/CSS, tốt hơn là để developer tạo những section cần thiết
Có thể thêm trình biên tập cho developer như Primo, nhưng từ kinh nghiệm lâu năm, tôi không muốn khách hàng trực tiếp đụng vào HTML/CSS của website
Tôi cũng không muốn một mối quan hệ kiểu “nếu làm hỏng thì phải trả tiền”
Xét rộng hơn thì CMS nào cũng có cùng vấn đề này. Tôi cũng từng giúp một công ty có website Webflow bị phá hỏng, điển hình là nhà thiết kế làm xong rồi nhân viên marketing cố “cải thiện” UI và làm vỡ toàn bộ mọi thứ
Số lượng component có thể tạo ra là có giới hạn
Lý tưởng nhất là cần một CMS giúp khách hàng dễ dàng thay đổi HTML mà không cần code. Như vậy trang sẽ tải nhanh, tối ưu tìm kiếm cũng tốt hơn, và developer không phải phát minh lại bánh xe
Đó là lý do tôi tạo ra Versoly(https://versoly.com/). Tại sao chỉ để đổi màu nền hoặc thêm section mới mà lần nào cũng phải liên hệ developer?
Nhưng dù dùng CMS nào đi nữa, chẳng phải vấn đề biên tập viên nội dung muốn căn phải văn bản và đổi nó thành màu xanh vẫn sẽ luôn tồn tại sao?
Hiện vẫn gần như chưa có tài liệu chính thức, nhưng nếu ai quan tâm thì rất mong có thể xem trang đầu tiên và cho biết liệu có đáng để thử không
Tôi cũng muốn nghe phản hồi chung hoặc những bài học rút ra từ trải nghiệm thực tế của mọi người
https://brick-cms.com/
GitHub:
https://github.com/primocms/primo
Thảo luận trước đó:
https://news.ycombinator.com/item?id=23820201
https://news.ycombinator.com/item?id=25301040
Show HN có kèm nội dung văn bản từ một nơi có vẻ là tài khoản khác của tác giả gốc:
https://news.ycombinator.com/item?id=36801101
Có vẻ SSG có nghĩa là trình tạo website tĩnh (Static Site Generator), nhưng tôi nghĩ nên có nỗ lực viết sao cho người đọc dễ hiểu hơn, nhất là khi họ chỉ lệch ra khỏi lĩnh vực này một chút
Dù làm web development, tôi cũng phải dừng lại một chút mới giải mã được chữ viết tắt này
Dù vậy, với những người dùng chưa biết thì viết đầy đủ ra vẫn có thể hữu ích hơn
Sẽ rất hay nếu có công cụ kiểu này để xử lý nội dung động dạng chuỗi liên tục như bài blog hay bài review
Mọi người vẫn bám vào WordPress rất nhiều, nhưng chuyện tùy biến và theme thì gần như là cơn ác mộng
Vào thời đó, đó gần như là một trong số rất ít cách để tạo blog một cách dễ dàng
Vấn đề là ngay khi bạn bước ra ngoài phạm vi tiêu chuẩn, đột nhiên bạn sẽ cần kiến thức rất sâu về cấu trúc nội bộ của WordPress
Khoảng 3 năm trước, HN đã đưa CMS mã nguồn mở Primo lên trang nhất(https://news.ycombinator.com/item?id=23820201), và nhờ vậy mà giữa đại dịch tôi đã nghỉ công việc remote thoải mái để toàn tâm toàn ý làm nó
Từ đó đến nay tôi đã tiêu hết tiền tiết kiệm, mất tên miền primo.af vào tay Taliban, và còn thuyết phục vợ trở thành developer/designer để giúp tôi
Dù vậy tôi vẫn tự hào về những gì đã làm được, và khi thấy nó giúp mọi người học phát triển web, đưa các website cá nhân lên mạng và quản lý site cho khách hàng, tôi càng tin hơn vào sức mạnh và sự đơn giản của cách tiếp cận này
Primo 2 ra mắt beta công khai hôm nay cung cấp khả năng chỉnh sửa nội dung trực tiếp trên trang, xây dựng trang và hơn thế nữa
Tôi bắt đầu làm Primo vì đã quá mệt mỏi với việc xây website và thực tế là người dùng không chuyên rất khó quản lý chúng
Trong các dự án freelancer, tôi phải vật lộn với các theme WordPress dễ vỡ, điều hướng dashboard và tổ hợp plugin; còn với vai trò developer ở agency, tôi thấy CMS nguyên khối và meta-framework/CMS headless là quá mức cần thiết cho các landing page hay site giới thiệu
Với vai trò giảng viên dạy code, tôi thấy học viên bị choáng ngợp khi phải đối mặt với CLI, API, package manager, bundler, framework và meta-framework để có thể làm việc với web
Không hề có một con đường đơn giản và dễ tiếp cận để tạo, quản lý, phát triển và host những website phổ biến như blog, landing page hay site giới thiệu
Về cơ bản Primo là một CMS giúp quản lý nội dung dễ dàng, nhưng còn gói cả page building, chỉnh sửa code, tạo static site, triển khai/hosting bằng GitHub trong cùng một giao diện
Các block được viết bằng Svelte, tức HTML/CSS/JS, nên có tính responsive và style được đóng gói
Vì là static site nên cũng có được các lợi thế của serverless về chi phí, bảo mật, khả năng mở rộng và tốc độ
Primo là công cụ dành cho những ai muốn toàn quyền kiểm soát site bằng HTML/CSS/JavaScript nhưng vẫn muốn mang lại trải nghiệm chỉnh sửa nội dung cực kỳ đơn giản cho bản thân và cho bạn bè/khách hàng/cộng tác viên không chuyên, hơn là cho những người thích các điều khiển thiết kế WYSIWYG kiểu SquareWixFlow
Nó nhắm đến những người thấy ngột ngạt với công cụ no-code và nền tảng độc quyền, nhưng vẫn muốn giữ sức mạnh của code trong một thứ gì đó đơn giản hơn
Xa hơn nữa, Primo là một nỗ lực để giữ web trong tay mỗi cá nhân
Hy vọng rằng bằng cách làm cho xuất bản web dễ tiếp cận hơn, có thể nâng cao hiểu biết công nghệ và trao cho mọi người khả năng tự do biểu đạt để họ không dễ bị đẩy vào những chiếc hộp đen và những khu vườn tường kín
Tuy nhiên hệ thống quản lý nội dung lại là vấn đề. Tôi đã kỳ vọng kiểu như các static site generator thông thường, chỉ cần đặt file Markdown vào thư mục là sẽ tạo ra bài viết hay blog post theo template
Có lúc tôi đã fork repository của Primo và tự triển khai một cách làm tùy chỉnh để chuyển các mục trong database thành cấu trúc file/thư mục, nhưng chiều ngược lại có vẻ rắc rối nên tôi chọn hướng khác, rồi lấy cảm hứng từ hướng dẫn này để tự làm một Markdown static site generator: https://joshcollinsworth.com/blog/build-static-sveltekit-mar...
Có thể use case của tôi không phải đối tượng mà họ nhắm tới, nhưng nếu dự án có thể được lưu dưới dạng cấu trúc file/thư mục động thay vì ghi vào database, và được chỉnh sửa/quản lý phiên bản như một dự án SvelteKit thông thường, thì tôi nghĩ nó sẽ là một sản phẩm tuyệt vời
Về bản chất, nó sẽ trở thành một framework tạo static site dựa trên Svelte với thư viện component và UI chuyên dụng riêng
Diễn đàn cũng rất hay, và một vài câu hỏi tôi thắc mắc đã có sẵn câu trả lời
Tôi đã dùng WordPress rất lâu và gần đây đang tìm hiểu Svelte, nên cái này thực sự rất gần với thứ tôi đang tìm
Rất tôn trọng công sức đã đổ vào để làm ra nó
Dự án hay, nhưng việc cần có tài khoản Supabase để “tự host” thì hơi đáng thất vọng
Có vẻ nó chỉ hoạt động với một số dịch vụ hosting cụ thể có thể kết nối tới Supabase, và còn hướng người dùng lấy nội dung trang từ GitHub
Vì thế nó có vẻ gần với một CMS chạy cùng các nhà cung cấp dịch vụ cụ thể hơn là một CMS thật sự có thể tự host
Mục tiêu là giúp mọi người đưa server của mình lên một cách dễ nhất có thể, nên mới dẫn đến việc kết nối với những dịch vụ đó
Nhưng tôi đang tách backend ra để có thể thật sự tự host
Dịch vụ bên ngoài thực sự bắt buộc chỉ là GitHub, và sau này có thể thêm các nhà cung cấp khác như GitLab
Dự án tốt, nhưng thành thật mà nói tôi cảm thấy giờ đã đến lúc cả developer lẫn người dùng đều hưởng lợi hơn từ ít JavaScript hơn, hoặc thậm chí không có JavaScript
Tôi đang chuyển blog cũ sang blog mới được tạo bằng Zola(https://www.getzola.org), và cũng đang làm lại site portfolio mới vốn được dựng bằng React/Gatsby sang Zola vì chênh lệch hiệu năng quá lớn
Thỉnh thoảng tôi còn tắt JavaScript khi lướt web, và nếu lúc đó một site không hoạt động đầy đủ hoặc thậm chí không tải nổi thì đó là một nhược điểm rất lớn
Site cũ của tôi dùng jQuery nên cũng khá khó chịu, còn dùng thử những thứ như React thì đúng là ác mộng
Bên trong nó sử dụng Svelte compiler
Thật khó tin là đã hơn 10 năm kể từ khi tôi tạo ra một trình tạo website tên là Stiqr vào năm 2010
Trang đó hiện không còn hoạt động nữa, nhưng vẫn có thể thấy dấu vết của nó trong video YouTube
https://www.youtube.com/watch?v=B-ff53t8TuU&t=224s
Khi đó, vào năm 2010, thiết kế responsive bắt đầu bùng nổ nên tôi đã dừng dự án lại, nhưng tôi vẫn tin rằng cách làm website trong tương lai gần sẽ đi theo hướng này
Sự kết hợp giữa kiểu kéo-thả/khối và Svelte thực sự rất tuyệt, nhưng với tôi nó giống một công cụ nằm ở đầu sai của phổ lựa chọn
Đây là một trình dựng website trực quan cho phép tùy biến các khối bằng trình chỉnh sửa trực tuyến
Điều tôi muốn là một giao diện trực tuyến để khách hàng có thể thêm/sửa văn bản hoặc thực hiện các chỉnh sửa nhỏ trên website Svelte mà tôi đã làm bằng công cụ của mình ở môi trường offline
Sẽ rất hay nếu tôi có thể xây dựng website theo một tiêu chuẩn giao diện nhất định để Primo có thể đọc được, còn khách hàng thì có thể chỉnh sửa bằng giao diện trực quan
Những chỉnh sửa lớn hơn sẽ quay lại với tôi, và tôi vẫn có thể giữ được tốc độ cùng sự tự do của quy trình làm việc offline
Có thể sẽ có người nói là tôi cần headless CMS, nhưng tất cả những cái tôi từng dùng đều quá phức tạp và chỉ riêng việc cấu hình cùng bảo trì thôi cũng đã là một cơn đau đầu lớn
Trừ khi bạn tạo các trường cụ thể, họ sẽ không thể chỉnh sửa các khía cạnh trực quan như biến ảnh thành hình tròn hay hình vuông chẳng hạn
Nếu vấn đề là không thể dùng IDE cục bộ, thì hiện tại có thể bundle các component Svelte thành vanilla JavaScript rồi import vào khối Primo và truyền dữ liệu qua các trường
Tuy vậy, có lẽ nên chờ vài tuần trước khi dùng trong production cho đến khi nó ổn định hơn
Cách bạn mô tả thực ra gần như đúng với cách tôi làm dự án cho khách hàng: tôi viết toàn bộ mã, thường tái sử dụng các khối từ dự án khác, rồi bàn giao một website mà khách hàng có thể chỉnh sửa ngay từ ngày đầu chỉ với hướng dẫn tối thiểu
Tôi không rõ ý bạn là “tùy biến khối” không bao gồm việc thay đổi văn bản, hay là các hành động có thể giao cho khách hàng vẫn chưa được giới hạn đủ chặt để bàn giao
Có vẻ nó cho phép chèn các section được quản lý bằng kéo-thả vào trong phần markup trang thông thường, và hỗ trợ hầu hết framework, bao gồm cả Svelte
Có thể thiết lập bằng FTP