Show HN: Punch - A Fun and Easy Way to Build Modern Websites | Hacker News Reader

Show HN: Punch - A Fun and Easy Way to Build Modern Websites

laktek.com

91 pointslaktek33 comments

Others have raised the issue of client side rendering causing issues with search engines. By putting it so prominently on the website, it does make it seem as though it is the intended use.

Watching the screencast, you can see how a static .html file is generated.

I find it odd that he talks about client side rendering so much on the site and then presents a screencast that doesn't really portray Punch as rendering things in that way. I would like to see a demo video showing how Punch can offer me interesting ways to use client side rendering to make my site better.

Rather confusing, but interesting nonetheless.

Let me clarify, Punch can be used both as a static site generator and as well as a client side renderer. Actually, the client-side rendering capability comes as a nice side effect of Punch being written in JavaScript.

Screencast was created to quickly highlight the main use case of Punch, which is generating static HTML pages. However, if you read the post further you will find how Punch can be used for client-side rendering.

Also if used correctly, client-side rendering should not cause any issues with search engine indexing. Maybe, I will come up with a separate blog post on how to use client-side rendering with Punch to enhance UX of a site without affecting search engine indexing.

I've taken a different approach to solve this problem (http://substancehq.com/). It uses mustache but does the rendering on the server side. My aim is to make it a lot better thank jekyll, because in my experience, jekyll doesn't have the best feedback cycle for editing → publishing. Sure, you can use the editor you like to write the blog posts, but, polishing them after publishing is a realy pain. Would love to hear feedback about it :) http://substancehq.com/

> Jekyll is an awesome framework, But, we think it's not right for blogs for a number of reasons. Also, we think that the git push → deploy dance, is a bit too much when you want to make minor edits.

You realize this "dance" is solved by a simple post-receive hook right? For example:

  git clone ${GIT_REPO} ${TMP}                                                                                               
  ${HOME}/gems/bin/jekyll --safe --no-auto ${TMP} ${PUBLIC_WWW}                                 
  rm -rf ${TMP}

Any time you push to that repo, it builds and deploys the new site automatically.

Yes, a simple post-receive hook will do the regeneration, but when you have a lot of small edits (I usually do this when I finish off my blog posts), the time to commit, push and wait for the site to be regenerated is kind of frustrating.

I've used jekyll for the past 2 years and have blogged quite a bit about it (https://www.google.co.in/search?sourceid=chrome&ie=UTF-8... ) I think it is an awesome framework, in how it really gets out of your way. And that is what I am trying to accomplish with my design, getting out of the users way and allowing him to just write content. Would love to hear any other feedback you guys might have.

Did not see link to source code on home page. Is this closed source?

If no, where to download code to play with?

It's really a hosted app, which I am planning to have a very low price for. You can create a new blog, just by typing a name in the big text box on the home page, you don't need anything else to try it out :)

Nice idea, thanks for doing this. I was searching for something like this a few weeks back. Without having had a closer look at it, how 'complex' you think the content and navigation could get? I.e. having a lot of relatively small 'articles' with lots of metadata plus the ability to browse, filter, sort, etc by metadata. It would be nice for a niche community-run data-collection site where instead of using a relatively heavy web app to enable 'crowd editing' one could just have the json data in a git repo and use the fork-edit-pull work flow.

Complexity depends a lot on the structure you would choose. It would be easy to handle a scenario like you mention by using both static page generation and client-side rendering.

Email me if you got any specific questions in using Punch for your requirement.

On http://laktek.github.com/punch/ it misses a "s" in "npm intall punch"

Anyway - keep up the inspirational work.

Fixed. Thanks for spotting it.

I did something similar with a resume template [1] where instead of mustache I use angular. The problem with a purely client side solution is that it doesn't sit well with search engines. You would still need to figure out a way send html from your server at least to the search engines if you want to be indexed.

[1] https://github.com/dhawalhshah/modern-resume

What do you mean? Why? What problem do search engines have indexing static content? I've never heard of anything like this before.

I think he means for the dynamically rendered parts, like "GitHub Watchers".

Oh, right. I read some comments below and figured that it takes JSON and dynamically renders the template client-side, which seems very unnecessary. Why not just generate HTML? Does Jekyll work that way too?

Punch generates static HTML pages using Mustache and JSON, which can be served from a server. Apart from that Punch's renderer can also be used on client-side to render dynamic content. This is elaborated with an example, in the blog post.

Sorry, I misinterpreted what Punch actually is. Maybe you could elaborate in "What is Punch" section that it uses node.js to generate HTML pages?

Thanks for the suggestion. I'll update "What is Punch" section with more elaboration.

And include a picture of a cat.

Another option for building static websites is StaticMatic[1]. It uses Tilt for templating, so you can use mustache, haml, sass, coffeescript, or whatever. There's also a nice "upload to Amazon S3" command.

Some have said StaticMatic is good for building PhoneGap clients. Personally I just use it for small sites.

[1] https://github.com/mindeavor/staticmatic2

Like many other static site generators it doesn't separate content from the layout, which is a trouble when it comes to maintenance.

The About page generated in the demo video doesn't look modern or impressive in any other meaning. Would be great to see video with more advanced example.

Yeah, I agree. It was a quick demo I put together. I would do a more elaborative one using the HTML5 boilerplate.

BTW, the Punch's site (http://laktek.github.com/punch) is created using Punch itself (if it impresses you)

A friend and I created a similar static node engine called Quill at the last HackNY hackathon. http://justquillin.com.

I absolutely love the 'view static version' on the Curbee demo page for those that have JS disabled or have a slow connection. Absolutely fucking love it.

Very nice indeed. Currently thinking about switching to jekyll... question though, aren't there SEO issues when you render all the content client-side?

On most sites few dynamic blocks needs to be rendered on client side (eg. Tweets, Recent blog posts, etc). These are normally canonical content and doesn't mean much for SEO.

Main page blocks should be rendered into HTML and served from the server.

He is obviously not rendering anything on client side.

Do you know something we don't?

There are numerous points in the article and the site homepage where it mentions client-side rendering as being supported.

Why is he 'obviously not' doing anything client side?

> Aim of Punch is to help anyone to build (and maintain) modern websites using only HTML, CSS and JavaScript

Pardon my ignorance, but I thought the modern trend was to move away from that? Towards coffeescript, dart etc. Is there a good reason to insist in js, css. Or is it just my GWT bias showing?

HTML, CSS and JavaScript is the 3 most basic web technologies related technologies one could learn (check the courses in Codecademy - http://www.codecademy.com/courses/type/all/lang/web).

But the currently available tools often requires people to have certain other knowledge (such as server-side scripting in PHP, Managing MySQL databases, etc) to create and manage a simple real-life website. Aim of Punch is to remove this layer of complexity and be a comfortable tool for even someone who knows only the basics.

Personally, I believe it's still easy to create manageable websites only with HTML, CSS and JS.

However, as I mentioned in the post Punch is quite flexible. If someone fancy they can even extend it to parse CoffeeScript or Sass as well.

Not related to Punch per se but the demo link on CurdBee gives me a server error.

Yeah, I too experienced the same problem for awhile, but it loads fine now http://demo.curdbee.com/

Reply on news.ycombinator.com