# 基础搭建
- 初始化服务
npm init
npm install -D vuepress
mkdir docs && echo '# Hello VuePress' > docs/README.md
1
2
3
4
5
2
3
4
5
- package.json添加
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
1
2
3
4
5
6
2
3
4
5
6
- 启动服务
npm run docs:dev
1
- 初始化目录结构
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── config.js (重要配置)
│ │
│ ├── README.md
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- 上主题
npm install vuepress-theme-reco --save-dev
1
// .vuepress/config.js
module.exports = {
theme: 'reco'
}
1
2
3
4
5
2
3
4
5
- 再跑就有效果了
npm run docs:dev
1
- 让主题复杂一点
主页README.md，背景图放在public目录下
---
home: true
bgImage: '/assets/bg.jepg'
bgImageStyle: {
color: 'white',
maxHeight: '400px',
boxShadow: '0 5px 18px rgba(0,0,0,0.2)'
}
isShowTitleInHome: true
heroText: 🎃南瓜的博客
tagline: 爱笑的人运气不会差
---
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
title: '南瓜籽儿',
theme: 'reco',
themeConfig: {
type: 'blog',
author: '南瓜籽儿',
startYear: '2022',
// authorAvatar: '/portrait.jpg',
// modePicker: false,
// logo: '/portrait.jpg',
// nav: require('./nav'),
// sidebar: require('./sidebar'),
lastUpdated: '上次更新',
friendLink: [
{
title: 'vuepress-theme-reco',
desc: 'A simple and beautiful vuepress Blog & Doc theme.',
logo: 'https://photo.smallsunnyfox.com/images/blog/friendlink/theme_reco.png',
link: 'https://vuepress-theme-reco.recoluan.com'
},
],
// 博客设置
blogConfig: {
tag: {
location: 2, // 在导航栏菜单中所占的位置，默认3
text: 'Tag' // 默认 “标签”
},
socialLinks: [ // 信息栏展示社交信息
{ icon: 'reco-github', link: 'https://github.com/coderHDY' },
]
},
// 搜索设置
search: true,
searchMaxSuggestions: 10,
// 自动形成侧边导航
subSidebar: 'auto',
sidebarDepth: 2,
displayAllHeaders: false,
//valine
// valineConfig: {
// appId: '', // your appId
// appKey: '', // your appKey
// placeholder: '说说你的看法~',
// avatar: 'wavatar',
// serverUrl: ''
// }
},
markdown: {
lineNumbers: true
},
}
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
- 新建目录写文件
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── config.js (重要配置)
│ ├── blog
│ │ ├── 2022
│ │ | └── yuandan.md
│ ├── README.md
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- yuandan.md
---
title: 元旦
date: 2021-11-01
tags:
- 生活
categories:
- 个人日记
---
## 早上
* 早上我们去吃饭了
## 中午
* 中午我敲了代码
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
- 重启服务器就有效果了
# 运行项目
- 先安装依赖
npm i
1
- 本地运行
npm run docs:dev
1
- 修改文档后会自动更新
- 如果没有自动更新，就结束进程再启动
ctl + c
npm run docs:dev
1
2
3
2
3
# 本地后台更新项目
- 安装pm2
npm i pm2 -g
1
- pm2启动应用
pm2 start npm -- run docs:dev
1
- 保存项目
pm2 save
1
- 如果自动更新失效，重启项目
pm2 restart 0
1
# 部署项目
- 设置部署文件
deploy.sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'xxx.com' > CNAME
git init
git add -A
git commit -m 'Deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:coderxxx/coderxxx.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
git push -f git@github.com:coderHDY/XXX.git master:gh-pages
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- 配置好部署路径以后，每次要更新文件就执行命令行
bash deploy.sh
1