Re: [TW5] Static Website Generation

[Suzanne McHale]

Couple of questions (I'm interested in static site generation for my TW too, but am not a programmer!) - how did you make the tag buttons clickable without needing Javascript (that I can see)? Also replace the spaces in TW urls with dashes - can this be done automatically?

[James Anderson]

The tags are just buttons wrapped in <a> elements, which is all handled automatically by the static exporter. 

There are some programmer hooks in the static exporter which let me change the links at run time. I run over all the links and remove any spaces (and some other characters( when i generate the site.If you are not a programmmer this might not mean much to you, but in https://github.com/welford/twstaticblog/tree/master/export getexportlink,js and getexportpath,js do this work.

James

[Jeremy Ruston]

Hi James

Great to see how far you've got, dullroar.com looks very good to me.

Your post reminded me that it is perhaps time that we tried to fold decent static site generation support into the core. I've created a ticket here:

https://github.com/Jermolene/TiddlyWiki5/issues/1676

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a5b20842-2166-4d31-a204-2d5ae2b0bb8b%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

[James Anderson]

It looks like dullroar is no longer using TW to generate the site http://dullroar.com/new-look.html

[Jeremy Ruston]

Hi James

On Sat, Apr 25, 2015 at 9:10 AM, James Anderson <james.w....@gmail.com> wrote:

It looks like dullroar is no longer using TW to generate the site http://dullroar.com/new-look.html

Yes, I saw that; it's still worth reviewing the work that Jim did, I think.

Best wishes

Jeremy

[Florian Cauvin]

Hello,
I'm interested in using TiddlyWiki for creating a small static personal website and I'm very impressed by the work that James Anderson is showing here.
I will try to also make my site, generating it from TiddlyWiki running on Node.js.

Jame has obvisouly done a lot of customization and even coded his own plugins.
Personally, I aim for something far simpler.
I will report my progess in this forum (if there's no objection for me doing so)

Best Regards,
Florian

[James Anderson]

Feel free to use/edit any of those plugins Florian :)

[James Anderson]

I've posted on here and on the tiddlywikidev side a few times with questions regarding this before, This time is more of a show and tell as i've had some time to clean up some of the code I was using to export static sites with tiddlywiki.

I have renamed the repo I was using and split it in two separate plugins: https://github.com/welford/twstaticblog/  I have also written a new post about how I am exporting using these plugins here: http://phasersonkill.com/2015/04/23/creating-a-static-webpage-using-tiddlywiki.html 

In short: the helper plugin (https://github.com/welford/twstaticblog/tree/master/helper) resides within my tiddlwiki and lets me customise  which posts to output,which tags to add to the sitemap, which ones to hide etc etc  Also to some degree it lets me alter the look of the webpage.

The export (https://github.com/welford/twstaticblog/tree/master/export) plugin gets invoked when exporting and contains all the required templates and viewtemplate changes to make the static site look how you want it to.

www.phasersonkill.com is a working sample of an exported blog, I have also uploaded a simpler example here http://welford.github.io/static-sample/example.html which exports to http://welford.github.io/static-sample/blog/index.html

Finally I have updated some of my plugins to work with the static export feature https://github.com/welford/twspimg lets me display partial images as the background-image of a span element, and https://github.com/welford/twyt lets me embed yt videos and created links to specific times within the video. http://welford.github.io/ has a few examples and  other plugins also!

Thanks for reading!

James

[David Gifford]

Okay, so

1) I found the phasersonkill instructions (a dead link, but I went to the general site and found the instructions there.
2) Figured out how to download the tiddlers from Github and get them into a standalone  TW5, and played with it
3) Realized I needed to do this in node.js because it doesn't work from a standalone TW5 file
4) Downloaded node.js and got a TW running
5) Imported the tiddlers from the standalone to the node.js version

After all that, I am still stuck because I have no idea how to export the tiddlers to statics. There is one cryptic reference to "run the export batch file" in the instructions, but how do I do that?

Dave

On Thursday, April 23, 2015 at 4:23:22 PM UTC-5, James Anderson wrote:

I've posted on here and on the tiddlywikidev side a few times with questions regarding this before, This time is more of a show and tell as i've had some time to clean up some of the code I was using to export static sites with tiddlywiki.

I have renamed the repo I was using and split it in two separate plugins: https://github.com/welford/twstaticblog/  I have also written a new post about how I am exporting using these plugins here: http://phasersonkill.com/2015/4/24/creating-a-static-webpage-using-tiddlywiki.html 

[James Anderson]

The link died because i found a bug in my export code which caused the creation date of the article to change depending on the exporting computers timezone:

http://phasersonkill.com/2015/04/23/creating-a-static-webpage-using-tiddlywiki.html

My export batch file looks like this:

=========================================

REM @echo off

echo Exporting Blog...

echo exporting general posts======================

call tiddlywiki .\tw --load .\notes.hta --output .\blog --build posts

echo exporting framework posts====================

call tiddlywiki .\tw --load .\notes.hta --output .\blog --build framework

echo exporting framework TAG posts================

call tiddlywiki .\tw --load .\notes.hta --output .\blog --build tag

echo exporting index posts========================

call tiddlywiki .\tw --load .\notes.hta --output .\blog --build index

echo exporting CSS================================

call tiddlywiki .\tw --load .\notes.hta --output .\blog --build css

pause 

=========================================

I hope this helps. I will be updating my local TW to the latest version soon and seeing how well my export plugins have held up. so i should be around if you have any more questions.

Regards,

James

[David Gifford]

Hi James

Thanks for responding. My actual question is, what do I do to export the tiddlers? I am a novice at all this. What button do I push?

Dave

On Thursday, April 23, 2015 at 4:23:22 PM UTC-5, James Anderson wrote:

I've posted on here and on the tiddlywikidev side a few times with questions regarding this before, This time is more of a show and tell as i've had some time to clean up some of the code I was using to export static sites with tiddlywiki.

I have renamed the repo I was using and split it in two separate plugins: https://github.com/welford/twstaticblog/  I have also written a new post about how I am exporting using these plugins here: http://phasersonkill.com/2015/4/24/creating-a-static-webpage-using-tiddlywiki.html 

[James Anderson]

Briefly:

> 3) Realized I needed to do this in node.js because it doesn't work from a standalone TW5 file

It works from a standalone file, or rather I have my blog and other notes in a single page TW. it's called notes.hta (you can see this in the batch file, it could be notes.html or whatever your TW is called). You will need the nodejs TW just for the conversion. With both those present the batch handles all the creation for you. 

My workflow is :

1. Write a tiddler and tag it "blog"

2. Run the batch file.

and that's it, so it's pretty simple when it is set up but the set up is not friendly for newcomers.

Will be around tomorrow or maybe  the day after if you need more help.

James

[David Gifford]

How does on "run a batch file"?

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/vTqF5EEHJE0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.

Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e5f720da-f707-448b-b820-b49c6612efbb%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

David Gifford
Christian Reformed World Missions, Mexico City

[David Gifford]

ahhhhh never mind, I figured it out...put my file in the folder I downloaded, change example.html to my filename in the .bat file, and doubleclick the .bat file to run it.

Sorry for my ignorance, a lot of this is new to me...

Thank you very much, both for your help and for this great tool!

Dave

[David Gifford]

Ok, James, here is an experimental site based on your website generator

http://giffmex.org/moomoo/

One last question: why does the CSS only apply to the framework and not to the individual posts? What might I have done wrong?

Dave

[James Anderson]

Will try to take a look at this tomorrow, probably an issue with your templates

2016/07/04 22:16 "David Gifford" <dgif...@crcna.org>:

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CANE%3DBFLbnq-%2Bjudx4CE6vQ8ESrouaq74Oe5SM8tfW7FVk2t6WQ%40mail.gmail.com.

[Suzanne McHale]

Agreed - using Node.js to generate static files via the command line is NOT beginner-friendly; I found it difficult to understand at first, and was only able to do it after a few weeks of frustration (see earlier posts).

On Wednesday, July 6, 2016 at 7:53:26 AM UTC+10, Josiah wrote:

all

this whole thing is vital

this whole thing is a BLACK ART.

its about as transparent as a FOG in a MIST.

Josiah

[James Anderson]

yeah, it's not beginner friendly. I'll update my post to mention NodeJS and the contents of the batch file. I think my plugin at least helps simplify some of the conversion, though you do still need a working knowledge of TW and batch files.

David, would you mind sharing your source TW file?

James

[sini-Kit]

Hi! here is my blog made on static tw5 http://heeg.ru/  tw5 page is here http://heeg.ru/heeg.html

to generate static pages I made .bat file

 

tiddlywiki --verbose  --load heeg.html --rendertiddlers [!is[system]![index]] $:/core/templates/static.tiddler.html ./static text/plain  --rendertiddler $:/_sitemap static/sitemap.xml text/vnd.tiddlywiki  --rendertiddler $:/theeg.template.css  static/static.css text/vnd.tiddlywiki --rendertiddler $:/_aa.giff/StyleSheetAnimate  static/animate.css text/vnd.tiddlywiki --rendertiddler $:/boot/Yandex_Metrika_Counter.js    static/Yandex_Metrika_Counter.js text/plain --rendertiddler $:/boot/bootprefix1.js   static/heeg.js text/plain  --setfield [[$:/HistoryList]] current-tiddler $:/_index text/vnd.tiddlywiki --output ./temp --rendertiddlers [[index]] $:/core/templates/static.tiddler.html ./static text/plain .html "noclean"  && ^
xcopy images output\static\images /s /e /C /Y /d /i && ^
xcopy fonts output\static\fonts /s /e /C /Y /d /i && ^
copy heeg.html output\static\ && ^
copy .\temp\static\index.html output\static\ && ^
copy .htaccess output\static\ && ^
copy favicon.ico output\static\

so I generate all site with pictures, sitemap, js and css files.

[David Gifford]

Hi James

Thank you for your offer to help me with this.

My file is http://giffmex.org/experiments/websitetest.html

Dave

[David Gifford]

sini-Kit, that is a work of art. Congratulations!

Dave

[David Gifford]

Haha, in reading your .bat file contents, it looks like you used a prefix I have on some of my old system TWs ($:/_aa.giff/) and applied it to your StyleSheetAnimate tiddler. Wasn't expecting to see "giff" anywhere in there!

Dave Gifford

On Wednesday, July 6, 2016 at 5:47:07 AM UTC-5, sini-Kit wrote:

[Mat]

May I ask, what is actually the point with a "static site" instead of a regular TW with just a few disabled features (like "editing")?

<:-)

[Jeremy Ruston]

Hi Mat

May I ask, what is actually the point with a "static site" instead of a regular TW with just a few disabled features (like "editing”)?

That’s a good question, and there’s several good answers:

* A static site is usually much, much, much quicker to load

* A static site is trivial to crawl for a search engine

* A static site works on every browser, even ones that don’t support JavaScript

There’s a couple more subtle advantages, too:

* A static site is much easier to integrate with third party libraries/widgets

* Pages from a static site are properly linkable, without using the URL #hash

Best wishes

Jeremy.

<:-)

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/43de52a9-89e9-44e8-ab3c-ae05b75c0157%40googlegroups.com.

[David Gifford]

Yes, for me the loading time is important, at least for my Spanish materials. The others are a bonus.

Dave

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/vTqF5EEHJE0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/86A9469F-4E60-4D47-BCE3-C867282C9555%40gmail.com.

For more options, visit https://groups.google.com/d/optout.

[sini-Kit]

Yes. The base of my site is your http://giffmex.org/experiments/obadiah.html#Table%20of%20contents  and all my sites have your prefix http://old.novye-podarki.ru/heeg.html :)

среда, 6 июля 2016 г., 15:20:03 UTC+3 пользователь David Gifford написал:

[Mat]

Jeremy, thanks for clarification.

Follow up question, to everyone, I guess;

In what way is the "export as HTML" feature not enough for people? Or, I should put it like this; In the github discussion, on the matter of JavaScript for static sites, Jeremy writes he'd favour "following the principles of progressive enhancement".

Would it not make sense to apply "progressive enhancement" overall by starting with the existing "export as HTML" feature and adding the smallest number of features needed to make it fully usable for SSG? Or are there fundamental limitations with this - and this is perhaps why James' phasersonkill variant requires nodejs-TW (or why is that)?

<:-)

[David Gifford]

Hi Mat,

You asked, "In what way is the "export as HTML" feature not enough for people?"

1) With "export as HTML" I have to export each tiddler individually. With James' way I can do all kinds of work on numerous tiddlers throughout the day and do one operation to update the site at the end of the day.

2) James' way also exports an updated tags page, an updated A-Z page, and an updated 'Recent' page. Exporting as HTML is just the tiddler, nothing more.

I can't answer the other questions you have, so I will defer to those who can.

Dave

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/vTqF5EEHJE0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5ec53b53-977c-4e5b-a978-ce19c53a8a66%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Jeremy Ruston]

Hi Mat

In what way is the "export as HTML" feature not enough for people?

The browser-based “Export as HTML” feature *is* static site generation. The reason that people generally do it under Node.js is that that makes it easier to produce multiple HTML files (eg one per blog post).

Or, I should put it like this; In the github discussion, on the matter of JavaScript for static sites, Jeremy writes he'd favour "following the principles of progressive enhancement”.

“Progressive enhancement” is about what goes into the static HTML files, not how they are produced.

Best wishes

Jeremy.

Would it not make sense to apply "progressive enhancement" overall by starting with the existing "export as HTML" feature and adding the smallest number of features needed to make it fully usable for SSG? Or are there fundamental limitations with this - and this is perhaps why James' phasersonkill variant requires nodejs-TW (or why is that)?

<:-)

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5ec53b53-977c-4e5b-a978-ce19c53a8a66%40googlegroups.com.

[Mat]

David, 

note that you can actually export multiple tiddlers including a filtered set of  tiddlers via the Advanced Search -> Filter. Once you enter something into the search field, there's a (barely visible) export button to export the result. (IMO this feature is not located in a good place and it needs better control, e.g export river: I've also posted on related matters on github.)

2) James' way also exports an updated tags page, an updated A-Z page, and an updated 'Recent' page. Exporting as HTML is just the tiddler, nothing more.

Yes, that makes sense for a page. If there's a ToC, is this also updated/exported?

<:-)

[James Anderson]

http://phasersonkill.com/tags.html

http://phasersonkill.com/a-z.html

http://phasersonkill.com/archived-articles.html

http://phasersonkill.com/updated-articles.html

My plugin/exporter generates* these. 

*generates is the wrong word, by these tiddlers exist in my plugin and my exporter picks them up and puts them in the correct place.

[David Gifford]

Hi James

I figured it out!

To get things to link back and forth correctly online, I was putting all of the files into one folder. It didn't work right otherwise.

But this meant that I needed to change /../../../static.css to static.css in one of the helper tiddlers.

Here is a link to my practice area. I also managed to figure out how to do a one tiddler index.html, and change some of the CSS for the banner.

http://recursos.giffmex.org/balas/ This is just a practice area, and everything is in very rough shape still.

Thanks again for this wonderful tool! Took a while to get the hang of it, but it is coming together.

Dave

On Wednesday, July 6, 2016 at 1:43:16 AM UTC-5, James Anderson wrote:

[Pak Ruengrot]

Hi James,

Thanks for your blog generation tool. I downloaded it from your github and it worked quite well, although with some bugs (I think)

1.  In this commit where you did a lot of renaming. Among them is the change from staticbanner to blog-banner. But in helper/template.tag.html.tid you are still using staticbanner, compared to other templates .tid files where you use blog-banner. This causes a banner in an individual tag page to disappear, as no such tiddler exists in the plugin folder.
   
2. In export/getexportlink.js, a path to an individual post , is set to yyyy/mm/dd/post.html. However, if in post I link to a local file via [ext[file|file.pdf]], then when rendered this link is changed to yyyy/mm/dd/file.pdf. This link doesn't work (when viwed as a single page) as file.pdf is in the root of the blog folder. This behaviour doesn't happen to [img[pic.jpg]] though even though pic.jpg is in the root of the blog folder

Do you know how to fix the above issues?  

Thanks,

Pak

[James Anderson]

1. Fixed : https://github.com/welford/twstaticblog/commit/c2ac0ff9458a6b1964551d37b5450b122f3be585

I didn't notice as a copy of $:/plugins/welford/twstaticblog/helper/staticbanner was still in my TW

2. probably requires a change to getexportlink.js i'm about 1 year out of touch with this code, maybe Jeremy or someone could give me a hint?

Thanks,

James 

[James Anderson]

probably before the condition after line 68 of getexportlink.js we could detect if it was a type you were likely to place at the root (e.g. a pdf file) and then not construct the path as below: 

finalLink = path_to_root + "data/";

James

[Pak Ruengrot]

Hi James,

Thanks for the fix. I actually fixed 1. as you said myself before I posted the above as it was an easy fix. 

For 2 I was thinking similarly to what you suggested above but I didn't know a code to detect if a link is to .pdf file (or another local). In fact I know very little about javascript.

Pak

[David Gifford]

Here is a link to the final version of the Spanish website I am putting together with James Anderson's static site generator.

http://ideas.giffmex.org

It uses four different TW5 standalone files to generate statics for the four different sections of the website. But the banner links coordinate between each other so it feels like one site.

Dave



On Thursday, April 23, 2015 at 4:23:22 PM UTC-5, James Anderson wrote:

I've posted on here and on the tiddlywikidev side a few times with questions regarding this before, This time is more of a show and tell as i've had some time to clean up some of the code I was using to export static sites with tiddlywiki.

I have renamed the repo I was using and split it in two separate plugins: https://github.com/welford/twstaticblog/  I have also written a new post about how I am exporting using these plugins here: http://phasersonkill.com/2015/04/23/creating-a-static-webpage-using-tiddlywiki.html 

[David Gifford]

Hi James and anyone else listening in,

Here is a new question. Hopefully the last - I made good progress today.

Here is the question:

$:/plugins/welford/staticlinks/helper/vt.tagpage

creates pages for each tag, and each page displays the posts tagged with the current tag. It displays them as a timeline, with the most recent posts at the top.

I would like to alter it so that it displays an alphabetical list of the tiddlers so tagged. But try though I might, I can't figure it out.

Here is a link to the tiddler on github: https://github.com/welford/twstaticblog/blob/master/helper/vt.tagpage.tid

Thanks in advance,

Dave