Static Site Generators

As web developers, we most often work with dynamic web content. These days, it’s rare to come in contact with plain old HTML files. That said, there are a growing number of tools which assist in the creation of static sites, aptly named static site generators. To cite a recent example, Kyle Rush published an article explaining how Obama’s campaign team used Jekyll, arguably the most popular static site generator, to improve the performance of their $250 million fundraising platform. In this article, I will discuss the purpose of these tools, the benefits they provide, and several popular options to choose from.

An overview

For a simple site or blog, it is not uncommon to create a basic web application consisting of two primary components: (1) a page layout (i.e. header and footer), and (2) a small collection of database tables to manage content. There really isn’t a whole lot going on here, and the whole application server + database + hosting solution can become a real pain for such a simple project. If the goal is to simply wrap written content within the context of a master layout, this is hardly the simplest solution.

Static site generators are able to satisfy the same needs without the unnecessary complexity. As part of the build process, layouts are combined with content to generate simple HTML files. Layouts are likely to have some variation of a templating syntax, and content files can be written in Markdown or other familiar writing formats. As a result, you avoid the headache of the overhead which can accompany dynamic sites.

Primary benefits

  • Fast: Because the generated files are simple HTML files, they can be served directly rather than being processed by an application server.
  • Affordable: There are several options to host your static sites for free. For example, you could store the files in a simple Dropbox folder, and use a service like site44 to serve them from a custom domain. You can also serve a static site directly from a GitHub repository using these instructions. For a more sturdy hosting solution, Amazon offers their Simple Storage Service (S3) at a very affordable price for most sites.
  • Simple: Most static site generators require a layout, some content, and a basic understanding of the syntax used to link them together. Jekyll uses Ruby, but you won’t need to know much about Ruby in order to use it for your own sites.
  • Secure: Because your site is simple HTML, there’s significantly fewer security risks. As a result, you can concentrate on what really matters: the content itself.

Popular Static Site Generators

Depending on your development environment, you may want to choose from one of the popular options below:

Conclusion

This blog itself was previously maintained using a custom static site generator. It’s fairly basic, but the source code is available at the GitHub repository in case you’re curious about the project structure of a simple static site. Since this is a custom generator, it may be more relevant to refer to the source of some of the many sites which use Jekyll.

My Resources for Learning

To be a resourceful developer, it’s important to keep up with new trends and current best practices to be applied in our own projects. Below, I share my current resources I use to find new projects, ideas, and discussions.

Blogs

Blogs allow industry experts and other enthusiasts to share their knowledge on a topic that interests them. Many times, this is an exploration of a topic that tends to cause trouble for many developers. Other times, authors simply want to share some of their own guidelines and practices.

Here are some of the blogs I follow:

Online magazines offer articles from a variety of authors:

A RSS reader may come in handy for keeping track of new posts. I personally use the Feeder extension for Chrome.

Twitter

Blogs are usually most useful for in-depth discussions of focussed subjects. On the other hand, tweets are forced to be more concise, hence tend to be impulsive. A tweet can include an interesting tool or article the author has found intriguing.

Blog authors and industry experts are a good starting point for people to follow. From there, Twitter will periodically recommend others with similar expertise that you may be interested in reading.

In order to keep up with tweets, I use the Twitter Notifier extension for Chrome, which provides desktop notifications for new tweets.

Social News (Hacker News, others)

The idea of social news is to implement a democratic-style voting system to article submissions. Not only are the articles themselves useful for learning, but I find that the comments invite a variety of perspectives in the form of reactions, criticism, and further reading.

It’s important to find a social news site which appeals to your interests. Hacker News was originally targeted towards startup entrepreneurs, but has invited discussion of tech news and development practices more generally. If you want a more targeted discussion group, Reddit’s many sub-reddits may be more relevant. Some of the more popular sub-reddits include /r/webdev/ for web development, /r/javascript/ for javascript, or /r/programming/ for programming in general.

Presentations & Screencasts

Throughout the year, there are numerous technology conferences which developers can attend to refine their skills. While it’s not always possible to attend these conferences, we’re fortunate that many speakers and conference organizers upload their presentations for the general public to consume. Each of these presentations provides an expert’s concise summary of a broad topic, so is helpful in attaining a minimal understanding.

Addy Osmani recently shared a curated list of talks for front-end engineering at Smashing Magazine (link). Smashing Magazine itself recently held its own conference, of which many videos are now available online. For a more general resource, Speaker Deck and SlideShare are platforms which allows speakers to share their presentations online.

Conclusion

These are my own sources which I find useful. If you are aware of other useful resources and want to share, feel free to get in touch with me directly or leave a comment.