Tiddlywiki using Travis-CI
on GitHub Pages

publish website from individual tiddlers

Tiddlywiki, Travis-CI and GitHub Pages

Mohammad 20th August 2019 at 3:29pm
start

Powerd byTiddlywiki5 + GitHub-Pages + Travis-CI

Tiddlywiki5.1.15+
LicenseMIT
Release1.0.0
Statusstable

This wiki shows how to set up websites hosted on GitHub Pages using Travis-CI and Tiddlywiki 5 on Node.js.

Tiddlywiki under Node.js stores each tiddler in a separate file. A wiki can be hosted on GitHub and Travis-CI can generate index.html automatically from GitHub repository and save to GitHub Pages.

This procedure can be used to create websites for projects, users, and organizations.

Demo page
https://kookma.github.io/Tiddlywiki-Travis-CI/
Code page
https://github.com/kookma/Tiddlywiki-Travis-CI

Important Note: This wiki uses automatic making websites from individual tiddlers using Travis-CI on GitHub Pages, for Tiddlywiki single file application, see Tiddlywiki-and-GitHub-Pages

Further readings

More Information can be found at

  1. Daniel Rodrรญguez: TW5-auto-publish2gh-pages
  2. Talha Manssor: TW-Scripts demo
  3. User, organization, and project pages
  4. GitHub pages
  5. Setting up a TiddlyWiki website on GitHub Pages

How Setup GitHub and Travis-CI

Mohammad 4th April 2019 at 7:48pm
start

This demonstration shows how to setup Travis-CI with GitHub. It is based on

  1. Daniel Rodrรญguez: TW5-auto-publish2gh-pages
  2. Talha Manssor: TW-Scripts demo

Application

It is possible to integrate GitHub and Travis-CI to create GitHub pages from Tiddlywiki.

Requirement

The list of pre-requisites is quite small, and you only need to fit them once

Steps to setup GitHub and Travis-CI

This instruction assumes you have working GitHub and Travis accounts. If not see [1, 2].

  1. Create a new repository in GitHub
  2. Create a personal access token in GitHub with enabling the access for repo, and gist
    • Give a name for created token like GITHUB_TOKEN or whatever you like
  3. Save the token name and value from step two above somewhere as you can use it in the below steps
  4. Go to https://travis-ci.com/ and sign-in
  5. Select the repository you want to use with Travis CI
    • Adding repository is very simple and can be done both from GitHub and Travis-CI
    • Travis-CI recommends to add all repositories, this way all future created repositories will be added
  6. On the Travis setting for selected repository (https://travis-ci.org/<your-github-username>/<your-selected-repo>/settings) create an environmental variable with
    • name=GITHUB_TOKEN or what you have choosen in step 2 above and
    • value=the token generated in step 2 above (these values are like 553dca4a315eb43dd259948db7b9ae18be2d2bd5)
    • Make sure to mark "Display value in build log" as "Off".
  7. In order for Travis-CI to build your project, you'll need to add a .travis.yml configuration file to the root directory of your repository. (see Travis Configuration File)
  8. After completing these steps, Travis-CI will use the provided YAML configuration file and generates index.html from indivisual tiddlers in the tiddlers folder in the root directory of your repository.
  9. You can see what is going on in Travis-CI by visiting the repository Build History and Current tabs.
  10. This will create an index.html in your GitHub repository page under new branch gh-pages.
  11. To give public access to the created index.html you need to setup GitHub Pages for Tiddlywiki Repository from setting page of your repository. To do this
    • Head over GitHUb and open the selected repository and then go to the setting page
    • In Options tab, find GitHub Pages and for Source use gh-pages branch
    • Wait for a minute or so and GitHub will do the job in the background
    • Point to the new webpage GitHub generates under GitHub Pages!

Every changes in the repository, committed from changes in Tiddlywiki tiddlers will trigger Travis-CI to generate a new index.html file and stores it on the GitHub pages under gh-pages branch.

References

[1] Signing up for a new GitHub account
[2] To get started with Travis CI
[3] Creating a personal access token for the command line

Travis Configuration File

Mohammad 4th April 2019 at 6:56pm
start
  1. In order for Travis CI to build your project, you'll need to add a .travis.yml configuration file to the root directory of your repository.
  2. If a .travis.yml is not in your repository, or is not valid YAML, Travis CI will ignore it.

To setup GitHub and Travis-CI to generate GitHub pages from individual tillders use the below configuration file.

  • Create a text file
  • Name it as .travis.yml
  • Put the below code as its content
  • Save and add to the GitHub repository root directory

language: node_js
node_js:
  - "11"
dist: trusty
sudo: false

branches:
  only:
  - master

install:
  - git clone โ€“depth 1 https://github.com/Jermolene/TiddlyWiki5.git
  - cd TiddlyWiki5
  - npm link
  - cd ..

script:
  - tiddlywiki โ€“verbose โ€“build index

deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable
  local_dir: output
  on:
    branch: master

Note: The above configuration file uses the latest Tiddlywiki 5 prerelease for building the wiki.

Quick Tutorial

Mohammad 4th April 2019 at 7:47pm
start
  1. Create a new repository on GitHub from a Tiddlywiki on Node.js
  2. Add the .travis.yml configuration file to repository
  3. Create a personal access token on GitHub with required premissions
  4. Add your repository to Travis-CI
  5. Add an environmental variable to to Travis-CI repository with the token value from step two
  6. Back to GitHub, enable GitHub Pages for the repository and choose gh-pages branch as source

Authors

4th April 2019 at 7:53pm
start