This is a series of posts which technically describes how Not Even Odd is built.
Notice (April 2020): This post is now obsolete. Since version 5.1.18, TiddlyWiki does serve external files. Thus, simply: put any external files (images, etc.) in the
files/ subfolder and copy the folder in the final site.
Static site with TiddlyWiki
Hosting with GitHub
In a single-file TiddlyWiki, images are usually either referenced by their location (file or URL) or embedded (in base64 representation) in TiddlyWiki itself. Embedding content is useful feature for the 'single file' paradigm as it makes sharing easier, but it's not very suitable for large images. In case of generating a static site embedding images may not be desirable in most cases.
Unfortunately, referencing an image file by its location on the file system doesn't seem to work when running TiddlyWiki on node.js. Interestingly, TiddlyWiki has a concept called "external images" which are tiddlers with a field named
_canonical_uri whose value points to an external image. I tried (hard) to make use of it, but for a reason or another, it didn't work to display images.
So I finally went with another solution: I created a folder
res where I place my images (and any other "resource" file I want to link to) and then I use a small static webserver to serve the content of that directory. With that setup, a reference to an image/resource file
res/RESOURCE thus becomes
http://localhost:8081/RESOURCE (as TiddlyWiki on node.js uses port 8080, I use port 8081 to serve resources).
Then during the static site generation, http links to resources needs to be converted back to relative links. For example, it can be done like this:
# static site generation: tiddlywiki --rendertiddlers ... # res folder in output with correct relative links: cp -a res output sed -i s,"http://localhost:8081/","res/",g output/*.html
Again, perhaps not the most "elegant" solution (in the spirit of TiddlWiki), but it works, and using the shell is far easier than trying to modify TiddlyWiki with your own plugins.
Tip: As the http server to serve resources, you can use one on top of node.js or even simpler if you have python installed on your system, you can just use (one of) this (depending on which python version you have):
cd res ; python3 -m http.server 8081
cd res ; python2 -m SimpleHTTPServer 8081