- Primo v3.2 merepresentasikan situs sekaligus sebagai file lokal dan baris database server, sehingga agen bisa memperbaiki kode dan editor non-teknis bisa mengubah situs yang sama dari browser
- Developer menangani halaman, konten, pengaturan, dan rute dengan komponen Svelte serta file YAML, lalu menyinkronkannya dengan database relasional di server lewat
primo push
- Editor browser menyediakan pengeditan teks di atas halaman yang sudah dirender, drag-and-drop blok, serta tipe halaman dan field kustom, sehingga tidak terlalu bergantung pada layar CMS berbasis formulir
- Target utamanya adalah developer, freelancer, dan agensi yang perlu menyerahkan situs kustom kepada editor non-teknis, dengan 12 starter dan lebih dari 40 blok yang tersedia
- Konten tetap berada di SQLite berbasis PocketBase, kode tetap berada di repositori pengguna, dan lisensi MIT serta ekspor statis
primo pull dapat mengurangi ketergantungan pada layanan
Model CMS yang menggunakan file dan database bersama-sama
- Primo v3.2 adalah CMS open source yang berlanjut sejak 2019, yang merepresentasikan seluruh situs secara bersamaan sebagai file dan baris database
- File lokal diedit langsung oleh agen, sedangkan database server digunakan sebagai objek yang diedit secara visual oleh manusia di browser
- Alur dasarnya adalah membuat situs dengan agen, lalu menyerahkan hak edit browser kepada klien atau kenalan setelahnya
- Dalam contoh,
claude membuat tipe halaman pricing, menulis pages/pricing.yaml dan blocks/pricing-tiers/component.svelte, lalu men-deploy 3 file dengan primo push
- Setelah deploy, pengguna dapat langsung mengubah teks tier harga dan harganya dari browser
Struktur file lokal yang ditangani agen
primo pull mengunduh seluruh situs sebagai file biasa
- Mencakup komponen, halaman, konten, pengaturan, dan rute
- Blok adalah komponen Svelte, sedangkan konten dan pengaturan adalah YAML
- Bisa melakukan scaffold situs baru atau mengunduh situs yang sudah ada
- Agen CLI seperti Claude Code, Cursor, dan Codex mengubah seluruh repositori
- Alurnya seperti mengedit seluruh codebase Next.js atau SvelteKit
- Contoh perintahnya adalah
$ claude "redesign the pricing page"
primo push menyinkronkan file yang berubah dengan database relasional di server
- Klien mengedit situs yang sama dari browser, di atas halaman yang sudah dirender
- Field yang dideklarasikan oleh blok diekspos sebagai field yang dapat diedit
CMS yang diedit di atas halaman yang sudah dirender
- Editor berjalan di atas halaman yang sudah dirender, dan tidak menuntut tab CMS terpisah atau tampilan formulir sebagai pengalaman edit utama
- Semua field yang dideklarasikan oleh blok ditampilkan sebagai permukaan yang dapat diklik dan label
- Menggunakan model yang sama dengan yang dibaca renderer, tanpa lapisan konversi terpisah
- Pengeditan di halaman dilakukan dengan mengeklik teks pada halaman yang sudah dirender lalu langsung mengetik
- Chip field menampilkan item yang sedang diedit
- Dengan blok drag-and-drop, blok dapat diurutkan ulang, ditambahkan, dan dihapus di tree halaman, lalu perubahan langsung dicatat ke sumber
- Tipe halaman kustom memungkinkan bentuk halaman didefinisikan sekali, lalu klien dapat membuat halaman sebanyak yang diperlukan tanpa merusak model yang sama
- Field kustom mendukung teks, rich text, gambar, link, angka, grup, dan repeater
- UI edit dibuat dari skema
- Kolaborasi real-time adalah fitur yang memungkinkan beberapa orang mengedit halaman yang sama secara bersamaan, termasuk indikator kehadiran live dan pengeditan tanpa konflik
- Tampilan formulir terstruktur digunakan untuk field yang tidak terlihat di halaman, seperti SEO, metadata, repeater, dan pengaturan tersembunyi
Starter dan blok untuk pembuat situs kustom
- Primo ditujukan untuk developer, freelancer, dan agensi yang membuat situs kustom untuk editor non-teknis
- Marketplace menyediakan starter berdasarkan tipe klien dan blok section yang umum
- Starter untuk restoran, coach, portofolio, dan layanan lokal disebut sebagai contoh
- Skala yang tersedia adalah 12 starter dan lebih dari 40 blok
- Setiap starter adalah situs yang lengkap secara mandiri
- Berisi komponen Svelte dan field tipe
- Di-scaffold menjadi repositori
- Tidak ada framework lock-in atau runtime tersembunyi
- Pengguna dapat melakukan fork, memodifikasi, dan men-deploy starter, atau mengurasi starter dan blok mereka sendiri
Perbedaan dengan WordPress, Headless CMS, dan site builder
- WordPress menyediakan situs yang dapat diedit klien, tetapi dibandingkan sebagai struktur yang mencampurkan konten dan tema PHP
- Headless CMS dapat membuat struktur kode lebih rapi, tetapi skemanya berada di layar admin terpisah
- Site builder menyediakan drag-and-drop, tetapi dikontraskan sebagai bentuk menyewa hasil akhirnya dari platform
- Perbedaan yang ditekankan Primo adalah satu sumber kebenaran yang diedit bersama oleh tim dan agen
- Lokasi kode adalah file Svelte dan repositori pengguna
- Lokasi edit klien adalah halaman yang sudah dirender
- Skema ditempatkan di
fields.yaml di samping .svelte
- Agen dapat mengedit seluruh situs sebagai file
- Hosting dan lisensi disajikan sebagai self-host dan MIT
Kepemilikan data dan status operasional
- Konten disimpan di SQLite melalui PocketBase, dan kode tetap berada di repositori pengguna
primo pull menyediakan ekspor statis kode dan konten kapan saja
- Primo berlisensi MIT, dan menyatakan bahwa kode yang berjalan serta situs yang telah dibangun akan tetap berfungsi meskipun proyeknya menghilang
- Status operasionalnya adalah v3.2 pada tahun ke-7, dengan contoh situs produksi berupa pekerjaan klien agensi, toko commerce kecil, situs dokumentasi, dan halaman marketing sendiri
- Agen diperlakukan bukan sebagai produk baru, melainkan sebagai klien baru dari model yang sama yang telah dipelihara sejak 2019
Payload, TinaCMS, Sanity Studio, dan dukungan React
- Payload adalah headless CMS, dengan skema di layar admin dan konten diambil melalui API
- TinaCMS dibandingkan sebagai cara menempatkan editor berbasis Git di depan file Markdown
- Sanity Studio adalah layar admin berbasis React di atas content lake yang di-hosting
- Primo membuat editor dan renderer membaca file Svelte serta baris database yang sama, tanpa lapisan konversi API di antaranya
- React saat ini tidak didukung di blok Primo
- Primo dibuat berpusat pada pendekatan compile-time Svelte, dan struktur ini membuat blok menjadi file yang dapat dibaca langsung oleh editor dan renderer
- Dukungan React di dalam blok Primo tidak ada di roadmap
- Roadmap mencakup
primo integrate <framework>
- Cara menambahkan Primo di atas aplikasi SvelteKit yang sudah ada akan hadir lebih dulu
- Setelah itu Astro disebutkan, sementara Next.js masih menjadi harapan
- Dalam arah ini, komponen produksi tetap berada di framework tersebut dan Primo hanya menangani konten serta editor
Struktur blok dan autentikasi CLI
- Blok terdiri dari dua file yang ditempatkan bersama
- Komponen bertanggung jawab atas rendering
- Skema memberi tahu editor field apa saja yang ada
- Contoh
blocks/hero/fields.yaml mendeklarasikan field headline, subheadline, dan cta
headline dan subheadline bertipe text
cta bertipe link
- Autentikasi CLI dilakukan dengan membaca
PRIMO_TOKEN dari environment variable
- Token dibuat per situs di layar admin
primo pull <host> mengkloning proyek
primo push hanya mengunggah file yang berubah
- Autentikasinya sama dengan yang digunakan editor, sehingga tidak perlu mempelajari permukaan API terpisah
- Berfungsi melalui HTTPS di semua instance Primo, termasuk instance self-hosted
Perintah untuk memulai
- Workspace baru dibuat dengan perintah berikut
npx primo-cli init my-workspace
- Setelah dibuat, status
workspace ready dan server.yaml written ditampilkan
- Teks lisensi dan harga disajikan sebagai MIT, open source, dan gratis selamanya
1 komentar
Komentar Hacker News
Editor CMS drag-and-drop terlihat keren di demo, tetapi setelah menjalankan editor serupa secara internal, hasilnya seperti neraka pembaruan tanpa akhir
Permintaan seperti “bisa teksnya diratakan ke kanan dan dibuat biru?” terus berdatangan, dan pada akhirnya setiap blok terus bertambah propertinya
Penulis konten yang sebenarnya kesulitan menggunakannya secara efektif, dan hasil akhirnya juga umumnya tidak terlalu memuaskan
Dengan lebih banyak pelatihan mungkin bisa membaik, tetapi kompromi antara kebebasan dan menjaga identitas merek tetap ada
Dalam kasus kami, headless CMS tampak sebagai pendekatan yang lebih baik. Cukup sediakan kontennya, lalu beberapa ahli mengimplementasikannya dalam kode agar sesuai dengan desain, tetapi tentu tidak semua orang punya keleluasaan seperti itu, jadi CMS seperti ini jelas tetap punya tempat
Beberapa bulan lalu, saat merombak situs e-commerce klien, kami membuat section/blok yang bisa diedit dengan Maglev, dan pengalaman mengeditnya sendiri cukup baik
Tetapi setelah rilis, klien merekrut staf marketing yang hanya paham HTML/CSS pada tingkat sangat dasar, dan kami kesulitan meyakinkan orang itu bahwa section yang dibutuhkan seharusnya dibuat oleh developer, bukan ditulis sendiri dengan HTML/CSS
Bisa saja menambahkan editor developer seperti Primo, tetapi dari pengalaman panjang, saya tidak ingin klien menyentuh langsung HTML/CSS situs mereka
Saya juga tidak ingin hubungan kerja yang nadanya seperti “kalau rusak, Anda yang bayar”
Secara lebih luas, CMS apa pun punya masalah yang sama. Saya juga pernah membantu perusahaan yang situs Webflow-nya rusak, kasus klasik ketika desainer sudah membuatnya lalu staf marketing mencoba “memperbaiki” UI dan malah merusak semuanya
Jumlah komponen yang bisa dibuat ada batasnya
Idealnya, klien memerlukan CMS yang memungkinkan mereka mengubah HTML dengan mudah tanpa kode. Dengan begitu situs tetap cepat dimuat, SEO tetap bagus, dan developer tidak perlu terus menemukan ulang roda
Itulah alasan saya membuat Versoly(https://versoly.com/). Saya merasa tidak masuk akal harus selalu menghubungi developer hanya untuk mengganti warna latar atau menambahkan section baru
Hanya saja, CMS apa pun yang dipakai, masalah editor konten yang ingin meratakan teks ke kanan dan membuatnya biru sepertinya tetap akan ada
Dokumentasi resmi masih hampir belum ada, tetapi kalau tertarik, saya akan senang jika Anda melihat halaman pertamanya dan memberi tahu apakah ini layak dicoba
Saya juga ingin mendengar masukan umum atau pelajaran dari pengalaman langsung yang pernah Anda alami
https://brick-cms.com/
GitHub:
https://github.com/primocms/primo
Diskusi sebelumnya:
https://news.ycombinator.com/item?id=23820201
https://news.ycombinator.com/item?id=25301040
Show HN dengan teks tambahan dari tempat yang tampaknya merupakan akun lain milik penulis asli:
https://news.ycombinator.com/item?id=36801101
SSG tampaknya berarti static site generator, tetapi saya rasa perlu ada upaya untuk menuliskannya dengan cara yang lebih mudah dipahami pembaca ketika sudah sedikit keluar dari bidang yang sangat spesifik
Saya sendiri bekerja di pengembangan web, tetapi tetap perlu berpikir sejenak untuk mengurai singkatan itu
Meski begitu, untuk pengguna yang belum tahu, menuliskannya lengkap tetap bisa lebih membantu
Akan bagus kalau ada alat seperti ini yang menangani konten dinamis berurutan seperti posting blog atau ulasan
Banyak orang tetap bertahan dengan WordPress, tetapi kustomisasi dan tema di sana nyaris seperti mimpi buruk
Pada masanya, itu adalah salah satu dari hampir satu-satunya cara mudah untuk membuat blog
Masalahnya, begitu Anda keluar dari cakupan standar, tiba-tiba Anda membutuhkan pengetahuan mendalam tentang struktur internal WordPress
Sekitar 3 tahun lalu, HN menampilkan CMS open source Primo di halaman depan (https://news.ycombinator.com/item?id=23820201), dan berkat itu saya berhenti dari pekerjaan remote nyaman di tengah pandemi untuk menekuninya penuh waktu
Setelah itu, tabungan saya habis, domain primo.af jatuh ke tangan Taliban, dan saya bahkan membujuk istri saya untuk menjadi developer/desainer agar bisa membantu
Meski begitu, saya bangga dengan hasil yang sudah dibuat sejauh ini, dan melihat orang-orang terbantu untuk belajar pengembangan web, menerbitkan situs pribadi, dan mengelola situs klien membuat saya semakin yakin pada kekuatan dan kesederhanaan pendekatan ini
Primo 2 yang dirilis hari ini dalam beta publik menyediakan pengeditan konten langsung di atas halaman, page building, dan lainnya
Primo mulai dibuat karena saya lelah dengan proses membuat website dan kenyataan bahwa pengguna nonteknis kesulitan mengelolanya
Dalam proyek freelance, saya tersiksa oleh tema WordPress yang rapuh, navigasi dashboard, dan kombinasi plugin, sementara sebagai developer agensi saya merasa CMS monolitik dan meta-framework/CMS headless terlalu berlebihan untuk landing page atau situs profil
Sebagai pengajar coding, saya melihat murid-murid takut memanfaatkan web saat harus berhadapan dengan CLI, API, package manager, bundler, framework, dan meta-framework
Tidak ada jalur yang sederhana dan mudah diakses untuk membuat, mengelola, mengembangkan, dan meng-host jenis website yang umum seperti blog, landing page, dan situs profil
Pada dasarnya Primo adalah CMS yang memudahkan pengelolaan konten, tetapi juga menyatukan page building, penyuntingan kode, static site generation, hingga deployment/hosting GitHub dalam satu antarmuka
Blok-bloknya ditulis dengan Svelte, yaitu HTML/CSS/JS, sehingga responsif dan stylenya terenkapsulasi
Karena ini adalah situs statis, ada juga keuntungan serverless dari sisi biaya, keamanan, skalabilitas, dan kecepatan
Primo adalah alat untuk orang yang ingin mengendalikan situs sepenuhnya dengan HTML/CSS/JavaScript sambil tetap memberi pengalaman edit konten yang sangat sederhana bagi diri mereka sendiri dan teman/klien/kolaborator nonteknis, bukan untuk mereka yang lebih menyukai kontrol desain WYSIWYG ala SquareWixFlow
Ini ditujukan untuk orang yang frustrasi dengan alat no-code dan platform proprietari, tetapi tetap ingin mempertahankan kekuatan kode sambil mencari sesuatu yang lebih sederhana
Lebih jauh lagi, Primo adalah upaya untuk menjaga web tetap berada di tangan individu
Harapannya, dengan membuat publikasi web lebih mudah diakses, literasi teknis bisa meningkat dan orang-orang bisa memegang kebebasan berekspresi agar tidak mudah terdorong ke black box dan taman bertembok
Namun sistem manajemen kontennya yang menjadi masalah. Saya berharap bisa seperti static site generator pada umumnya, di mana file Markdown diletakkan dalam folder lalu artikel atau posting blog dibuat berdasarkan template
Saya sempat mem-fork repositori Primo dan membuat pendekatan kustom yang mengubah entri database menjadi struktur file/folder, tetapi pekerjaan sebaliknya tampak rumit jadi saya memilih jalan lain, dan terinspirasi oleh panduan ini untuk membuat static site generator Markdown saya sendiri: https://joshcollinsworth.com/blog/build-static-sveltekit-mar...
Mungkin use case saya bukan target utamanya, tetapi saya rasa ini akan menjadi produk yang hebat jika proyeknya bisa disimpan sebagai struktur file/folder dinamis alih-alih ditulis ke database, lalu diedit dan dikelola versinya seperti proyek SvelteKit biasa
Pada dasarnya itu akan menjadi framework static site generation berbasis Svelte dengan library komponen dan UI khususnya sendiri
Forumnya juga bagus, dan beberapa pertanyaan yang saya punya ternyata sudah ada jawabannya
Saya sudah lama memakai WordPress dan belakangan mencoba Svelte, dan ini benar-benar mendekati hal yang saya cari
Respek besar untuk upaya yang dicurahkan untuk membuat ini
Proyek yang bagus, tetapi cukup mengecewakan bahwa untuk melakukan “self-hosting” Anda memerlukan akun Supabase
Kelihatannya ini hanya berjalan pada layanan hosting tertentu yang bisa terhubung ke Supabase, dan mendorong agar konten halaman diambil dari GitHub
Jadi ini tampak lebih seperti CMS yang berjalan bersama penyedia layanan tertentu daripada CMS yang benar-benar bisa di-self-host
Tujuannya adalah memudahkan orang menjalankan server mereka sendiri sebisa mungkin, jadi akhirnya dihubungkan ke layanan-layanan itu
Namun backend-nya sedang dipisahkan agar nantinya benar-benar bisa di-host sendiri
Satu-satunya layanan eksternal yang benar-benar dibutuhkan adalah GitHub, dan nantinya mungkin penyedia lain seperti GitLab juga bisa ditambahkan
Proyek yang bagus, tetapi sejujurnya saya merasa kita sudah sampai di titik di mana lebih sedikit JavaScript, atau bahkan tanpa JavaScript, lebih baik untuk developer maupun pengguna
Saya sedang memindahkan blog lama ke blog baru yang dihasilkan dengan Zola (https://www.getzola.org), dan situs portofolio baru yang saya buat dengan React/Gatsby juga sedang saya bangun ulang dengan Zola karena perbedaan performanya terlalu besar
Saya kadang menjelajahi web dengan JavaScript dimatikan, dan kalau dalam kondisi itu sebuah situs sama sekali tidak berfungsi atau bahkan tidak bisa dimuat, itu kekurangan yang besar
Situs lama saya memakai jQuery dan itu sudah cukup menjengkelkan, lalu mencoba hal-hal seperti React terasa seperti mimpi buruk
Secara internal, Primo menggunakan compiler Svelte
Sulit dipercaya bahwa sudah lebih dari 10 tahun sejak saya membuat pembuat situs bernama Stiqr pada 2010
Situsnya sudah tidak lagi beroperasi, tetapi jejaknya masih bisa dilihat di video YouTube
https://www.youtube.com/watch?v=B-ff53t8TuU&t=224s
Saat itu, pada 2010, desain responsif mulai naik daun sehingga saya menghentikan proyek tersebut, tetapi saya masih percaya bahwa cara pembuatan situs web di masa dekat akan tetap mengarah ke sini
Kombinasi drag-and-drop/blok dengan Svelte memang sangat keren, tetapi bagi saya ini terasa seperti alat yang berada di ujung spektrum yang keliru
Ini adalah pembuat situs web visual untuk menyesuaikan blok di editor online
Yang saya inginkan adalah antarmuka online agar klien bisa menambahkan atau mengubah teks, atau melakukan penyesuaian kecil, pada situs web Svelte yang saya buat secara offline dengan alat saya sendiri
Akan bagus jika situs dibuat mengikuti standar antarmuka tertentu sehingga bisa dibaca oleh Primo, lalu klien dapat mengeditnya melalui antarmuka visual
Perubahan besar kembali ke saya, dan saya tetap bisa mempertahankan kecepatan serta kebebasan alur kerja offline saya
Orang mungkin akan mengatakan saya memerlukan headless CMS, tetapi semua yang pernah saya coba terlalu rumit dan hanya dari penyiapan serta pemeliharaannya saja sudah sangat memusingkan
Kecuali Anda membuat field tertentu, aspek visual seperti menjadikan gambar berbentuk lingkaran atau persegi tidak bisa diedit
Jika masalahnya adalah tidak bisa memakai IDE lokal, saat ini dimungkinkan untuk membundel komponen Svelte menjadi vanilla JavaScript, lalu mengimpornya ke blok Primo dan mengirimkan data melalui field
Namun, sebaiknya tunggu beberapa minggu sebelum memakainya di produksi sampai semuanya lebih stabil
Cara yang Anda jelaskan pada dasarnya sama dengan cara saya menangani proyek klien. Saya menulis seluruh kodenya, biasanya menggunakan kembali blok dari proyek lain, lalu menyerahkan situs yang bisa diedit klien sejak hari pertama hanya dengan pelatihan minimal
Saya penasaran apakah yang dimaksud adalah bahwa “kustomisasi blok” tidak mencakup perubahan teks, atau bahwa tindakan yang mungkin dilakukan klien belum cukup dibatasi untuk diserahkan kepada mereka
Anda bisa menyisipkan bagian yang dikelola dengan drag-and-drop ke dalam markup halaman biasa, dan tampaknya mendukung sebagian besar framework termasuk Svelte
Penyiapannya bisa dilakukan lewat FTP