Help me transition my website to TW -- suggestions and brainstorming?

, ,
#1

Hello all,

This is hard to search and see if it was discussed, because I’m not 100% sure what I’m looking for yet.

I’m playing around TW after 5 years I haven’t. I used it for about a year, then found out about Emacs org-mode, and found it to be an excellent writing environment. I have my own personal wiki and website exported this way to create a static blog in Hugo.

I recently found out about running node.js and through having my tiddlers as files, I can also publish the wiki as a static web sites with individual html files, css included. I followed a few tutorials like the one from didaxy which seems to be somewhat outdated (the code in the tutorial doesn’t match exactly what I see in TW) and other similar ones.

Here’s where I started getting lost.

TW requires JS to function, at least to be the interactive site it is. Without JS there are no buttons, there’s no navbar at all. So, I need to have JS running somehow on github or gitlab (which I want to use to publish the html pages). I am not sure how to do that. the tutorial is linking to some unique link to bootstrap and I don’t want to use that. I’m wondering if there’s another way.

Meanwhile, in Emacs org-mode, I found a plug in that exports org mode to wikitext, but it’s far from a polished experience. Those of you who use Emacs (I’m sure there are a few) know about org-mode’s ability to export to other formats, like HTML and even PDFs. I know TW has an away of importing tid files directly or markdown (kind of works, through a plug in), but I’m wondering if there’s any way anyone found to get it to “understand” org mode syntax, or, perhaps pother synatx I can use with org mode, for example, HTML (it imports as a page, not as wikitext), markdown, etc. Something that looks as the original tid.

Then I thought, as I’m writing this, wait a minute. You guys probably use your favorite text editor to write directly in wikitext, don’t you? How does this work out for you? Those who use Vim? Nano maybe? Notepad? Textedit? How do you guys do it? Do you work directly in the tid files?

And I’d like to hear how you take care of the JS problem if you have a live site. I’m pretty new at this and I haven’t heard of node.js before… maybe there’s something obvious to you that I’m totally missing?

So far the process is:

  1. Launch node.js and tiddlywiki server
  2. edit tid files in Emacs (or what have you), take a look in tiddlywiki and:
  3. make chages to things that didn’t come out correctly withing the TW editor
  4. Build the static site
  5. Upload the static text static site (can use git to push it I guess)
  6. site gets published along with javascript (mystery to me), tada!

This is kind of long, is there something that I can automate further?

So you see, this is a bit all over the place. I hope I can get some direction, even something like "TLDR; you need to split this to 1 2 and 3 would make sense at this point.

Thanks all! Hope I didn’t lose you completely >.>

"Just" -- command line tool inspired by make -- a recommendation
#2

maybe this repo can solve some of your questions

image
image828×1792 121 KB

2 Likes
#3

I have used org-mode, and it was indeed the best information retrieval system that I have ever used. I gave up on it, though, due to the lack of mobile support and the oddity of elisp. I tried different tools before settling on TiddlyWiki.

TW’s concept of a static site is a bit different from static website builders like Hugo’s. TW’s static website has no JS at all. This issue has been discussed in the past; you can search for it.

You can change this behavior by overriding export templates.

BTW, I, too, am in the same boat. I am waiting for some free time to customize export templates to maintain my website in TW.

#4

I have used emacs, VS Code, Sublime, etc. For the last decade, Neo-Vim has been my primary editor.

That said, you are better off treating TW as a complete app. I have tried writing individual tiddlers in Vim. I concluded that I could not take full advantage of TW’s capabilities with an external editor. For example,

  1. Link completion
  2. preview
  3. custom fields
  4. System tiddlers like $:/talha131/images/some thing

TW’s editor has several features that you will not find in an external editor.

  1. snippets
  2. custom buttons from plugins like Shiraz formatter

You can customize the tiddly wiki editor and use code mirror, for example. It lets you have emacs keybindings.

1 Like
#5

Again, you need to work on export templates.

like what?

well there are several ways. One way is

  1. Use nodeJS version of TW
  2. it stores tiddlers in individual files
  3. export your folder to Github
  4. Use Github actions or Netlify to convert your tiddlers into a static site. It will still use TiddlyWiki NodeJS app but it will be on Github/Netlify servers
#6

This discussions all a bit technical! watches most of it fly over his head… Just in case you’d missed it or its helpful, Tiddlywiki does have a built in github save mechanism. I serve up my tiddlywiki from github as a single web page.

#7

Thanks all. Didn’t realize I got some helpful answers.

1 Like
#8

What is the purpose of exporting static,etc? just to host?

You could just:

  • go to http://wwwhww.news
  • Login with Linkedin
  • Start writing,editing your own tiddlywiki
  • Hit save, and done.

** If you want custom domain, msg me.

Thanks
Lucas
http://wwwhww.news/u/cwSNkeLNXf

#9

Although I cannot speak to Emacs or the output you refer to I can speak to using TW as a personal website.

I publish my personal blog at https://tritarget.org/ I use the TW build system to output two formats: A single HTML (index.html) which includes the JavaScript to make the site live like you mentioned. And also directory of static non-JavaScript HTML that is available for search engine bots to crawl.

This is essentially the exact same build process and solution that https://tiddlywiki.com/ uses to publish the main site. Thus you now have two examples on how to go from plain (WikiText tiddlers) files to a host-able HTML/JS/CSS document you can upload to what ever hosting service you like (including GitHub pages).

You can see the source repositories here:

1 Like
#10

Hi @sukima
When I use npm run build I get error make not found
What is the make is it the GNU Make here?

#11

yes, need install make tools @Mohammad

#12

I use GNU Make as it is installed on almost every linux system I use as base developer tools. I like Make a lot for these kinds of things. But since TiddlyWiki is build system agnostic you might not need make.

One of the core uses for make in my system was my need to compile assets. Something Make is good at tracking and dealing with. But if you don’t need such assets you can use NPM scripts to run TiddlyWiki commands.

1 Like