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

http://laktek.com/2012/04/19/punch-a-fun-and-easy-way-to-build-modern-websites/

by laktek • 14 years ago

91 33 14 years ago

laktek.com

hilti• 14 years ago

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

Anyway - keep up the inspirational work.

laktek9• 14 years ago

Fixed. Thanks for spotting it.

maebert• 14 years ago

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• 14 years ago

He is obviously not rendering anything on client side.

bmelton• 14 years ago

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?

laktek9• 14 years ago

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.

dhawalhs2• 14 years ago

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

StavrosK2• 14 years ago

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

Jasber• 14 years ago

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

Stenerson• 14 years ago

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

inuke• 14 years ago

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

instakill• 14 years ago

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.

randomdrake• 14 years ago

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.

laktek9• 14 years ago

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.

exim• 14 years ago

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.

laktek9• 14 years ago

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)

minhajuddin3• 14 years ago

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/

daemon13• 14 years ago

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

If no, where to download code to play with?

minhajuddin3• 14 years ago

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 :)

AncientPC• 14 years ago

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

minhajuddin3• 14 years ago

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.

vibrunazo• 14 years ago

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

laktek9• 14 years ago

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.

tomatohs• 14 years ago

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

simplify• 14 years ago

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

laktek9• 14 years ago

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

178• 14 years ago

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.

laktek9• 14 years ago

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.

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

Related Stories