GitHub
github-pages

ほぼマークダウンのみでそこそこいい感じの Web ページを Github で公開する

GitHub Pages で静的サイトを公開する際、わざわざ html とかを書かずにマークダウンのみでイケるということを最近知りました。

Guthub Pages では Jekyll という静的サイトジェネレータをサポートしていますが、これ用の設定を少し書くだけでそこそこいい感じの Web ページとして公開できます。

やりかた

用意するもの

  • Github のレポジトリ
  • _config.yml: 使いたい Jekyll テーマを書いておく。
  • index.md: 公開するページのトップに表示するページ。

最低限これで大丈夫です。

_config.yml の中身は

theme: <テーマ名>
title: [<ページタイトル>]
description: [<ページ概要>]

こんな感じです。サポートされているテーマは ここ に載っているもののみで、このへん にのってるテーマや自作テーマは使えないようです。

レポジトリの更新

準備したレポジトリに、作成した _config.yml と index.md を push します。

例として

theme: jekyll-theme-hacker
title: [テストページ]
description: [サンプル]

↑こんな感じの _config.yml

# サンプル

markdown でつくるページ

## 見出し

- 箇条書き1
- 箇条書き2
- 箇条書き3

> 引用

```
const hello = () => {
  return "Hello World!"
}
```

↑こんな感じの index.md を master ブランチの /docs 以下に置いておきます。

ページの公開せていですが、Github Pages では以下から公開設定を選べます。

  • master ブランチ
  • master ブランチの /docs ディレクトリ以下

マークダウンのみで公開したかった理由がコードに対するドキュメントを普段使うマークダウンのみでいい感じで表示できれば嬉しいためだったので、master ブランチの /docs ディレクトリ以下を設定します。
(ちなみに master ブランチに /docs ディレクトリがない場合、このオプションは選べないみたいです。)

見た目は

20180712-125309.png

といった感じで、ほぼマークダウンだけで Hacker theme みたいないい感じのページを公開できました。

別のファイルを作って index.md からリンクを貼るやり方も通常のマークダウンと同じなので、マークダウンを使っている人なら特に困ることもなくいい感じの web page を公開することができると思います。