Build rapid and lightweight static websites with Hyde - IBM

developerWorks® ibm.com/developerWorks/
translated to paths for the web server, and provides basic metadata for some key
pages.
Templates and Jinja2
Most websites these days can benefit from some degree of templating. A template
system can help you separate common elements of your site's structure and pages
from each page's individual content. For example, if you look at a weblog, sometimes
more than half of the HTML of each page is boilerplate replicated across all entries.
A template allows you to express that 50 percent of content only once and have it
automatically applied to all the pages. A template system can also support smart
features such as automatically generating a calendar of a weblog's archives.
Hyde uses a similar template language to that of the popular Django framework,
implemented through the Jinja2 project. Each template looks like HTML with some
additional, special syntax for the template commands, as explored further below.
The templates go in the layout directory, and you add and update templates there to
manipulate the overall content outline of your site.
Your content
Most important of all is your own site's content, which you maintain in the directory
of that name. You would generally have one file for each unique web page. Each
content file starts with the page metadata and then has the HTML and template code
for the page. This directory is also where you find static files to support the site, such
as images, stylesheets, and script files.
A small example
A quick way to start with a nice-looking website is to download one of the many
free web designs that include HTML, CSS, and even scripts as needed for a site's
presentation. You can then replace the design's boilerplate with your own content and
tweak the look and feel. This is a straightforward process with Hyde, and you needn't
restrict yourself to a web design for that specific software. In this section, I chose a
regular, free HTML5/CSS3 template and adapt it for Hyde. It's called "Minimalism,"
by Marija Zaric (see Resources), and is available under the Creative Commons
Attribution (by) 3.0, so you can use it freely, even in commercial projects, as long
as you credit the author for use of the template. Your websites using the template
become derivative works of the template.
I downloaded the template package and unzipped it. It contains an index.html file.
The Hyde folder's content directory also contains a file by the same name, but it's
not actually HTML but a Jinja2 template based on base.j2. What I did was turn the
Minimalism file into a new template, by copying it as minimalism.j2. At the same time
I copied the other, support files for the template to the appropriate locations:
cp minimalism/index.html
$PATH_TO_DIRECTORY/layout/minimalism.j2 cp minimalism/css/styles.css
$PATH_TO_DIRECTORY/content/media/css/ cp minimalism/images/*
$PATH_TO_DIRECTORY/content/media/images/
Build rapid and lightweight static websites with Hyde Page 4 of 9