Generate Static Website Using Tiddlywiki

[Mohammad]

In another thread Siniy-Kit presented a method to export to Static Multi Page Website!

Her wrote:

Hi,  Jeremy. Why you put files to zip? All old Tiddlywiki versions can generate static multipage sites without node.js  and JSZip and any macros. And browsers can download many files at one time.

For example open this page https://heeg.ru/shop2.html?id=11f1IzEfXaPZuuVnMya7_50oHOz6kVqK_9-nIYojOHz4#static_cut and press buttons to generate css or js or all pages.

 

<$action-sendmessage

 $message="tm-download-file" 

$param="$:/core/templates/HEEG/static.tiddler.html" 

exportFilter=<<quotedCurrent>>

filename=<<filename>>/>

__________________________________________________________________________________________________________________________ 

Suggestion

I appreciate Siniy-Kit kindly to explain more and if possible give a short step-wise instruction to produce a multipages static site!

I know Siniy-Kit in the past has made many wonderful online stores using Google Sheets + Tiddlywiki!

Recently many questions raised on how generate static websites using Tiddlywiki!

There are some questions to be answered:

1. How export to static multi-pages using Node.js+Tiddlywiki   (see: https://tiddlywiki.com/prerelease/#Generating%20Static%20Sites%20with%20TiddlyWiki)
2. How export to static multi-pages directly from browser (see https://groups.google.com/d/msg/tiddlywiki/gEpIkzW5ADU/RALNIKbUAAAJ)

Both of them are straight forward and ready out of the box in TW 5.1.23pre. BUT when users like to

1. customize html file names (like removing spaces and nasty chars)
2. customize page layout and presentation using custom css
   
3. create folder structure like (../assets ../images ../pdfs ...)
4. include some JS
5. resolve the extra <p> html tags when render into html which damage custom designs
6. resolve the extra html tags like div with classes NOT in use when custom css is used

they encounter problems.

So, I appreciate Siniy-Kit  to share his experience in a simple way and let us use his techniques to

create static pages.

--Mohammad

p.s: @Eric Shulman

Would you please add static-page or suitable tag to Forum tags!

[Anne-Laure Le Cunff]

Following this thread!

Also found this tutorial incredibly helpful in cleaning up the output of a TiddlyWiki static website.

On Friday, May 8, 2020 at 5:37:08 PM UTC+1, Mohammad wrote:

In another thread Siniy-Kit presented a method to export to Static Multi Page Website!

Her wrote:

Hi,  Jeremy. Why you put files to zip? All old Tiddlywiki versions can generate static multipage sites without node.js  and JSZip and any macros. And browsers can download many files at one time.

For example open this page https://heeg.ru/shop2.html?id=11f1IzEfXaPZuuVnMya7_50oHOz6kVqK_9-nIYojOHz4#static_cut and press buttons to generate css or js or all pages.

 

<$action-sendmessage

 $message="tm-download-file" 

$param="$:/core/templates/HEEG/static.tiddler.html" 

exportFilter=<<quotedCurrent>>

filename=<<filename>>/>

__________________________________________________________________________________________________________________________ 

Suggestion

I appreciate Siniy-Kit kindly to explain more and if possible give a short step-wise instruction to produce a multipages static site!

I know Siniy-Kit in the past has made many wonderful online stores using Google Sheets + Tiddlywiki!

Recently many questions raised on how generate static websites using Tiddlywiki!

There some questions to be answered:

[Mohammad]

Anne-Laure

On Friday, May 8, 2020 at 11:00:49 PM UTC+4:30, Anne-Laure Le Cunff wrote:

Following this thread!

Also found this tutorial incredibly helpful in cleaning up the output of a TiddlyWiki static website.

Thanks! I have read the work by didaxy and he did great job!

By the way have a look at the great static and (in my opinion some are dynamic if he uses JS) websites created by Siniy-Kit

1. https://heeg.ru/  (generated by Tiddlywiki see here:https://heeg.ru/heeg.html#index)

2. https://design4shop.ru/heeg.html#index 

3.http://novye-podarki.ru/6_7_0/heeg.html#index

See his Tiddlywiki templates here: https://groups.google.com/forum/#!msg/heeg/G0eSqbJBvZg/6r8MJYwRAAAJ

and also see: https://groups.google.com/d/msg/tiddlywiki/ujJHz3BSnhk/i1ZXv93CAQAJ

So, he has alot of experiences generating websites (static pages) using Tiddlywiki.

--Mohammad

 

[Mohammad]

Anne-Laure,

 This one is really interesting!

http://heeg.tiddlyspot.com/#index  (The Tiddlywiki template to create static webpage as online store!)

--Mohammad

[Anne-Laure Le Cunff]

Wow, incredible these were generated with TW. Very impressed.Thanks for sharing!

[Edgaras]

Regarding the syncing static files automatically to a cloud. In JavaScript it's impossible (as much as I know) to save files to a desired location, as it cannot access you local drive.

However, we can still use the Downloads folder and save all files to e.g. "Downloads/TwStaticExport" and then sync this folder with your Dropbox or Google Drive folder that is connected to a service that publishes static files (e.g. fast.io). TonyM reminded me about this folder syncing in another thread...

One way to do it is to use symbolic links in terminal:

ln -s /path/to/original /path/to/symlink

I haven't tried it yet, but it should work. I've done it before for other things.

––––––––

Regarding the files vs. zip:

One of the reasons to export zip instead of individual files, it will be downloaded all at once. If you choose to export files, browser will prompt where to save and how to name each file.

I did not yet find a way to batch download all files within a folder. Is that even possible? Just found this, but it's in jQuery https://github.com/sindresorhus/multi-download

––––––––

Regarding the images, I decided to keep all my images for a static in one folder in Dropbox and serve through fast.io so all images always have an absolute hyperlink. For example: https://whatif.space/images/digital-thinking-space-1.jpg . Then I use the image directly in any of tidders.

[Saq Imtiaz]

@Edgaras correct on all accounts regarding browser limitations for download path etc.

Note that Siniy-Kit is using a custom browser extension (that he wrote?) to get around the prompts for downloading multiple files, setting download paths based on file types etc:

https://chrome.google.com/webstore/detail/heeg-download-to-folder-o/hahpaggbcdfdgmeahkaiokilglbcopdc