概要
ここ最近の業務で、GitHubをほとんど触ったことがない人に対して、Git-flowを体験してもらうためのワークショップを開催しました。
そのワークショップでは、以下のような体験ができるようにしました。
- ブランチ作成 → コミット（プッシュ） → Pull Request → レビュー → マージ の一連の流れを実践できる
- GitHub Pagesで公開されているため、マージされた内容がすぐにウェブページで確認できる
- Markdownに馴染みがない人は、Markdownの練習になる
また、運営側として必要以上の時間がかからないよう、コンフリクトが極力発生しないような構成にしました。
作成したサイト
- トップページおよびサイドバーに、各ページへのリンクが用意されている
- ユーザー名（hoge、fuga、piyo）に対して、ページが1つ用意されている
- 各ユーザーは、自分のページだけ編集する（Markdown記法 + docsifyの記法で書ける）
ソースコード
作り方
-
docsifyのQuick startに従って、
docs/以下にコンテンツを作成するところまでやりますWindows環境で、「このシステムではスクリプトの実行が無効になっているため…」と表示された場合は、実行ポリシーを付与するよう、ターミナルに以下を入力することで解決できます。
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process -
リポジトリのルートに
package.jsonを配置し、npm installしますpackage.json{ "dependencies": { "docsify-cli": "^4.4.4" } } -
docs/index.htmlを編集し、サイドバーを表示させるようなつくりにしますdocs/index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="description" content="Description"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"> </head> <body> <div id="app"></div> <script> window.$docsify = { name: 'プロフィール', repo: '', loadSidebar: '_sidebar.md', homepage: '/README.md', subMaxLevel: 1 } </script> <!-- Docsify v4 --> <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> <!-- emoji --> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script> </body> </html> -
docs/_sidebar.mdを追加し、Markdown記法でリンクを貼りますdocs/_sidebar.md- [hoge](profile/hoge.md) - [fuga](profile/fuga.md) - [piyo](profile/piyo.md) -
docs/profile/***.mdをユーザーの数だけ作成しますdocs/profile/hoge.md# hoge ### 名前 ### 所属チーム ### 経験のある言語 -
GitHubのリポジトリから、[Settings]-[Pages]で、
/docsに対して公開するよう設定します
GitHub Enterpriseアカウントでない場合、ページはpublicに公開されるので注意が必要です
おわりに
今回紹介したサイトは、誰でも15分ほどで作成できると思います。
実践的なGitHub勉強会を開催しようと思っている方に、何かしらの参考になれば幸いです。
参考