mkdocsでブログを作ってみる

仕事でmkdocsを触ってて、ブログのテンプレートとしてもかなり優秀なんじゃないかと感じたので早速自分のブログを作り直してみた。1年に2回くらい作り直してんなこいつ。

ザックリとした構成

Theme: mkdocs-material
Features:
- navigation.expand
- navigation.top
- search.highlight
Plugins:
- search
- markdownextradata
Markdown Extentions:
- toc
- meta
- mdx_include
- mdx_math
- admonition
- codehilite
- def_list
- extra
- footnotes
- fontawesome_markdown
- pymdownx.critic
- pymdownx.caret
- pymdownx.keys
- pymdownx.mark
- pymdownx.tilde
- pymdownx.smartsymbols
- pymdownx.superfences
- pymdownx.tabbed
- pymdownx.tasklist

mkdocs-material

mkdocsが便利というよりmkdocs-materialが超便利なんですよね。とても沢山機能がある。

Material for MkDocs - Material for MkDocs

検索機能がついてる(static siteで動くし結構早い)
CSS, JS, HTMLをoverrideできる
- 色とかフォントを弄ったり
- head.meta をゴリゴリに調整したり
- 追加のWebFontを読み込むようにしたり(FontAwsomeとか)

自分がカスタムしたのは以下。

`meta`タグをちゃんとつけた

ちゃんとつけないとTwitterとかにリンク貼ったときの見た目が悪いので…

og:imageは適当。記事ファイル内でimageを設定してないときはマジ卍な自画像が出るようになっている。

見出しとかフォントの調整

デザインは自分の好み、フォントはAppleユーザ以外をバッサリ切り捨てている。

:root {
  --md-text-font-family: "Helvetica Neue", "Hiragino Sans";
  --md-code-font-family: "Menlo";
}

.md-typeset h1 {
  font-weight: 600;
}

.md-typeset h2 {
  font-weight: 500;
  padding: 0.2em 0em;
  border-bottom: solid 3px rgba(0, 82, 153, 0.728);
}

.md-typeset h3 {
  font-weight: 500;
  position: relative;
  padding-left: 1.3em;
  line-height: 1.4;
}

.md-typeset h3:before {
  font-family: "FontAwesome";
  content: "\f00c";
  font-weight: 900;
  position: absolute;
  font-size: 1em;
  left: 0;
  top: 0;
  color: rgba(0, 61, 153, 0.776);
  font-weight: 900;
}

FontAwesomeを読み込むためにmkdocs.yml内でcssを追加で読むようにしている。

extra_css:
- "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"

テーブルをソートできるようにする

公式ドキュメントでも解説されてたカスタム。便利なときもあるかもしれないし、邪魔になるわけでもないので入れてみた。

Data tables - Material for MkDocs

value	mod 3	mod 4
010	1	2
029	2	1
111	0	3

みたいな感じ。

まとめ

簡単でデザインもスッキリしててカスタムもかなり柔軟性が高くて検索ができる、便利。

なんとなくホスト先を AWS Amplify にしてみたけど、Vercelと違って有料なので、ちょっとだけ心配している。爆発しねえよな…?

mkdocsでブログを作ってみる

mkdocsでブログを作ってみる

ザックリとした構成

mkdocs-material

metaタグをちゃんとつけた

見出しとかフォントの調整

テーブルをソートできるようにする

まとめ

`meta`タグをちゃんとつけた