GitLab Group 内に一般公開用の Wiki  ページを作る


コミュニティを運営しているのだが、コミュニティの集合知をキャッチアップする必要があるために、以下の要件が必要。


- 持続可能なページを作る
- 数十年の維持が期待できる
- 維持費用をかけない
- 管理者が死んでも消えない
- サービスがそうそう消えない
- サービス停止時にAlternativeの用意が簡単
- 複数人で管理できる
- CUI
- Markdown
- UTF-8
- インターネットに公開
- SEO

更に、上記を満たすものの中に、wiki ページを作りたい。
具体的には、読書会をやっているのだがひとつひとつの用語を勉強する議論をしたい。


今回は、GitLab とし、その中に Group としてコミュニティ名を追加し、
コミュニティの外部へ出したいプロジェクトを分け、アクティビティとしてプロジェクトを設定することにした


# 目標

1. コミュニティ名「akbrobot」として、 https://akbrobot.gitlab.io を公開し、プロジェクトへのリンクを貼る
2. プロジェクト「test」として、https://akbrobot.gitlab.io/test を公開し、wiki へのリンクを貼る
3. プロジェクト「test」の wiki を作成して、インターネットに公開する
4. プロジェクト「test」の wiki 内で、図や数式を編集可能な状態で収容する

# GitHub と  GitLab の Pages の比較

GitHub も GitLab も公開用サイトのソースを markdown などで作成し、変換して一般の静的Webサイトとして公開することができる。

## GitHub の場合

- https(s)://username.github.io
- または
- https(s)://organizationname.github.io

プロジェクト名自体を usename.github.io または organizationname.github.io とすると、上記で表示することができるようになる。
更に、 個別プロジェクトを以下のようにして公開できる。

- https(s)://username.github.io/projectname
- https(s)://organizationname.github.io/projectname

プロジェクト中のレポジトリのルートが GitHub Pages のルートとなる。

## GitLab の場合

- https(s)://username.gitlab.io
- または
- https(s)://groupname.gitlab.io

プロジェクト名自体を usename.gitlab.io または groupname.gitlab.io とすると、上記で表示することができるようになる。
更に、 個別プロジェクトを以下のようにして公開できる。

- https(s)://username.gitlab.io/projectname
- https(s)://groupname.gitlab.io/projectname
- http(s)://groupname.gitlab.io/subgroup/projectname

プロジェクト中のレポジトリの /public が GitHub Pages のルートとなるのが GitHub との違い。

/public に html をそのまま設置しても良いし、設定した静的サイトジェネレータで /public にビルドするようにしても良い。



# GitLab で設定を行う

## やること(やったこと)

- akbrobot ユーザを作る
- グループを作る
- グループ名を調整する
- プロジェクトを作成する
- GitLab Pagesを作成する
- GitLab Pagesを公開する
- wiki を作る
- wiki を公開する
- wiki で編集可能な数式や図を記述する


## akbrobot ユーザを作る

よくわからずにつくりはじめたので、まずターゲットとするサイト名「akbrobot」を持つユーザを作った。しかしながら「akbrobot」をユーザ名にする必要はなく、「akbrobot」をグループ名とするので良かった。後で変更を行う。

ユーザー設定のLocalizationで日本語を設定しておく。
なお、この記事内のキャプチャーは日本語設定していないときに取得したものがあるので表示が異なるかもしれない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/88bda292-714d-fed5-502c-0ff57e3bc641.png)




## ユーザ名を修正

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0fb3691d-9767-2b50-6f4b-ba5e1f2d4e20.png)


## グループ名を修正

グループ名をユーザ名にかぶっていたので、akbrobot1 と設定してしまったのを akbrobot に修正。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f73432c2-8085-0c02-90c2-afb92137487b.png)



## グループ内に Pages 用プロジェクトを作成

「New project」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/a291d0b8-7634-f55f-fea5-60582de57a9d.png)

「Create from template」から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ed623fb7-157b-a84e-4a37-62e4229a5c58.png)

「Pages/Plain HTML」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/a1eb552b-673d-4bc1-0dc2-a32261a38e36.png)

プロジェクト名を「test」とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0c0e1eb0-434c-e7c7-b239-08c10868cb0c.png)

しばらくしたら test プロジェクトが作成されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/124cd9be-7bd9-41e0-89b5-9a732d3d1e1c.png)

## test プロジェクトを pages に公開

「pipelines」 を選び、「Run pipeline」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/5b854a14-9b5e-998c-0cdc-35459b608c1c.png)

最初だけクレジットカードの入力を求められます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0f2d4da4-3aaf-0712-d0aa-6e80718ca814.png)

pipeline が終了したところ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/13df857d-7694-7019-90fa-48b0f7793bc3.png)

https://akbrobot.gitlab.io/test/ にアクセスすると Pages が表示されます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ba9e3d0b-a363-7f71-bec0-f68170a81da3.png)

## test プロジェクト Wiki を作成する


wiki は GitLab Pages に設置するのではなく、普通にレポジトリ内に設置する。 GitLab Pages で表示するやり方もあるようだが、今回はそれは行わず、 GitLab Pages から wiki へのリンクを貼るだけとした。

https://stackoverflow.com/questions/54429303/gitlab-pages-can-a-static-site-be-generated-from-a-project-wiki


test プロジェクト内の wiki を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/6397e9d5-017e-c93e-b877-b41894e4c81b.png)

title を home とし、適当に中身を書いて Create page します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/d7083380-b83d-82f7-2958-2fe46ce647e3.png)
同様に、いくつかページを作っておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/d12c0ae3-bcdd-c452-b111-c97c7b1bb7cf.png)

`[...](~~~)` と書き込むと、~~~ ページへのリンクが ... として作られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/4ec5aafc-9d49-85b5-e2cb-932dd78f5445.png)

wiki のページリストは右側に出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/aa1136a6-aec9-c6eb-a3c4-5bd234ff312e.png)

## GitLab pages から wiki ページへのリンクを貼る

test Repository の public/index.html を更新します。今回は Web IDE を使ってみました。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/5d6acdf9-59f7-826f-67c1-7d0c6826da72.png)

リンクを書き換えて

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ca2ab682-8896-d070-1781-744175f44ba8.png)

commit します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/e5257561-0fc2-e35d-eddf-d87d0744684a.png)

## Group の Pages から Project の Pages へのリンクを貼る

group ページから New Project を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/7ea01fd8-ff7a-717b-ba5b-c8c977554012.png)

先ほどと同じように template を選び、Pages/Plain HTML で
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/76c1f1c1-5621-0ab9-acda-2258a11dd9ad.png)


<グループ名>.github.io という名前で作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/6deed172-26b9-d847-8073-9c9ac3c47d2b.png)

Run pipeline を押して、20秒ほど待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/73d3ef4f-0b3a-0856-aef3-1b80143f5618.png)

https://<グループ名>.github.io という名前でアクセスができることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/21e7cbbd-28b4-b58f-1500-206b0647e548.png)

レポジトリの /public/index.html を書き換えて project へのリンクを作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/5b23e7eb-e3b9-942f-ed7d-c463fc0d1404.png)

## GitHub Pages, wiki を公開する



今まで作ったものは部外者が閲覧しようとするとサインインを求められます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/1051e176-4134-c64a-63f1-6204d2134978.png)

まずは 「Settings」-「General」-「Visivility,project features,permissions」の中の Pages を 「Evenryone」へ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/4230b4f3-df48-62c1-6508-6bb72bcbb1a4.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/32660363-21cb-c548-1cef-fa22b431447b.png)

プロジェクトのパーミッションが Private になっているのですが現時点では変更できません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/8076ac7e-f8b0-c4e6-06a8-110372d7cdac.png)

先に、Group の Visibility level を Public にしておく必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/2fb491fb-9ad6-ed1f-8c3a-c30ca63ce7a3.png)

Group が Public になっていると、 プロジェクトも Public に変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ef7e9495-62bb-661c-cce3-47447ef52286.png)


# wiki で図や数式を書く
画像はコピー貼り付けでアップロードできるので便利ですが、再編集ができません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/e555b1ed-d827-a6cf-8b2c-99c45e7b61c9.png)

以下のように書くと、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/04121506-d465-ebb1-e741-4fac394b7d24.png)

数式や図が入ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/97e6c309-36d9-02e7-19a4-a351022323b1.png)

数式は `$~$` でインライン、`$$~$$` でブロック配置で書くことができます。`\(~\)` でも数式がかけるようですが、うまくいくときとうまくいかないときがありました。

また、図については編集時、このマークを押すと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/e9091a40-040b-6a92-dbe7-8929f08b2799.png)

diagrams.net が起動し、編集することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/d4106c6c-c1f1-faec-5b80-0849992428cb.png)

diagrams.net でテキスト・数式入りの複雑な図も書くことができますが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/df7385b4-cccf-a2e9-bca9-750fe267d482.png)

GitLab wiki に戻ると日本語が文字化けしてしまうので、テキストや数式は GitLab 上の markdown で書くのが良さそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/7fbf33c0-3e70-706a-4ba7-1900c7ff9c9c.png)