TiddlyWiki5/editions/tw5.com/tiddlers/howtos/Generating Static Sites with TiddlyWiki.tid

created: 20130828190200000
modified: 20141013085608911
tags: [[TiddlyWiki on Node.js]]
title: Generating Static Sites with TiddlyWiki
type: text/vnd.tiddlywiki

TiddlyWiki5 can be used to generate static HTML representations of a TiddlyWiki that doesn't need JavaScript.

There is much flexibility in how the static HTML is generated. The following scenarios are all illustrated on http://tiddlywiki.com.

! Wiki Snapshots and Tiddler Snapshots

You can explore a static representation of this TiddlyWiki at <a href="static.html">static.html</a>. That file is a static snapshot of the current DefaultTiddlers. Any tiddlers that it links to are referred to via URLs of the form `/static/HelloThere.html` that point to static snapshots of individual tiddlers. The tiddler HTML files reference a `static.css` stylesheet file.

The following commands are used to generate the sample static version of the TiddlyWiki5 site:

```
--rendertiddlers [!is[system]] $:/core/templates/static.tiddler.html static text/plain
--rendertiddler $:/core/templates/static.template.html static.html text/plain
--rendertiddler $:/core/templates/static.template.css static/static.css text/plain
```

The first RenderTiddlersCommand generates the HTML representations of individual tiddlers, the second RenderTiddlerCommand saves the static version of the DefaultTiddlers, and the final RenderTiddlerCommand saves the stylesheet. (All the files are placed in the `output` folder of the wiki folder).

! Wiki Snapshot with Internal Links

It is also possible to produce a single HTML file that contains static representations of tiddlers, and uses standard HTML anchor links to jump between them.

For example: <a href="alltiddlers.html">alltiddlers.html</a>

The example is built by the following commands:

```
--rendertiddler $:/core/templates/alltiddlers.template.html alltiddlers.html text/plain
```