Introduction
久しぶりに投稿させていただきます．
先日，githubをあれこれ調査していたら， 指定したブランチにgithub pagesを公開できるにという記事を発見致しました．
驚きました，ヤックデカルチャー
です．
もう gh-pagesブランチを作らなくて良いのね...
しかも__レポジトリ毎__に作れる！!!
Purpose
さて，本題です．
github にはwiki機能もありますが，github pagesを使えるのであれば，
そちらを使ってDocumentを作成する方も多いでしょう．
そこで，SinglePageApplicationを利用して簡単にイケてるgithub pagesを作る方法を提案したいと思います．
利用するのは，，，
Riot.jsちゃんです！
2016年から2017年にかけて一時期盛り上がってましたね，私はVue.jsに魅了されていましたが．
しかし，このRiot.js，Component機能を持ちつつ軽量と，かなり使い勝手が良いです．
簡単なページ作るならこれ程要件を満たす技術はなかなかないのではないでしょうか？
ここでは，Riot.jsを使ってSPA型Webページを作成する方向けにレイアウト骨子を提案したいと思います．
Riot.jsのバージョンは現在の最新版である 3.9.0 を利用します．
Methods
以下の形にディレクトリを構築します．
docs/
├ public /* JS, CSS, Imageなど */
├ components /* Riot.jsのComponent(**.tagファイル) */
└ index.html
index.htmlはこのようにしましょう．
また，今回は全てのライブラリを外部読み込みすることとします．
ローカルでやりたい方はnpmなどを入れて各自行ってください．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<!-- My style -->
<link rel="stylesheet" href="public/css/style.css"/>
</head>
<body>
<!-- Main -->
<r-app />
<!-- riot tags -->
<script type="riot/tag" src="components/app.tag"></script>
<!-- ここにどんどんタグを追加する -->
<script type="riot/tag" src="components/Home.tag"></script>
<script type="riot/tag" src="components/HowToUse.tag"></script>
<script type="riot/tag" src="components/SetUp.tag"></script>
<script type="riot/tag" src="components/NotFound.tag"></script>
<script type="riot/tag" src="components/***.tag"></script>
<!-- scripts we need -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.9.0/riot+compiler.js"
integrity="sha256-4zekzcv0RXNMJ8CmHna5ya2kDpFOH1wRH2ZTAnyllnI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/riot-route@3.1.3/dist/route+tag.min.js"></script>
<!-- my scripts -->
<script src="public/js/script.js"></script>
<!-- Initialize -->
<script>
'use strict';
riot.compile(function () {
riot.mount('*'); /* componentの有効化 */
route.start(true); /* ルーティング有効化 */
})
</script>
</body>
</html>
app.tagはこちら
ポイントは riot-route の<router>を利用すること．
<route>のpath要素を "*" にすると何も見付からなかった時に子要素をrenderします．
※ 注意
必ず，
riot.js は riot+compiler.js ，
riot-route は route+tag.js を読み込んでください．
通常のものを読み込むと動作しない場合があります．
<r-app>
<aside>
<ul>
<li><a each={ links } href="#{ url }">{ name }</a></li>
</ul>
</aside>
<main>
<router>
<route path="/"><r-app-home /></route>
<route path="/how_to_use"><r-app-how-to-use /></route>
<route path="/set_up"><r-app-set-up /></route>
<route path="*"><r-app-not-found /></route>
</router>
</main>
<script>
'use strict';
this.links = [
{ name: "Home", url: "" },
{ name: "How To Use", url: "how_to_use" },
{ name: "Set Up", url: "set_up" },
];
</script>
<style scoped>
/* scoped を付けると Component内でのみ有効となる */
</style>
</r-app>
残りの***.tagファイルについては，app.tag を参考にタグ名を決めて処理を記述するだけです．
index.htmlでriot.mount(*)しているので全てのComponentが読み込まれるはずです．
Conclusion
ドキュメントを書くことが苦手な方もこれを機にドキュメント作成に慣れていけると良いですね！
私も頑張りたいと思います．