Ask HN: Static site generator with web UI?
61 comments
I know that you're probably looking for an alternative to WordPress, but here's what I do at my company.
We have an internal WordPress installation where (non-technical) staff can make posts & pages, use their favorite themes & plugins, etc. Everyone can view the internal site to critique it, make changes, and basically screw around without touching the live site.
Once they have the site ready to release, we use a simple plugin (ignore the "outdated" warning): https://wordpress.org/plugins/static-html-output-plugin/ which basically exports the site to a static copy as a zip file containing all of the HTML and other static assets.
We made a little deploy script which loads the zip file on our Nginx webserver, moves the old "build" of the site to an archive directory (so we can still retrieve it in case the new site is broken), regex'es the files to change some things (such as wp-content/ URL's) to point to our CDN, etc. Once everyone has QA'ed the site on the internal server, we just run the deploy script and now the new version is live.
This has worked out great for us - no one had to learn a new CMS; we can easily change WordPress versions (or, switch to an entirely new WordPress install), add new plugins, and mess around with stuff without breaking the live site. Plus, the site is served entirely as static files from a lightweight machine which runs only Nginx - no PHP, database, or anything else.
Note that obviously any "dynamic" features of the site (like comments) won't work, but that doesn't impact us.
Our site is in the Alexa top 5000 and we've been using this setup for over a year without any site downtime, broken theme issues due to version updates, scrambling to update due to WP security issues, or any other annoyances that come with using WordPress.
We have an internal WordPress installation where (non-technical) staff can make posts & pages, use their favorite themes & plugins, etc. Everyone can view the internal site to critique it, make changes, and basically screw around without touching the live site.
Once they have the site ready to release, we use a simple plugin (ignore the "outdated" warning): https://wordpress.org/plugins/static-html-output-plugin/ which basically exports the site to a static copy as a zip file containing all of the HTML and other static assets.
We made a little deploy script which loads the zip file on our Nginx webserver, moves the old "build" of the site to an archive directory (so we can still retrieve it in case the new site is broken), regex'es the files to change some things (such as wp-content/ URL's) to point to our CDN, etc. Once everyone has QA'ed the site on the internal server, we just run the deploy script and now the new version is live.
This has worked out great for us - no one had to learn a new CMS; we can easily change WordPress versions (or, switch to an entirely new WordPress install), add new plugins, and mess around with stuff without breaking the live site. Plus, the site is served entirely as static files from a lightweight machine which runs only Nginx - no PHP, database, or anything else.
Note that obviously any "dynamic" features of the site (like comments) won't work, but that doesn't impact us.
Our site is in the Alexa top 5000 and we've been using this setup for over a year without any site downtime, broken theme issues due to version updates, scrambling to update due to WP security issues, or any other annoyances that come with using WordPress.
Your solution sounds like exactly what I need!
Currently upgrading my company's existing website, and was looking into WordPress as a CMS. The security concerns and the resource costs of using WordPress were key detractors, but this sounds like it could be the answer for us as well.
Currently upgrading my company's existing website, and was looking into WordPress as a CMS. The security concerns and the resource costs of using WordPress were key detractors, but this sounds like it could be the answer for us as well.
But you're almost entirely relying on this black-box plugin constituting a systemic risk (critical path) in your process.
For me, I'm afraid that this is not 100% reliable solution for me.
For me, I'm afraid that this is not 100% reliable solution for me.
The plugin is open source: https://plugins.trac.wordpress.org/browser/static-html-outpu...
And all that it does is simply "spider" the site and save the pages to HTML.
You could get the exact same effect using curl or wget, we just use the plugin so that my non-technical employees can effectively click a button, get the zip file, and send it to someone who's got access to do the deployment.
And all that it does is simply "spider" the site and save the pages to HTML.
You could get the exact same effect using curl or wget, we just use the plugin so that my non-technical employees can effectively click a button, get the zip file, and send it to someone who's got access to do the deployment.
I see now.
Since it's an open source and its basic functionality can be replaced with simple Unix modules, I see no problem with this setup anymore.
Since it's an open source and its basic functionality can be replaced with simple Unix modules, I see no problem with this setup anymore.
What about using `wget --mirror` (with the set of right command line arguments to adjust it to your needs) on a local dynamic site to obtain a fully functional static copy that you can then upload to any server?
This, and the plugin option suggested by jasongill above, sound like they would suit my needs. I don't mind hosting wordpress to use as an editor (as performance is not important). I just don't want Wordpress to be in charge of serving the content.
I highly recommend you check out roots (http://roots.cx/), a static site generator that lets you use a CMS like Wordpress to manage content and then pulls data from its API to build a static site.
We've set up a full featured publishing workflow by coupling this with outgoing webhooks on Wordpress using hookpress and a great static hosting platform called Netlify that accepts incoming webhooks to trigger new static builds with roots when content is updated on Wordpress.
So far it's been fantastic for us. We enjoy all the benefits of a static site: low hosting costs, simple infrastructure, highly scalable, and virtually zero downtime, while still giving our users a familiar CMS interface.
We're are using a similar workflow to power our site (http://carrot.is/) but instead of Wordpress we're using Contentful, an API-based CMS with webhook support. Luckily, roots has a very flexible extensions API, so whatever CMS you want to use, as long as it has an API it can be turned into a static site.
Here's an example of how to set this up with Wordpress: https://github.com/carrot/roots-wordpress-example
As well as the two CMS extensions we've built so far: https://github.com/carrot/roots-wordpress https://github.com/carrot/roots-contentful
We really love it, and are happy to answer any questions from people considering a similar setup or who are interested in learning more about roots.
We've set up a full featured publishing workflow by coupling this with outgoing webhooks on Wordpress using hookpress and a great static hosting platform called Netlify that accepts incoming webhooks to trigger new static builds with roots when content is updated on Wordpress.
So far it's been fantastic for us. We enjoy all the benefits of a static site: low hosting costs, simple infrastructure, highly scalable, and virtually zero downtime, while still giving our users a familiar CMS interface.
We're are using a similar workflow to power our site (http://carrot.is/) but instead of Wordpress we're using Contentful, an API-based CMS with webhook support. Luckily, roots has a very flexible extensions API, so whatever CMS you want to use, as long as it has an API it can be turned into a static site.
Here's an example of how to set this up with Wordpress: https://github.com/carrot/roots-wordpress-example
As well as the two CMS extensions we've built so far: https://github.com/carrot/roots-wordpress https://github.com/carrot/roots-contentful
We really love it, and are happy to answer any questions from people considering a similar setup or who are interested in learning more about roots.
Full Disclosure: I'm the founder of Makemake.io.
You could use an online website creation tool. There are several robust solutions available including Weebly, Squarespace, and Wix. There are many integrations and add-ons available that target small businesses. It does cost a bit more than running a cheap hosting plan on Wordpress, but you do get support and it requires no technical expertise at all to get started.
If you have only static content and want to create an animated brochure-ware site, I would ask you to consider looking at Makemake.io. It features a simple drag-and-drop editor with no coding required.
If you need to integrate database driven features (contact forms, a shopping cart, etc), I would definitely investigate one of the former options. It just depends on your requirements.
You could use an online website creation tool. There are several robust solutions available including Weebly, Squarespace, and Wix. There are many integrations and add-ons available that target small businesses. It does cost a bit more than running a cheap hosting plan on Wordpress, but you do get support and it requires no technical expertise at all to get started.
If you have only static content and want to create an animated brochure-ware site, I would ask you to consider looking at Makemake.io. It features a simple drag-and-drop editor with no coding required.
If you need to integrate database driven features (contact forms, a shopping cart, etc), I would definitely investigate one of the former options. It just depends on your requirements.
I just tried Makemake.io, it's pretty neat. One thing I'd really like with it, is to be able to save on my hard drive the page I just made, so I could use integrate it with my own website not hosted as your subdomain.
Anyway, keep up the good work!
Anyway, keep up the good work!
Hi! Thanks for the feedback. :-)
I'll have to take a look at adding that feature! In the meantime, you could consider iframing the site. I know this isn't ideal, but it might work depending on your use case.
I'll have to take a look at adding that feature! In the meantime, you could consider iframing the site. I know this isn't ideal, but it might work depending on your use case.
Well, I still can save the webpage under my_webpage.makemake.io and then save the source, but it's not so convenient.
What you could also do is integrate makemake.io with a subversion, so as a user I could change my website, and then compare it with a previous version.
Best of luck!
What you could also do is integrate makemake.io with a subversion, so as a user I could change my website, and then compare it with a previous version.
Best of luck!
Webflow - https://www.webflow.com - Let's you build responsive sites in a web UI without code. I'm a non-technical founder and I use it for our marketing site (works across browsers, has CSS animations). Our devs have never even touched it. I've been very, very happy with it.
I took a look at this, and it seems to be aimed at designers? While I'm sure that it's a fantastic tool (also judging from the other positive comments), what if the target audience (the non-technical end-users editing the content) also can't design their way out of a wet paper box?
(Frankly, I would prefer to not even let them touch the content ...)
(Frankly, I would prefer to not even let them touch the content ...)
I am a big fan of webflow after using it for some of our live sites. Great platform! The only thing is that it gets expensive for multiple users
Hey Guys, Head of Engineering at SendHub here. We recently switched over to using webflow for our marketing pages (everything under www) and have not looked back! It's really nice to be able to knock out custom responsive pages quickly all while enabling non-technical people to make minor edits. One thing we like in particular is the ability to easily push changes to different subdomains. Finally, if we ever do decide that we need something different (doubtful in the foreseeable future) the code that webflow generates is beautiful and maintainable. Webflow has huge fans at SendHub.
Webflow.com -- hands down. Having used Wix, Squarespace, Weebly and WordPress, Webflow just provides you with so much more control and pixel perfect accuracy.
Although the learning curve is a little higher than SquareSpace/Wix, it's actually worth it. As a non-dev designer, it has allowed us to deploy all our sites effortlessly with the same fluidity and crisp animations as you'd expect from a grassroots buildup. It also allows you to export your (clean) code.
I honestly would never go back to anything. Webflow is how a GUI for website builders should be.
Although the learning curve is a little higher than SquareSpace/Wix, it's actually worth it. As a non-dev designer, it has allowed us to deploy all our sites effortlessly with the same fluidity and crisp animations as you'd expect from a grassroots buildup. It also allows you to export your (clean) code.
I honestly would never go back to anything. Webflow is how a GUI for website builders should be.
http://prose.io/ is a CMS for statically generated sites (i.e. Jekyll)
Sounds awesome, but I really dislike not being able to see a screenshot before having to connect my github account...
Agreed. I don't really have a problem with connecting my GitHub account, but a landing page should at least explain what the site does and provide some basic screenshots/feature overview.
This is sort of my bread and butter. I almost predominantly use siteleaf.com and prismic.io as my cloud based CMS solutions. They both have great APIs that can be easy to consume depending on your setup.
I do all of my site building in Middleman, and during the Middleman build process consume the requisite API to load into Middleman's local data method. Upon complete, I sync everything up to S3. I use Heroku just for its Scheduler and run the compile every 10 minutes.
It's kind of neat, because I can have the Middleman scaffolding sitting in a repo, and the content sitting in Siteleaf/Prismic for the client to play with. And the hosting on S3 costs ~$3/month. It makes for a pretty dynamic static site.
I do all of my site building in Middleman, and during the Middleman build process consume the requisite API to load into Middleman's local data method. Upon complete, I sync everything up to S3. I use Heroku just for its Scheduler and run the compile every 10 minutes.
It's kind of neat, because I can have the Middleman scaffolding sitting in a repo, and the content sitting in Siteleaf/Prismic for the client to play with. And the hosting on S3 costs ~$3/month. It makes for a pretty dynamic static site.
Your tech stack looks interesting but why "Middleman" and not for example "Jekyll" ?
Primarily because of Middleman's local data[1]. Basically any .json or .yaml files located in your Middleman project's /data dir are exposed via the data method as a big iterative array.
This makes it perfect for polling an API during build for whatever data you need, then tossing the whole .json ball into the /data dir for exposure.
Don't get me wrong, I love me some Jekyll, but I find Middleman covers pretty much all my bases these days.
[1]https://middlemanapp.com/advanced/data_files/
This makes it perfect for polling an API during build for whatever data you need, then tossing the whole .json ball into the /data dir for exposure.
Don't get me wrong, I love me some Jekyll, but I find Middleman covers pretty much all my bases these days.
[1]https://middlemanapp.com/advanced/data_files/
[deleted]
So, your setup is composed of as follows:
Middleman: The template files.
Siteleaf: The CMS for the end users to play with
Prismic: The database.
Heroku: The deployment esp. the scheduler part.
Amazon S3: The hosting.
Did I get it right?
Middleman: The template files.
Siteleaf: The CMS for the end users to play with
Prismic: The database.
Heroku: The deployment esp. the scheduler part.
Amazon S3: The hosting.
Did I get it right?
Close. Siteleaf/Prismic is an either or deal. Siteleaf is much simpler architecturally, and works for like 80% of my clients. You basically get page collections and optional meta data.
Prismic is much more blown out - I bring it in as the big guns if I need to support a more complex hierarchy or need specific document masks/permission levels/etc.
The deploy via Heroku is neat because it does a git clone of the repo on github before running the Middleman build (therefore consuming the API), so all I have to do is push my changes up to Github and they'll get picked up on the next pass (sometime in the next 10 minutes).
It's just real fun to work with, with very few failure points. After all, the worst thing that happens is the build fails and they get served a 10 minute old static site.
Neat. Very neat indeed!
How about your clients?
Did they miss the old WP text editor or are happy with the new CMS?
My only take on this setup is the perceived or apparent fragmentation since the resources are scattered over many places and not on a single point like in a typical WP installation, what do you think?
How about your clients?
Did they miss the old WP text editor or are happy with the new CMS?
My only take on this setup is the perceived or apparent fragmentation since the resources are scattered over many places and not on a single point like in a typical WP installation, what do you think?
Side note, does this exist for mobile apps?
I see plenty of prototyping tools and have no idea why they do not generate nice native iOS and Android code as starting point to building the remaining parts of an app.
I see plenty of prototyping tools and have no idea why they do not generate nice native iOS and Android code as starting point to building the remaining parts of an app.
Ionic Creator does exactly that! (Though not "native" as it generates HTML/JS for compilation with Cordova.)
http://ionicframework.com/creator/
http://ionicframework.com/creator/
The Hugo team has been thinking about how to set up a web frontend.
http://discuss.gohugo.io/t/web-based-editor/155
Hugo -- http://gohugo.io/
http://discuss.gohugo.io/t/web-based-editor/155
Hugo -- http://gohugo.io/
There are some ways for content delivery as far as I know.
https://docpad.org/docs/plugins#custom-interfaces
https://github.com/yortz/octopress-admin
https://github.com/zkarpinski/Jekyll-Admin
I will go as a selling point for them the performance & simplicity. It's also easier to maintain for a person with some technical knowledge than Wordpress regarding updating the core & the plugins.
I will go as a selling point for them the performance & simplicity. It's also easier to maintain for a person with some technical knowledge than Wordpress regarding updating the core & the plugins.
For side jobs I always use http://statamic.com since it is all flat files that I can edit in a text editor, but my clients can use the GUI admin. I can use Git with it and you can turn it on for the admin to so any edits made by the GUI are committed as well.
I am good friends with the creator as well, but I would still use it otherwise.
I am good friends with the creator as well, but I would still use it otherwise.
You might want to give a try to Prismic.io (for backend UI) + backed.js (for static generation, consumes Prismic API):
https://prismic.io/ https://github.com/prismicio/baked.js
disclaimer: I work at the company backing the project, although not on this product.
https://prismic.io/ https://github.com/prismicio/baked.js
disclaimer: I work at the company backing the project, although not on this product.
BTW Prismic.io can also be used with Metalsmith:
https://github.com/mbanting/metalsmith-prismic
I use Nikola with the "webapp" plugin [1]. It's still too much for non-technical users, but with some polish you could probably get it to be usable by anyone.
1) http://ralsina.me/weblog/posts/preview-of-nikola-webapp.html
1) http://ralsina.me/weblog/posts/preview-of-nikola-webapp.html
The Grid (thegrid.io) looks very promising in this area but won't be available right away ("end of Spring"). You will get a web UI as well as iPhone and Android apps to manage your content, and static pages get generated automatically. Check it out if you're not in a hurry.
There was a CMS based on Dropbox which I think produced static pages, although I don't recall the name of it.
Obviously, a Dropbox-based interface is really easy to use, provided the user can get the hang of very basic Markdown (which seems not to be a problem for non-technical users judging from Reddit).
Obviously, a Dropbox-based interface is really easy to use, provided the user can get the hang of very basic Markdown (which seems not to be a problem for non-technical users judging from Reddit).
PicoCMS might fit the bill. PHP with files as markdown, semi static as markdown is parsed on each page hit but that could easily be cached.
It has an editor plugin that allows live editing of the content.
http://picocms.org/plugins.html
It has an editor plugin that allows live editing of the content.
http://picocms.org/plugins.html
I use http://www.siteleaf.com its got a nice web UI and it uses liquid templates and Jekyll behind the scenes I think so it's pretty easy to write template logic and you can host on github pages for free.
Squarespace is actually pretty good for this. You can get discount codes from basically any podcast.
Ghost (https://ghost.org/) has many themes that can be considered brochure-ware. The editing is in Markdown.
I don't think Ghost is static, though. TMK everything is stored in a sqlite db.
You can ask it to generate static posts, IIRC
As many others have said, Webflow (http://www.webflow.com) is definitely your best option.
Well let's define what you mean by "maintaining a static site." Because if you can change it and update it, a la WordPress, then it's not really a static site.
What you seem to mean is are there CMSes that output static pages instead of rendering pages live when they are viewed. And you're just really talking about caching.
And the answer is, you can accomplish this pretty easily with just about any CMS (including WordPress) by using Varnish or other caching systems.
What you seem to mean is are there CMSes that output static pages instead of rendering pages live when they are viewed. And you're just really talking about caching.
And the answer is, you can accomplish this pretty easily with just about any CMS (including WordPress) by using Varnish or other caching systems.
When using a static site generator, you still change and edit content. It's just that the output is generated statically and users access the static content. Anyway, I'm guessing your interpretation of the OP's intent is correct.
However, you can't do all the same with WordPress + Varnish. One of the nice things about statically generated sites is that you can deploy anywhere (such as S3) without minimal operational complexity.
However, you can't do all the same with WordPress + Varnish. One of the nice things about statically generated sites is that you can deploy anywhere (such as S3) without minimal operational complexity.
> One of the nice things about statically generated sites is that you can deploy anywhere (such as S3) without minimal operational complexity.
Fair point. I was not entering any hosting concerns into the equation, only the behavior of the system as a whole.
Fair point. I was not entering any hosting concerns into the equation, only the behavior of the system as a whole.
Caching is not the same, since if the page isn't in the cache - and it's often easy to find one that isn't -, the request will get passed on to the generator, which (vastly) increases the attack surface of the whole system.
Come on, that's like saying brakes don't work because if you don't press them then your car doesn't stop.
Of course if you're concerned about this you'd make sure every page is current int he cache.
Of course if you're concerned about this you'd make sure every page is current int he cache.
Then the attacker does a POST instead, which the caching layer passes on, and your work was for naught.
I'm sure it's possible in theory to prevent all kinds of attacks, but it's not like not pressing the breaks, more like trying to plug every hole in a sieve. The tool just isn't built to help you do that.
I'm sure it's possible in theory to prevent all kinds of attacks, but it's not like not pressing the breaks, more like trying to plug every hole in a sieve. The tool just isn't built to help you do that.
One major problem with Wordpress, especially when talking about mostly static sites, is that it tries to do so much more that it becomes challenging to secure.
My favorite example is that Wordpress has its own cron system, which uses loopback requests to implement asynchronously. This is ok for a minimal blog install by someone without sysadmin experience, for a corporate site it just becomes a security liability.
My favorite example is that Wordpress has its own cron system, which uses loopback requests to implement asynchronously. This is ok for a minimal blog install by someone without sysadmin experience, for a corporate site it just becomes a security liability.
http://getkirby.com/
You can build pretty advanced pages with it.
You can build pretty advanced pages with it.
Take a look at https://www.lightcms.com/
Check out http://www.webhook.com.
You might like Kirby CMS: http://getkirby.com
Bricolage, although it didn't really look maintained last time I checked.
Do you mean this?[0] I don't see mention of static site generation anywhere.
[0] http://bricolagecms.org/
[0] http://bricolagecms.org/
Yes, and they do.
Funny that they don't prominently say so. Most secondary material about Bricolage touts static generation with a web UI as the main selling point. That's how I got interested in it.
Another one, much better known: Movable Type.
Funny that they don't prominently say so. Most secondary material about Bricolage touts static generation with a web UI as the main selling point. That's how I got interested in it.
Another one, much better known: Movable Type.
CityDesk by Fog Creek. In 2003.
ikiwiki but the editor sucks
Are there tools for maintaining static sites which are as easy to use (after initial set up), or is Wordpress still the way to go?