Building this Website (6. external files)

Sunday, May 3, 2015

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.

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

previous: fixing tiddlers' date
next: plugins

Not Even Odd

Musings and mumblings of a random nerd

Last 10 Posts:

Building this Website (8. feed)
Free Software
Building this Website (7. plugins)
Building this Website (6. external files)
Building this Website (5. tiddlers' date)
Building this Website (4. tags)
Building this Website (3. navigation)
Building this Website (2. template)
Building this Website (1. content selection)
Building this Website


see all tags
    All Posts
    (alphabetically | chronologically)

Follow:        ...