VuePressを構築する
はてなブログで立ち上げたブログをVuepressに移行しようとしたのだが、マニュアルと格闘の末、4回作り直す羽目になったので、やり方をまとめておく。
Vuepressをブログとして活用したい場合、おそらくデフォルトの状態から色々変更が必要なのだが、とりあえずここではVuepressの基本的な構築までとする。
ちなみに失敗した3回は下記の理由によるものである。
- yarn をあまり使いたくなくて npm でゴリ押ししようとして失敗。
- vitepressを入れたものの、プラグインに対応していないことに後から気がついてvuepressに変更。
- WordPressのようなカテゴリ、タグページを作ろうとして、丸一日、格闘の末、諦める。（ソースがぐちゃぐちゃになってしまったので、一旦、作り直し。。）
横着しないで、ちゃんとドキュメント読まないとダメだね((*つ∀`))ﾃﾍｯ
# まずはVuepressをインストール
これは下記のコマンドで対応できる。
$ yarn create vuepress-site press
$ cd press/docs/
$ yarn install
$ yarn dev
2
3
4
最初はVitepressで入れようとしたのだが、前述の通り、プラグインが非対応だったり、その他にも色々と制約があってVuepressで入れることにした。
# config.js （設定ファイル）修正
とりあえずドキュメントを参考に修正していく。
下記、初期値から変更した箇所のみ書いていく。
module.exports = {
title: 'Web Ninja Press',
description: 'WEB最適化のための技術的な情報発信をしています。',
base: '/press/', // ドキュメントルート直下なら省略可能
lang: 'ja-JP', // 日本語ならこれでOKのはず。
head: [
// metaタグなどhead内に入れる内容を記載していく。
// このあたり、yarn devではソースコード内に反映されず、動的にDOM追加されていたが、
// yarn buildでビルドしたファイルを確認したらきちんとHTMLファイルに書き出されていた。
['meta', { name: 'theme-color', content: '#3eaf7c' }],
],
themeConfig: {
logo: '/logo.png',
nav: [
{
text: 'Home',
link: '/',
},
],
sidebar: 'auto',
footer: "Copyright © 合同会社ups-and-downs All Rights Reserved.",
},
markdown: {
// マークダウンでの行数表示
lineNumbers: true,
// マークダウン拡張（https://vuepress.vuejs.org/plugin/option-api.html#extendmarkdown）
extendMarkdown: (md) => {
md.set({ breaks: true }); // 行数に意味をもたせるかどうか
// md.use(require("markdown-it-mark"));
},
},
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
上記の themeConfig.logo ではロゴファイルを logo.png と記載しているが、基本的に静的ファイルは .vuepress/public/ 以下に設置すればそのままルート以下に書き出される。
# index.md（トップページ）を修正
docs/index.md がトップページになるのでこちらを修正。
---
home: true
heroImage: /logo.png
heroAlt: Logo image
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started
actionLink: /guide/
features:
- title: Simplicity First
details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2019-present Evan You
---
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
heroImage に指定するロゴ画像のURLはルートディレクトリからのパスとなるので、.vuepress/public/ 直下に logo.png を配置した場合、/logo.png とすればよい。
なお、Vitepressで試したときは、ドキュメントを読む限り、/docs/.vitepress/ 以下に /public/ ディレクトリを作成し、そこにロゴ画像をおいておけばよいように書いてあったが、実際に試してみたところ、それではうまくいかず、/docs/public/ にしたところ、うまくいった。
ちなみにいろいろ試してみたところ、この部分はただ config.jsに指定したbase（当サイトでは/press/）とこの部分に指定されているパスをつなげているだけっぽい。
# ビルド
これで yarn dev した上で http://localhost:8080/ にアクセスすればテスト環境を確認できる。
$ yarn dev
これで問題なければ yarn build してサーバーにアップして確認する。
$ yarn build && rsync ...
これでアップしたURLで正常にみることができれば構築完了になります。