Node.js上のTiddlyWikiで静的サイトを生成する方法

 12th December 2019 at 8:47pm

TiddlyWikiは単一のHTMLファイルで動きます。あたかも、一つのサイトのように振る舞うので、このファイルをサーバーにアップロードするだけでサイトを構築することができます。

しかし、TiddlyWikiはJavaScriptで作られているので、表示までに時間がかかったり、SEO(検索エンジン最適化)に対しては不利だったりします。

そこで、TiddlyWiki on Node.jsを参考に、静的サイトを出力しようと試みました。

しかし、うまくいきませんでした。。。(単なる勉強不足です)

試行錯誤してとりあえず、以下の方法で出力できました。

Node.jsでWebサーバーを立ち上げ、ブラウザ上でhtmlファイルから所望のTiddlerをインポートする方法です。まどろっこしいやり方ですが、所望のTiddlerをGUIで選択できる点とコマンドが非常に簡単というメリットがあります。

本サイトもこの方法で作成されています。

手順

初回

Node.jsをインストールします。

  • こちらからインストーラをダウンロードして、インストールしてください。
  • TiddlyWikiはデフォルトで入っています。

Node.js command promptを実行します。

DOSプロンプト上で以下のコマンドを実行し、サイトの初期化を行います。

cd c:\tmp ← とりあえず、このフォルダに出力します
tiddlywiki mysite --init server

2回目以降

サーバーを起動します。

tiddlywiki mysite --server

ブラウザを起動して、「127.0.0.1:8080」を開きます。

サイドバーの[Tools]タブの[import]ボタンをクリックし、htmlファイルを選択します。

  • インポートしたいTiddlerを選択できます。
  • インポートすると自動的に保存されます。

[Ctrl] + [C] ⇒ [Y]でサーバーを終了します。

静的サイトを生成します。

cd mysite ← tiddlywiki.infoのあるフォルダに移動します
tiddlywiki --build

output\staticフォルダにhtmlファイルが生成されます。画像ファイルなどを、staticフォルダにコピーすれば完成です。

サンプル動画

上記の手順を録画した動画を以下に置いておきます。最新のNode.jsではtiddlywiki.infoの修正は不要です。


HomeへTiddlyWikiの記事Topへ