13 December 2012

An Introduction to Static Site Generators

Up to the point where I discovered “Static Site Generators”: I was more willing to develop a website using code and a self made simple content management system than I was to return to the days of hand coding HTML pages with duplicated markup. Its simply too cumbersome to approach all that duplicated HTML code.

After Saying Goodbye to Pylons and approaching Ruby on Rails, I decided it would be a good exercise to revisit my existing websites and look at converting them over to Rails 3, I started looking at what needed to be done and realised that in many cases, it simply wasn’t worth it to code content management and store content in a database. What I needed was something that would generate static websites for me without all that duplication. Leaving me to code Rails websites where code, a database and content management were required.

What is a Static Site Generator?

A Static Site Generator is a program, that generates an HTML website as an output. ThisHTML website is then served through your web server, just like the old’n’days. This is usually achieved using template languages and code that separates out the layout of the website from its content and styles.

Advantages of a Static Site Generator?

  • Security – There’s no database layer, or rails/pylons layer of code so security excellent.
  • Performance – Under load, less memory / cpu usage to serve your website, so your website stays up longer
  • Have a copy of your content separate from your server
  • Easily move your website to another host – Copy and paste the HTML and re-route the domain name should you have one.
  • Easily choose website hosting – You don’t have to worry about which technology they use, because you only need to serve HTML.-
  • Website Hosting is cheaper.

Disadvantages of a Static Site Generator

  • You can’t update your website unless you’re at your computer where the static site generator software is installed
  • You can’t have local comments, pingbacks, non-google site wide search, contact us forms (without some dynamic code etc)

Which Static Site Generator?

There are many static site generators out there to choose from. Here’s a selected (ruby) list:

My Selection Criteria

While creating this blog, I tried out quite a few before I settled on Jekyll. Having no previous Ruby on Rails or Sinatra web framework experience, I found some of them to be a bit difficult to comprehend, while other were too restrictive. My main criteria for selecting a Static Site Generator were the following:
  • Don’t force me learn too many languages (read haml/scss/sass/less)
  • Have easy to understand layouts
  • Have example websites and code that can be copied and used to learn from
  • Have an auto updating server that provides me a development environment
  • Has comprehensive documentation.

My Choice: Jekyll

I felt that Jekyll met these criteria and so set about creating the blog you see here today. Jeykyll is the engine behind the GitHub Pages feature. Jekyll is very blog aware, this means that you can use:
  • Pagination
  • Permalinks
  • Tagging
  • Supports migrating from other platforms like Movable Type, Drupal, Wordpress, Marley, and Typo
It’s also quite easy to do rss feeds and has a plugin system with some third party plugins available.
To process templates, Jekyll uses the liquid templating engine but it also has it some of its own extensions to liquid which provide some filters and tags to achieve certain things such as line numbering, including small page fragments and textilizing page excerpts.
Content is typically written in Markdown or Textile. This allows you to concentrate on your writing and not on the styling of your content. And being a statically generated website, you’ll have you content in a readable format on your computer available to you should you wish to re-use it or re-publish it. No database extracts, SQL or tricky php wordpress extracting addons required.
I’ve found that it can also be used for a bit more than just blogs. I’m currently rebuilding another simple website using it and I’ve found the liquid templating and markdown/textile content creating to be very easy to pick up and quick to get me productive. It just takes a little lateral thinking to get your layout files setup correctly.

Conclusion

I’ve found the main advantage of using a static site generator to be the ease of getting things up and running. You can use it for serious production websites or just to provide your client with a usable / workable prototype of a design prior to getting into the nitty gritty of detailed code and database design. Jekyll is highly recommended and has suited my needs and skills perfectly. I encourage you to look around and try a number of the existing static site generators out to find the one that best suits your needs.
You can discuss this article on Hacker News or Reddit .

24 comments:

  1. I'm the creator of the web publishing framework, Punch (http://laktek.github.com/punch).

    The main problem with Jekyll is it's a blogging tool rather than a generic site builder. You may have to do deal with many workarounds, if you want to use it to create a site other than a blog with Jekyll. This was a major itch, that made me to create Punch.

    ReplyDelete
  2. Are there any Static Site Generators for PHP ?

    ReplyDelete
    Replies
    1. Think about it. If it's PHP, then it isn't a static site. So, no.

      Delete
    2. Yeah, try phrozn. If it's PHP, then it will interpret code whose output may as well be .html/css files. So, yes.

      Delete
    3. Jackson, c'mon man, why would PHP be different than any other language. Of course you can run PHP on your server and not expose that to the outside world.

      Delete
    4. Kavit: Sure, I've used the Smarty template engine with my site for a few years, editing the smaller tpl files and then running this one php file on demand (private URL on the server) that would just enumerate all the template files in the directory and recreate any that changed into the .html.

      Delete
    5. Also, http://staceyapp.com/ for PHP equivalent.

      Delete
    6. There is PieCrust: http://bolt80.com/piecrust/

      It can both act as a Static site generator and a CMS.

      Delete
  3. Hello,
    I know people are also creator of many ultra modern technical things but, now a day’s our technologies are running on an advanced way and if we general people are not walking on that way so we can’t catch that.
    @Orimark

    ReplyDelete
  4. Hi,
    This generation is totally new about the latest technology and they are always in thirsts to know more. So thanks for your fabulous sharing. It enhances our knowledge and gives some overall ideas. I would like to read some more of your posting in future…
    Keep it up!
    @Orimark Technologies

    ReplyDelete
  5. Yes http://www.phrozn.info/en/

    ReplyDelete
  6. I do like Jekyll - but if you already have a Rails website, I'd rather not touch it and generate a static website out of Rails application with a simple Rake task. This is how I did it: http://blog.atlashost.eu/post/ruby-on-rails-a-static-site-generator.html

    ReplyDelete
  7. Home Lifestyle has a wide range of One Stop Home Essentials products suited for the Active, Busy, Mobile and City Living People, bringing the Quality of Life to a different level.

    ReplyDelete
  8. Nirman - Flexible static site generator for NodeJS
    http://www.anupshinde.com/posts/nirman-static-site-generator/
    https://github.com/anupshinde/nirman

    ReplyDelete
  9. Cabin, http://www.cabinjs.com/, is a node.js static site generator powered by Grunt. It currently has three beautiful blogging themes available out of the box. Getting started takes like 45 seconds.

    ReplyDelete
  10. I created this dashboard to track the Github stats of the leading static site generators to help people choose a generator with good traction in the programming language they like.

    Check it out at:
    http://www.staticgen.com

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. I created a kind of static-site-generator-as-a-service that stores the source files in dropbox. It has almost all advantages you name here (security, performance, flexibility, etc...) And solves some of the problems (you can edit your site wherever you can reach your dropbox). ATM it is far less feature-complete then Jekyll, but I'm working on templates, haml support, blog-awareness, etc... Let me know what you think: www.sitebox.io

    ReplyDelete
  13. Hello dude, really like this concept. I did not know much more about Static Site Generator and I had no idea before read this concept provided by you. Your wonderful write-up just assisting me to let this know and that's why I'm very much thankful to you. Thanks :)
    cheap VPS

    ReplyDelete
  14. Here's the definitive guide to choose a static generator tool: http://staticsitegenerators.net/.
    At this moment, there is 209 different tools to choose from ! And a lot of languages are supported (C#, Clojure, CoffeeScript, Common Lisp, CSS (what??), fortran, Go, Groovy, Haskell, Java, JavaScript, Lisp, Perl, PHP, Python, Ruby, Scala, Shell, VimL) and also through websites and desktop applications !

    Have fun :)

    ReplyDelete
  15. Another evaluate is asking if the designer can create a personalized CMS in xhtml in a tableless design with genuine concept cms for web designers with the ability to add new websites in basically published written text without learning impressive technical capabilities. A details meeting that term should display well now and on new handling technological innovation for decades to come.

    ReplyDelete
  16. If you are a Mac user, Cactus has a really nice and simple app: http://cactusformac.com

    ReplyDelete
  17. We are offering cheap high quality website development and provide social media integration for your website.Get your own quality website designing only @ US$150.we provide Website Designing,Website Development,Graphic Designing,Freelance Graphic Designer,Freelancer Website Designer,ECommerece website Designer,Shopping Cart Template Design,Wordpress,Brochure Design,Flyers Design,Visiting Card Design,Bussiness Crad Design,Data Entry Jobs,Logo Design,Template Design with HTML CSS JavaScript,PSD to HTML,Facebook Application,Facebook Fanpage,Twitter API,Facebook API

    ReplyDelete