Build rapid and lightweight static websites with Hyde - IBM

More documents

Recommendations

Info

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
ibm.com/developerWorks/ developerWorks® Turning a design template into a Jinja2 template In a website, you'll often have the same basic layout and design for many of the pages, with differences in content and metadata. To turn the Minimalism design template into a Jinja2 template that you can use for multiple actual pages, figure out what is general to all the pages and what is specific to each one. Look at the head element from Minimalism: Minimalism - Home In this case, pretty much everything but the title is shared across pages, So I'll turn just the title content into a template field from metadata: {{ resource.meta.title }} The head element also links to icons, styles, and other resources. Hyde manages the correspondence between the folders for such resources and their URLs in resulting pages, so you have to update these links to use a special Hyde function: ... You can place the favicon.gif file inline during development. When you launch a site into production, it's best to locate the icon image at the root of the domain, and the explicit links become superfluous. You also need to update any images or links to JavaScript files or other resources, using the same pattern as in previous examples. For example, one feature image used to show off the template looks like this after update: At this point, Hyde can display the template just as it looks on the demo site from which you downloaded it. But your work is not entirely done. Now you have to set up to replace the "Lorem Ipsum" dummy text with useful content. Build rapid and lightweight static websites with Hyde Page 5 of 9
Page 1 and 2: Build rapid and lightweight static
Page 3: ibm.com/developerWorks/ developerWo
Page 7 and 8: ibm.com/developerWorks/ developerWo
Page 9: ibm.com/developerWorks/ developerWo

Build rapid and lightweight static websites with Hyde - IBM

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?