

Show HN: Punch - A Fun and Easy Way to Build Modern Websites - laktek
http://laktek.com/2012/04/19/punch-a-fun-and-easy-way-to-build-modern-websites/

======
randomdrake
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.

~~~
laktek
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.

------
minhajuddin
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/>

~~~
AncientPC
> 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.

~~~
minhajuddin
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...](https://www.google.co.in/search?sourceid=chrome&ie=UTF-8&q=minhajuddin.com+jekyll)
) 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.

------
178
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.

~~~
laktek
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.

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

Anyway - keep up the inspirational work.

~~~
laktek
Fixed. Thanks for spotting it.

------
dhawalhs
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>

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

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

~~~
StavrosK
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?

~~~
laktek
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.

~~~
dhawalhs
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?

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

~~~
antidaily
And include a picture of a cat.

------
simplify
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>

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

------
exim
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.

~~~
laktek
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)

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

------
instakill
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.

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

~~~
bungle
He is obviously not rendering anything on client side.

~~~
bmelton
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?

------
vibrunazo
> 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?

~~~
laktek
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.

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

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

