Error getting theme layout

Static Site Generators and Rapid Prototyping

Posted @ 11:07 pm by Grady Kuhnline | Category: Technology | 0 Comments

At SolutionSet, it’s common for our front-end developers (HTML, CSS, and JavaScript) to build out a static version of a website before integrating it into the back-end system, usually a CMS. “Static” means that the site is just plain HTML, CSS, and JavaScript files.

Developing statically first speeds up the implementation of the designs and allows the developer to work out the kinks in a template before it gets rolled out to hundreds of pages in the CMS. However, building out even a small handful of pages in plain HTML can become quite cumbersome, particularly since a large portion of the HTML is repeated from page to page.

A static site generator can help ease this rapid prototyping phase of the project. The key is that the static site generator has many of the same templating capabilities as a typical CMS, but it is designed to publish a static site. Unlike a back-end system, static site generators are meant to run on the developer’s computer instead of the server. Periodically the front-end developer can publish the site as a collection of static files that can be shared with team members, emailed to the client, or even posted to a web server. Because they are simple HTML, CSS, and JavaScript files, it doesn’t matter what type of server it is—no back-end technology is required.

Using a Static Site Generator

Integrating one of these tools into a project is easy and barely changes the typical project workflow. Usually, just after the design phase has completed, the front-end developer needs to develop static pages while the back-end team implements the CMS. Traditionally, the front-end developer might just hand-manage the HTML from page to page, or they might construct their own crude template system using PHP. Now, the front-end developer might choose to use a static site generator, such as Middleman.

Instead of copying and pasting the same structural HTML from page to page, templates are used to include the common header and footer HTML. This makes it much easier to make changes after development has already begun. Commonly, design and content changes are made during this early prototyping phase and applying those changes to a handful of existing pages is very difficult without using templates.

Static site generators are particularly useful if the site will spend a significant amount of time in the prototyping phase. In some cases, dozens of pages need to be built out. Most site generators can even simulate AJAX responses by generating a series of small HTML files with the responses pre-baked. While developing, the site generator typically has a “watch” mode that allows the developer to see changes in real- time. This mode operates much like a traditional dynamic site, except it’s only available on the developer’s computer. The watch mode makes working with a templated site as fast and easy as it is to work with static files directly. There’s no waiting for the site to compile.

Once the developer is happy with the site—or simply needs to show progress—the generator can be used to create a static version of the site. The static site can easily be compressed into a zip file and emailed to all interested parties. This makes it simple to show clients early progress or share code with remote development teams well before any web servers have been set up for the project.

Integrating with a CMS

Once the back-end team has the CMS ready to start implementing the templates, front-end developers have a few options. They can either port the templates to the CMS or they can generate the site and let the back-end team dissect the HTML into templates as they see fit. Once the site has moved into the CMS it is common to discontinue maintenance of the static version of the site.

Popular Site Generators

SolutionSet has mostly been using Middleman, which is written in Ruby. There’s actually a host of generators available though. Here’s a small list of static site generators that seem to be quite popular:

•    Middleman
•    Wintersmith
•    Blacksmith
•    Jekyll
•    Hyde

Conclusion

Using a tool like Middleman in your development process makes developing static prototypes much easier. Static site generation removes the need to hack together a PHP templating system or try to hand-manage the same HTML within dozens of different pages.

SolutionSet has also been able to use static site generation for projects that needed to launch quickly, before they would have time to implement a proper CMS. We were able to build out entire sites, even localized in different languages, without a CMS at all. After the fact, each site was converted into a CMS when more time was available.

Leave a reply

Error getting theme layout