# VuePress 配置记录
mkdir vuepress-starter && cd vuepress-starter
npm init
npm install -D vuepress
vim package.json
### 添加如下内容
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"docs:deploy": "bash deploy.sh"
}
}
###
mkdir -p docs/public/assets
vim docs/README.md # 内容如下
vim docs/public/config.js # 内容如下
vim deploy.sh # 内容如下
npm run docs:dev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# README.md
---
home: true
heroImage: /assets/avatar.jpg
heroText: NFE-W`S BLOG
tagline: Just a study note for myself
actionText: Go →
actionLink: /sui-bi/
features:
- title: 随笔
details: 随便记记。
- title: Todo
details: todo
- title: Todo
details: todo
footer: MIT Licensed | Copyright © 2022-present NFE-W
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# config.js
module.exports = {
title: 'NFE-W`S BLOG',
description: 'Just a study note for myself',
head: [
['link', { rel: 'icon', href: '/assets/avatar.jpg' }], // 增加一个自定义的 favicon
],
base: '/',
markdown: {
lineNumbers: true // 代码块显示行数
},
plugins: ['permalink-pinyin', ['autobar', {'pinyinNav': true}], 'rpurl'],
themeConfig: {
repo: 'https://github.com/nfe-w',
repoLabel: 'GitHub',
nav: [
{ text: 'Home', link: '/' },
{ text: 'Repo', link: 'https://github.com/nfe-w/my-note' },
],
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# deploy.sh
#!/bin/sh
# 确保脚本抛出遇到的错误
set -e
npm run docs:build
cd docs/.vuepress/dist
# 如果是发布到自定义域名
echo 'note.nfe-w.top' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages
git push -f [email protected]:nfe-w/nfe-w.github.io.git master
cd -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 自动侧边栏插件 (opens new window)
npm install -D boboidream/vuepress-bar
vim docs/public/config.js # 配置中添加插件，内容如下
1
2
2
module.exports = {
plugins: ['autobar']
}
1
2
3
2
3
# 链接拼音插件 (opens new window)
npm install -D vuepress-plugin-permalink-pinyin
vim docs/public/config.js # 配置中添加插件，内容如下
1
2
2
module.exports = {
plugins: ['permalink-pinyin'] // 如果结合自动侧边插件，应为 plugins: ['permalink-pinyin', ['autobar', {'pinyinNav': true}]]
}
1
2
3
2
3
# 链接美化插件 (opens new window)
npm install -D boboidream/vuepress-plugin-rpurl
vim docs/public/config.js # 配置中添加插件，内容如下
1
2
2
module.exports = {
plugins: ['rpurl']
}
1
2
3
2
3