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

created: 20130828190200000
modified: 20241008031135403
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.
This process requires that TiddlyWiki be installed on Node.js on your local system. See [[Installing TiddlyWiki on Node.js]] for 
details.

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

! Wiki Snapshots and Tiddler Snapshots

You can explore a static representation of the main TiddlyWiki site at https://tiddlywiki.com/static.html. 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:

```sh
tiddlywiki wikipath --render '[!is[system]]' '[encodeuricomponent[]addprefix[static/]addsuffix[.html]]' text/plain $:/core/templates/static.tiddler.html
tiddlywiki wikipath --render $:/core/templates/static.template.html static.html text/plain
tiddlywiki wikipath --render $:/core/templates/static.template.css static/static.css text/plain
```

The first RenderCommand generates the HTML representations of all individual non-system tiddlers using the filter `[!is[system]]`, and the next filter `[encodeuricomponent[]addprefix[static/]addsufixx[.html]]` applies URI encoding to each title, and then adds the prefix `static/`, and finally adds the suffix `.html`. The second RenderCommand saves the static version of the DefaultTiddlers in `static.html`, and the final RenderCommand 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: https://tiddlywiki.com/alltiddlers.html

The example is built by the following commands:

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