Hi HN. primo is an IDECMSCLSSG (short for IDE, CMS, Component Library, Static Site Generator) I’ve been working on for a few months. The idea came from wanting to host a Notion page at a domain name and not being able to. Once I made the initial version - a basic text editor - the rest of the features just came naturally (except for the SSG, which came from not wanting to deal with hosting).
I’d written off freelance web development a couple years ago after yet another spontaneously-combusting WordPress project, but primo’s enabled me to get back into it and it’s been A+ so far. primo kind of looks like a page builder, but it’s totally the opposite - instead of abstracting away the code it makes it more accessible.
It’s free forever, and I’ll be open-sourcing it soon (built in Svelte - beautiful framework). Ideas & critiques super appreciated.
This feels like such a ludicrous concept, but also I love it. I've recently fallen back into the world of building static marketing sites and the tooling is now so sophisticated, cheap and undifferentiated. We're solving the same problem over and over in very similar ways. I generally despise all-in-one solutions, but this use case actually makes a lot of sense at this point.
I don't know about ludicrous — this is essentially the same USP you get from Squarespace, Wix, etc., but just without the "and we host the resulting site for you" part.
In trade for not doing the hosting, it becomes just a native app you can own, rather than a subscription service. Just need a commodity web host to slap it up on.
I'm not sure I'd say the SSG is the only difference. Squarespace et al target non-technical users directly, so most of the code is abstracted away (which makes anything outside of the rails virtually impossible to edit). primo is first and foremost about enabling developers to build a static site without having to do the Tailwind/PostCSS/etc. setup while also getting a CMS so they can hand it off to a non-technical user.
> Just need a commodity web host to slap it up on.
I suggest NearlyFreeSpeech. It has an outdated UI and it's very DIY, but the pricing is very good. They have an option for static sites, with a lower price.
I am probably not the target group because have no idea what your project does. IDE like Visual Studio or Eclipse? What language is supported? CMS like WordPress, right? Component Library - you mean UI components? Like Material Design or React components? SSG is the only one that makes sense :)
Basically! You could think of it as just being the code-editing part of Visual Studio (but in a browser), an easier WordPress (but less robust, naturally), and a place to put html/css/js components to reuse them elsewhere.
This looks amazing, and a shining example of Svelte and Tailwind. I'm really looking forward to this being open-sourced- please make it happen soon! I'll be more than willing to pay for a hosted version as long as there's always a way for me to host it myself (having the open-source self-hosting as an option). Cheers mate!
This looks amazing! I'm currently building my CV website has a static website with a homemade static site generator, which is sort of working but not as I wish, and I do not have time to improve it. For various reasons existing static site generators do not fit my use case, including that I like to code it myself for fun. So I will surely investigate how I can use your system.
As a general suggestion, if the intended users for your system are also not technical people, I would suggest to give some templates or a library of pre-made components, so that non tech savvy people can build their website with your tool. You could even sell premium components :-)
Thanks! As far as I remember, I just liked the adjective, and there weren't any webapps out there with the same name, and the domain name was available.
Thanks! And no not at all, just HTML, CSS, and JavaScript. Although yes, I have it on the roadmap to be able to plop in React/Vue/Svelte components instead.
I would love to migrate from headless Wordpress + Gatsby to this when you start supporting React. Wordpress has a new editor I was hopeful for, but it's a nightmare.
The developer experience and infrastructural decisions are insane. Things may have changed since last year, but WP would throw user-level exceptions if the layout from any react component changed, and the components are expected to output an array of deprecated and current output. Meaning if your React component changes one CSS class, the user sees an unrecoverable error, and your component needs to emit the previous and current markup to satisfy the renderer. There wasn't even a developer mode to disable this. Then the component-level user input is stored as an HTML comment inside the markup. So many other problems, plus all of the existing WP issues with plugin security and a bloated, inelegant managed service.
One of my teams implemented everything thinking these were rough edges that would eventually be ironed out, but realized too late that WP is making terrible decisions and is stuck in a 2005~ mindset. Github issues are filled with the poor souls tasked with enterprise implementations meeting Automattic's (presumably overwhelmed) indifference.
It's frustrating because to my knowledge there aren't any enterprise grade WYSIWYG CMSes that let you freeform edit/rearrange React in-place – this is or was the closest as far as UX is concerned.
Your terms mention possible “paid products” for Primo. What sort of products do you have in mind? I’m curious to hear how, like WordPress, Primo could be financially sustainable while building a strong open-source ecosystem.
Whoops, forgot to take that off from an earlier version that was intended to be paid. But I do have a couple ideas for getting funding without artificially limiting the product - the most immediate being corporate sponsors & enterprise support.
Easy enough for non tech people to change small thinks (like text).
But lets you get "down to business" for all the more complex changes.
I mean it's 2020 toady even kids learn how to code and most companies hire some tech savy people anyway to do the general work in setting up a CMS even if they use one which "should" not need it.
Exactly. One of the ideas with this is that someone with “just” HTML/CSS/JS could make/sell a usable, CMS backed site without having to jump through all the hoops the modern web demands of them, while at the same time not being limited by the rigidity all the page builders seem to have.
It just rides the line between simple and powerful incredibly well. It's amazing how much you can do with it out of the box before needing to reach for additional tools. The main pull for me is dev experience, but on top of that, the final product knocks everything else out of the water because it compiles down to vanilla JS.
I think they're just using it as a simple login solution so they don't have to use Google or Facebook for now. Since most developers have a GitHub account, it seems reasonable to me. Also it looks pretty heavily integrated with GitHub pages, which would require a GitHub account to work anyways.
Definitely. I thought I'd made it so you only need to give full permission on build, but either way individual repo access is ideal; I'll work on that next. Thanks.
Private repos have to remain private. I don't own that code, I can't give it away.
I was really excited to try this, too.
Please fix this, I really want to give Primo a shot.
:)
Does Google treat .af (Afghanistan) as an international domain though? Not sure if they take the TLD into account much anymore when determining the regional focus of a page, I know some TLDs like .io and .ai are treated as non-regional, not sure about .af though. Problably not a large problem though, just haven't seen many .af product sites so far (really great, short domain name otherwise).
Er, no. In English, it does not mean anything at all.
"Prime" is the analagous English word, I would think, and it is not a superlative. One would not say "that's prime" of something good, impressive, whatever.
"Prime" means: ready; in the thing's initial state; available for immediate use.
It also has a meaning in maths, but that's not really relevant.
- Is it possible for the generated static site to be HTML+CSS only (no JavaScript)?
- How optimal/minified is the generated code?
- FYI, if you have third party cookies blocked, logging in with GitHub will fail (the login popup opens then immediately closes with no error indication). While failure might be expected, it would be nice to give the user a hint on what might have gone wrong.
- The static site is actually just html/css (and js, if you have any). any ideas on how I could make that more explicit?
- It's pretty optimal. It's not minifying the HTML so you can see the tree in Github and see changes. But PurgeCSS gets run on the bundle before it builds out, so your css should be as small as possible.
> The static site is actually just html/css (and js, if you have any). any ideas on how I could make that more explicit?
That's great to hear. I've used some generators that generate bloated junk (especially if they're WYSIWYG-ish). I'm terrible at messaging, but something along the lines of mentioning that (1) it let's you decide what you use (i.e. it doesn't force you to use/generate JavaScript), and (2) it avoids bloat and only includes what you use.
I haven't looked into CMS since ~6 years or so but this pretty much what I would expect from a CMS in 2020.
Through maybe it's focused a bit more then some other systems on (also) supporting a bit more tech savy people. But then in my experience even with CMS targeted a less tech savy people once a change needs to be done which is more then just changing the text it's always passed to the tech savy people anyway.
Through I guess given how primo highlights the IDE, Components Library & Static Site Generator not all web focused CMS do that today??
Correct. As far as I know there aren’t any other tools that do them in tandem. WordPress might be considered an IDE because you can edit the theme/plugins from the dashboard, but I’ve never seen anybody do that for legitimate reasons.
Reminds me of TinaCMS (https://github.com/tinacms/tinacms), but built on top Svelte instead of React+Gatsy. The choice of Svelte is really exciting to me. Can't wait for the source to drop.
In terms of connecting to data sources I would rather decouple the querying and security layer. Companies are going to be focusing more and more on integrations. So if we have an integration layer in rest or graphql it would make building complex rich apps a much nicer experience. Basically what you have here is a competitor of many dashboarding tools like Tableau or PowerBI. I know you are thinking wordpress and cms, but these tools will eventually power dashboards as they blend with web apps.
If you need any inspiration from similar products (I was building this exact thing with a friend for the last week or so, gonna toss that in the bin now haha):
I’ve been moving towards implementing an API based CMS, specifically prismic.io which allows me to setup content elements that marketing staff can edit.
Can you explain a bit more about the non-tech user experience for content editors?
Would love to find a magic Wordpress replacement with a proper git & tailwind supported workflow for devs and a simple interface for content editors. I’m hoping this fits the bill.
Seems like it should be right up your alley. Here's a gif of what content editors see: https://imgur.com/7W9zcW9
So there's a simplified toolbar (no dev stuff) but they can still add page sections and components from the component library. And when they edit components they only see the fields. You'll be able to control which stuff they have access to in the future.
> Would love to find a magic Wordpress replacement with a proper git & tailwind supported workflow for devs and a simple interface for content editors.
Note sure whether that is similar to what you are looking for, but I've been working on a CMS that commits a JSON file to Git. It is called FrontAid CMS and currently in public beta: https://frontaid.io/
It works like this: Create a data model and put it in your Git repo. FrontAid will pick it up and generate input fields accordingly. The content editors can then create/update the input fields and the resulting content is then stored in a JSON file in your own Git repository. The big advantage of that is that your content lives where your actual code is.
The problem with website builders is that they do not suit anyone, except maybe when you need quick, "good enough", perhaps one-off web site.
* Professional developers don't want to spend their days on a online GUI like this as opposed to the comfort of a repository and trusty code editor and tools.
* End users, even with a great WYSIWYG UI, may still not be able to make knowledgeable design decisions. Also, even with the best WYSIWYG GUI, sometimes you just need to tweak the source.
We should be building better structured content management systems as opposed to better Dreamweaver-like tools. Structured content also enables other cool things like single-source, multiple-output publishing.
There are a lot of these "headless CMS"s nowadays but I still haven't found one that I really like, I think there's room for improvement.
You hit the nail on the head when it comes to page builders. As far as I can tell, most of then try tackling the problem of expensive development by enabling nontechnical users to build sites in one of two ways: customize with a GUI (which is either comically limited or harder-than-code complex) or choose from an endless list of pre-built components/templates (which just turns one development hour into three research hours).
primo enables end users by enabling developers by offering immediate access to those same productive tools and making the code as accessible as possible.
As to your comment on single-source-multi-output, primo will be able to expose all the content on your site at an endpoint soon, stay tuned.
We've used Contentful extensively basically since it's inception, and have toyed around with Dato enough to know what the offering is. We have our own list of missing pieces for both but am always curious about other's experiences.
This combined with Tailwind UI[0] makes a pretty stellar low-code tool. For someone with entry level HTML knowledge, you could copy/paste your way to a well-designed site.
In Firefox I just get a blank page where I assume there should be an editor. There's a toolbar at the top but none of the buttons do anything, and in the console there's the error:
Uncaught (in promise) TypeError: e is undefined
Ng _User.svelte:34
You could say it's similar, but only insofar as WordPress+Timber is also similar (i.e. coding a custom site for end users to easily edit content).
I'm not sure I understand your second question, but I believe lots of those already exist, and it made more sense for my use-case to just build the site directly from primo.
Well, primo is an SSG, but some advantages over other SSGs: no setup for Tailwind/PostCSS, no setup for js modules/libraries, reusable components, coding from the browser, encapsulated component styles, developing components in isolation, wiring up components to fields in seconds, and a CMS your mom can use. More to come by version 1.
If I understood it correctly, the devs create the components and the end user (editorial people) can edit the content in a nice editor. Like this: https://imgur.com/7W9zcW9
I'm curious to learn more, but I wish to opt-out from 3rd party trackers beforehand - there doesn't appear to be any method to do this, so am I (and any other Europeans in the same boat) entirely unwelcome on your site?
I thought I'd removed all of the trackers before I launched. It's just using Goat Counter (https://www.goatcounter.com/) which I believe is European-friendly. did I miss one?
If that's the case, then great - but to my ignorant eye the warning notice at the bottom seemed to imply there were some (or, at least - as a passerby - I am perhaps unsure what merits a 'strictly necessary technical tracker') and then there's no visible opt-out. Which makes sense if there's nothing to opt-out from!
I must admit, I assumed a dark pattern was at play.
Logged in just to say congrats, this attitude is seldom encountered, even among those building their products almost entirely on freely available foundations.
Being compensated for one’s efforts isn’t greed, and for-profit software can also be open-source.
To each their own. It’s a cool project.
I’ve spent a lot of time contributing to OSS, created popular OSS projects, and I felt pretty shitty when I realized other companies were using the software to make money and I hadn’t done anything to ensure I was compensated.
Not at all, I was more speaking to companies that lean heavily on OSS without giving back, which sounds like your experience. Would love to pick your brain sometime if you’re open to sharing any lessons you’ve learned along the way.
I'd research that claim before putting too much into monetizing a product like this. There are a veritable boatload of CMS tools available these days, most of which are free. You pay more for making it easy for non-tech folk to use, but at some point the market drives people to hire a webmaster, not pay license fees for a tool.
I've told the story before, but we did a CMS very similar to this back in 1999/2000, and was able to charge 5-6 figures to Fortune 500 companies for a license. But that market crashed. CMS is just a specific flavor of CRUD apps, and most web devs can make one, so they just don't have the same price point as they used to.
That doesn't invalidate the work put into this CMS. I like what I can see of it. It looks like a good piece of work. But most CMS successes these days do give away the core tool for free, then make money on plugins, hosting, and services.
There are dozens of amazing open source projects posted on HN every week, and on average, the ones out of these that are outstanding and could be turned into a business model are countless every month.
So I don't understand what makes this project stand out so much that it's like leaving money on the table. (this is the first time I'm seeing a comment where the money is apparently on the table because the project is so good).
Good software product/service is a tiny aspect of doing business and turning a profit. The money doesn't appear magically on the table!
Because lots of us see where this fits in the market. Businesses want to leave wordpress, and wix/squarespace are almost exclusively targeting non-technical users.
This type of approach lets a technical person work with the marketing team so that the site can be both easy to update and optimized for business needs.
You’re right that good software/service does not automatically mean profit, but you’re missing the understanding that if you serve a hungry demographic, you only need a MVP to bring in revenue.
My personal experience as a freelance wordpress tuner.
Part of the problem is the drain of the plugins they load up, but invariably Wordpress would be far less useful to them without those plugins, so they just end up wrestling with it all the time wishing there was an alternative.
A big fan of that approach right now: have enough money coming in through “patrons”, sponsors, or business licenses that the product/technology itself can be free
Mateo, I'm very interested in primo and look forward to putting it to work once it is open source. So very pleased that you are heading that way! I'd like to sign up to the forum without using github (as I'm allergic to anything leaking data, esp to corporations / Microsoft).
I realise it may be needed for some primo features, but is there any chance we can use email to auth with primo's Discourse?
I'll be building test sites and deploying to SAFE Network as soon as I can. Svelte is my favourite so again I'm please that you've chosen to use it to build primo. Good luck.
Thanks for the interest! I’m in the process of stripping the tool out of the online service so it can easily be self-hosted or run locally. I’ll make sure to enable email auth in Discourse once the source is published.
I previously worked as Product lead for a homegrown CMS for one of the large media companies. We built a solution to address a myriad of content types (images, videos, voice, news articles, games, etc), For content in all major languages. I like this, and happy to chat if you want to get a perspective.
I’ve created my own blog around a pure pre-render solution (using gatsby stripped down to just pre-rendering) - because I want to control everything and not be dependent on anything aside from the stack (react in my case).
Impressive how you’ve tied everything in to github. I’ll be reading your code to see how it all works.
I made something similar when I was looking for an alternative to Shopify component based template CMS for the company I was working for at the time. It's a very good compromise between developer flexibility and marketer accessibility.
Perhaps I didn't grasp at all the features you currently offer , (I'm also skeptical whether you'd want to broaden the feature set that it would become too complicated of a offering) but with what I had created, it was possible to have drafts with multiple versions, and I was preparing to make it possible to expose those multiple versions for AB testing as well.
Really impressive work! Is there any chance this can be used to a create a front-end that can connect to data sources like APIs and databases (almost like a Retool that lets you build a web app instead of internal business tools)?
Thanks! And I haven’t tried that use-case specifically but you can definitely fetch any data in a component’s JS and use it to populate its markup. Basically what you’d expect of a cloud IDE, but with the added benefit of managing the components individually.
Bravo. This is very cool. Well done shipping it without getting bogged down in all the possible features and workflows that could be part of this sort of thing.
Thanks! Do you mean it shows you a login screen? https://imgur.com/a/wD2ccQP Because in that case you just need to log in again (since auth doesn't transfer across subdomains).
Yeah definitely. I imagine it’ll just have to auto-build whenever I gets upstream data updates. I’ll make sure to update the docs; it’s pretty simple atm, just invite a user (set them as a content editor or developer) and they can join your site. And if you want to give them build access you add them as a collaborator on the repo.
tks @mmmateo! I'm also thinking more of allowing them to manage their own "things", whatever they may be. presently i'm leaning towards something like a CMS, with some kind of storage (s3? or something else?) that backs it. I did not look at the source, but this would be something like a gatsby with a front end, so much more new-dev, wannabe-dev, or partime-dev friendly.
>Build to Github: Anytime you make code or content changes, a blazing fast static bundle gets built out to Github where you can deploy it to your host of choice.
In light of the recent outages on Github it will be anything but blazingly fast.
Blazing fast because it's a static site, not because of github. Github's just where you build it to, but once you deploy it to a host (Vercel, Netlify), it doesn't matter if Github goes down.
This is interesting, particularly the all-in-one nature of it.
However, of late, I've taken to hand-writing HTML and CSS for some small static sites I manage. I still use Hugo and Sass for my personal site, though.
While I understand wanting the site you create within Primo to work without JS, are you legitimately expecting that a web-based IDE is going to work with JS disabled?
See my other comment. You are correct. Nowadays they usually don't but there are frameworks that can give you javascript-free web applications, albiet with less functionality.
Nice! FWIW, in links on the linux framebuffer, which has no javascript OR CSS, thank the lord of speedy renderings, the site you generate is ideal and pops in less than 100ms.
It doesn't require JS, so that's odd. Do you have JS turned off? It's using instant.page in the bundle, but I would expect that to fallback to the default behavior.
I’d written off freelance web development a couple years ago after yet another spontaneously-combusting WordPress project, but primo’s enabled me to get back into it and it’s been A+ so far. primo kind of looks like a page builder, but it’s totally the opposite - instead of abstracting away the code it makes it more accessible.
It’s free forever, and I’ll be open-sourcing it soon (built in Svelte - beautiful framework). Ideas & critiques super appreciated.
Cheers