16
10

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 3 years have passed since last update.

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

Last updated at Posted at 2018-07-12

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 を公開することができると思います。

16
10
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
16
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?