This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

Generating Static Sites with TiddlyWiki

8th October 2024 at 3:11am

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:

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