1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-04-30

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

  • 持続可能なページを作る
  • 数十年の維持が期待できる
  • 維持費用をかけない
  • 管理者が死んでも消えない
  • サービスがそうそう消えない
  • サービス停止時に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

ユーザ名を修正

image.png

グループ名を修正

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

image.png

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

「New project」
image.png

「Create from template」から
image.png

「Pages/Plain HTML」を選択
image.png

プロジェクト名を「test」とします。
image.png

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

image.png

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

「pipelines」 を選び、「Run pipeline」
image.png

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

image.png

pipeline が終了したところ

image.png

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

image.png

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

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

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

image.png

title を home とし、適当に中身を書いて Create page します。
image.png
同様に、いくつかページを作っておきます。

image.png

[...](~~~) と書き込むと、~~~ ページへのリンクが ... として作られます。
image.png

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

image.png

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

test Repository の public/index.html を更新します。今回は Web IDE を使ってみました。
image.png

リンクを書き換えて

image.png

commit します。

image.png

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

group ページから New Project を選びます。
image.png

先ほどと同じように template を選び、Pages/Plain HTML で
image.png

<グループ名>.github.io という名前で作成します。
image.png

Run pipeline を押して、20秒ほど待ちます。
image.png

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

image.png

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

image.png

GitHub Pages, wiki を公開する

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

image.png

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

image.png

image.png

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

image.png

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

image.png

Group が Public になっていると、 プロジェクトも Public に変更できます。
image.png

wiki で図や数式を書く

画像はコピー貼り付けでアップロードできるので便利ですが、再編集ができません。

image.png

以下のように書くと、

image.png

数式や図が入ります。

image.png

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

また、図については編集時、このマークを押すと
image.png

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

image.png

diagrams.net でテキスト・数式入りの複雑な図も書くことができますが、
image.png

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

image.png

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?