VuePress でのブログ環境を整えたのでその備忘録です。

# はじめに

自分がブログに求めることは次の点です。

  • Markdown でブログ本文が記述出来る
  • GHF (github flavored) や pandoc スタイルのような、汎用的な Markdown の記述でなるべく完結する
  • mathjax/katex がエスケープなしで記述出来る
  • 記事にカテゴリ/タグが使える

今までは上のような要件を満たす hexo と呼ばれる SGG (static site generator) を pandoc とともに利用していましたが、最近ひょんなことから知った VuePress で同じようなことが出来るみたいだったので、勉強がてら乗り換えてみました。

# VuePress

VuePress は Vue, Vue Router, webpack を利用した静的サイトジェネレーターです。

https://v1.vuepress.vuejs.org/

VuePress で生成された静的サイトは SPA になっていて、事前に HTML にコンパイルされた markdown を Vue で描写することで、モダンな感じのサイトを作成することが出来ます。

Nuxt.js でも似たようなことが出来ますが、両者は「汎用的なアプリ作成フレームワーク」か「静的サイト生成に特化したフレームワーク」かという違いがあります。僕もよくわかってないので詳しいことは Google 先生に聞いてみてください。

# Meteorlxy

Home | vuepress-theme-meteorlxy

公式のブログのテーマが物足りなかったので上のテーマを使ってます。

# 機能

# Container

Meteorlxy によって提供される独自拡張の一つで、markdown-it-container を使って注釈のような div ブロックが挿入できる。

::: [tip|warning|danger|details] タイトル(opt)
内容
:::

ちっぷす！

こうなります

また、自作コンテナの定義もできる。 以下は .vuepress/styles/index.styl で定義した pre.vue-container スタイルに基づいて、独自のコンテナを追加する例です。



 
 
 
 
 




    },
    plugins: [
        ['container', {
            type: 'vue',
            before: '<pre class="vue-container"><code>',
            after: '</code></pre>'
        }],
        ['container', {
            type: 'ref',
            defaultTitle: 'Reference',

.
├── docs
│   ├── .vuepress (Optional)
│   │   ├── components (Optional)
│   │   ├── theme (Optional)
│   │   │   └── Layout.vue
│   │   ├── public (Optional)
│   │   ├── styles (Optional)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (Optional, Danger Zone)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (Optional)
│   │   └── enhanceApp.js (Optional)
│   └── README.md
└── package.json

# 生の URL に対するリンク

URL テキストをリンクにするには、既定ではオフになっている markdown-it-linkify の linkify オプションを有効にする。

# 構成例

  markdown: {
    linkify: true
  },

# サンプル

まずは https://v1.vuepress.vuejs.org/ を御覧ください。

まずは https://v1.vuepress.vuejs.org/ を御覧ください。

# 参考

# 相対パスによる画像

Asset Handling | VuePress

既定で相対パスに対応している。なお、生成されたサイトでは asset フォルダー以下にランダムに生成された名前のファイルとして配置される。 また、Webpack のエイリアス機能を使ってより柔軟にベース フォルダを指定できる。詳細はドキュメントを参照のこと。

# サンプル

![みきゃん](./2019-12-28-hello-vuepress/mikyan.png)

みきゃん

# 数式

vuepress-plugin-mathjax でも良かったけど、実装 を見る限り数式の判定がなんだか怪しい[1]ので、markdown-it-katex の拡張で代用しました。

ただ、無印の (@ によるスコープ指定をしない) markdown-it-katex は 更新が止まっていて version 0.5.0 くらいまでしか使えません。なので、@iktakahiro/markdown-it-katex を利用させてもらいました。

# 構成例

$ yarn add @iktakahiro/markdown-it-katex --dev

// .vuepress/config.js
    head: [
        ['link', {
            rel: 'stylesheet',
            href: 'https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.css'
        }]
    ],
    markdown: {
        extendMarkdown: md => {
            md.use(require('@iktakahiro/markdown-it-katex'), {
                throwOnError: false,
                errorColor: "#cc0000",
                macros: {
                    '\\Z': '\\mathbb{Z}',
                    '*': '\\times'
                }
            })
        }
    }

# サンプル

$\sin(x) = 2\pi$ という簡単な方程式でも、小学生には難しいです。

sin⁡(x)=2π\sin(x) = 2\pi という簡単な方程式でも、小学生には難しいです。

機械学習とは、データセット $\mathcal{D} = \{ \mathbf{x}_n \in \mathcal{X}, y_n \in \mathcal{Y} \}_{n=1}^N$ が与えられた時に、入力と出力を対応付ける写像
$$
  f: \mathcal{X} \to \mathcal{Y}
$$
を学習すること。

機械学習とは、データセット D={xn∈X,yn∈Y}n=1N\mathcal{D} = \{ \mathbf{x}_n \in \mathcal{X}, y_n \in \mathcal{Y} \}_{n=1}^N が与えられた時に、入力と出力を対応付ける写像

f:X→Y f: \mathcal{X} \to \mathcal{Y}

を学習すること。

$$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) 
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}$$

∂r∂ωr(yωω)=(yωω){(log⁡y)r+∑i=1r(−1)ir⋯(r−i+1)(log⁡y)r−iωi}\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}

$\Z$ を $\mathbb{Z}$ のエイリアスとして定義しました。また $a*b$ は $a \times b$ となるように乗算記号も手を入れています。

Z\Z を Z\mathbb{Z} のエイリアスとして定義しました。また a×ba*b は a×ba \times b となるように乗算記号も手を入れています。

$\unknown$ なコマンドは使わないこと。

\unknown\unknown なコマンドは使わないこと。

# 参考

# ソースコード ハイライト

既定だと行数が表示されるので、お好みで非表示に。

  markdown: {
      lineNumbers: false,

# Emoji

:tada: :100: :thinking:

🎉 💯 🤔

# 目次

[[toc]]

# 定義リスト

$ yarn add markdown-it-deflist --dev

パターン認識
:   パターン認識（パターンにんしき、英: Pattern recognition）は自然情報処理のひとつ。
画像・音声などの雑多な情報を含むデータの中から、一定の規則や意味を持つ対象を選別して取り出す処理である。
サポートベクターマシン *(support vetor machine; SVM)*
:   サポートベクターマシン（英: support vector machine, SVM）は、教師あり学習を用いるパターン認識モデルの一つである。
    分類や回帰へ適用できる。
    サポートベクターマシンは、現在知られている手法の中でも認識性能が優れた学習モデルの一つである。サポートベクターマシンが優れた認識性能を発揮することができる理由は、未学習データに対して高い識別性能を得るための工夫があるためである。
パターン認識

パターン認識（パターンにんしき、英: Pattern recognition）は自然情報処理のひとつ。 画像・音声などの雑多な情報を含むデータの中から、一定の規則や意味を持つ対象を選別して取り出す処理である。

サポートベクターマシン (support vetor machine; SVM)

サポートベクターマシン（英: support vector machine, SVM）は、教師あり学習を用いるパターン認識モデルの一つである。 分類や回帰へ適用できる。

サポートベクターマシンは、現在知られている手法の中でも認識性能が優れた学習モデルの一つである。サポートベクターマシンが優れた認識性能を発揮することができる理由は、未学習データに対して高い識別性能を得るための工夫があるためである。

# 新規ポスト

---
title: {{ title }}
date: {{ date }}
category: {{ category }}
tags:
  - {{ tags }}
header-title: true
header-image:
  - /img/header/random-01.jpg
---
{{ overview }}
<!-- more -->
# {{ title }}
[[toc]]
## はじめに

# デプロイ

# ブランチ構成

自分の場合、既に openjny.github.io レポジトリを次のように使っていました。

  • master ブランチ: 静的ファイルの配置用
  • src ブランチ: hexo の設定/記事ファイルの管理用

なので src はそのままにして、vuepress 用の孤児ブランチを作ることにしました。

$ cd vuepress-blog
$ git init
$ git checkout -b vuepress
$ git add -A
$ git commit -m ":tada: first commit!"
$ git remote add -t vuepress origin git@github.com:openjny/openjny.github.io.git
$ git push -u origin vuepress

これで今度からは vuepress ブランチを使えば良い。

$ git clone --branch vuepress git@github.com:OpenJNY/openjny.github.io.git blog
$ cd blog

# 継続的インテグレーション

公式の方法 に従って、以下のようなスクリプトも書いてはみたものの、結局 Travis の page provider に頼った。

https://github.com/OpenJNY/openjny.github.io/blob/vuepress/.travis.yml

#!/usr/bin/env sh
# abort on errors
set -e
# build
yarn build
# navigate into the build output directory
cd "${VUEPRESS_DIR}/.vuepress/dist"
git init
git add -A
git commit -m "Publishing site on $(date "+%Y-%m-%d %H:%M:%S")"
# if you are deploying to https://<USERNAME>.github.io
git push -f --quiet "https://${GITHUB_TOKEN}@github.com/${GITHUB_USER}/${GITHUB_USER}.github.io.git" master
cd -

# 今後の予定

自由に Vue ファイルを書いて機能を追加出来るので、javascript の勉強がてら書いてみたい。

  • Google Analytics
  • Tags/Category ページ
  • コメント

# 参考サイト

  1. 正規表現使うもんかと思ってた。 ↩︎