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 先生に聞いてみてください。

Info

Meteorlxy 見出しへのリンク

Home | vuepress-theme-meteorlxy

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

機能 見出しへのリンク

Container 見出しへのリンク

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

::: [tip|warning|danger|details] タイトル(opt)
内容
:::
Info
こうなります

また、自作コンテナの定義もできる。 以下は .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',
Info
. ├── 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
Info

生の URL に対するリンク 見出しへのリンク

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

構成例 見出しへのリンク

  markdown: {
    linkify: true
  },

サンプル 見出しへのリンク

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

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

参考 見出しへのリンク

相対パスによる画像 見出しへのリンク

Asset Handling | VuePress

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

サンプル 見出しへのリンク

みきゃん

      
みきゃん
みきゃん

みきゃん

数式 見出しへのリンク

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\pi$ という簡単な方程式でも、小学生には難しいです。

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

機械学習とは、データセット $\mathcal{D} = { \mathbf{x}n \in \mathcal{X}, y_n \in \mathcal{Y} }{n=1}^N$ が与えられた時に、入力と出力を対応付ける写像 $$ 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\}$$

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

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

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

参考 見出しへのリンク

ソースコード ハイライト 見出しへのリンク

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

  markdown: {
      lineNumbers: false,

Emoji 見出しへのリンク

:tada: :100: :thinking:

🎉 💯 🤔

目次 見出しへのリンク

定義リスト 見出しへのリンク

$ 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 }}
slug: hello-vuepress
date: 2019-12-28
category: {{ category }}
tags:
  - {{ tags }}
header-title: true
header-image:
  - /img/header/random-01.jpg
---

{{ overview }}

## <!--more-->

# {{ title }}


## はじめに

デプロイ 見出しへのリンク

ブランチ構成 見出しへのリンク

自分の場合、既に 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. 正規表現使うもんかと思ってた。 ↩︎