VuePress環境構築メモ
KEN 2020-05-04 VuePress
# 概要
現在の投稿環境を構築するまでのメモ。
本ページでは特定のテーマを使用した環境を作成していますが、基本的にはnodeのdockerイメージがあれば同様の環境が作成できるはずです。
また、本記事は何かあれば随時追記・修正します。
# 基本的な開発環境
- Macbook Pro
- Docker
- node image
- git（MacOS標準ターミナル）
# Docker
$ docker pull node
1
nodeイメージの最新版をpullする。
$ docker run -it -v [local/path]:[container/path]:delegated -p 8080:8080 --workdir=[container/path] --name container_name node /bin/bash
1
- ホストのディレクトリをコンテナにマウント
- Mac環境だと、マウントのオプションで
delegatedをつけておかないと絶望的にR/W処理が遅くなる[1] - ホストのブラウザで見れるようにコンテナのポート（右側）をホストのポート（左側）に対応させる
- コンテナ
exec時にデフォルトのディレクトリを設定 - コンテナ名をつける
# yarn global add @vuepress-reco/theme-cli
# theme-cli init test
# cd test
# yarn & npm install
1
2
3
4
5
2
3
4
5
githubページだとこのコマンドだが、公式のガイドページ では
yarn add vuepress-theme-reco
だけで済まされている
# 別コンテナで作業するとき
中身だけgitと同一でも、yarnでのコマンドが通らないので、以下のようにする
# mkdir test
# cd test
# yarn add -D vuepress
# cp -rp ../[original/dir]/. .
1
2
3
4
5
2
3
4
5
git cloneした中身が全部移動できていれば大丈夫（？）
yarn devgit status
等のコマンドが正常に叩ければOK
# git
作業の大きな流れ
$ git status //変更ファイル確認
$ git add -A //追加ファイル
$ git commit -a -m "[コミットコメント]"
$ git push
1
2
3
4
2
3
4
yarn buildしたものをgit pushしてから実際にサイト反映されるまで、数分程度かかる
# Google Search Console
プロパティタイプを「ドメイン」に設定した場合に必要なDNSレコード（所有権の確認）設定。
Search Consoleにログインして、TXTのレコードを発行。
# NetlifyへのDNSレコード登録
公式の手順を参考にして、NetlifyへTXTをコピペ。
TXTを登録するのは、
Custom domainsのリストにある、Primary domainの一つだけでいい。
# プラグイン
# vuepress-plugin-sitemap
サイトマップの生成。
github手順の通りに設定。
# markdown-it-footnote
たまに使いたくなる脚注機能。VuePressはデフォルトでは実装されていない。[2]うまくいかなかったのでメモ。
まず、以下コマンドでnpmインストールを実行。
npm install markdown-it-footnote --save
1
ここの通りにやっても反映されず、githubに投稿された質問ページの通りに変更したら無事にできました。
以下の通り、configをextendMarkdownに修正する。
markdown: {
config: md => {
md.use(require("markdown-it-footnote"));
}
}
1
2
3
4
5
2
3
4
5
↓
markdown: {
extendMarkdown: md => {
md.use(require("markdown-it-footnote"));
}
}
1
2
3
4
5
2
3
4
5