开始,写的第一个文章
u4250 2020-10-11 踩坑vuepress
使用vuepress-reco搭建博客
# vuepress
Vue 驱动的静态网站生成器
# vuepress-them-reco
一款简洁而优雅的 vuepress 博客 & 文档 主题。
# 安装踩坑
1.创建目录并初始化
mkdir vuepress-starter && cd vuepress-starter
npm init
1
2
2
2.安装vuepress
#全局安装 包安装在Node安装目录下的node_modules文件夹中,一般在 \Users\用户名\AppData\Roaming\ 目录下,可以使用npm root -g查看全局安装目录。
npm install -g vuepress
#本地安装 包安装在指定项目的node_modules文件夹下
npm install -D vuepress
1
2
3
4
2
3
4
3.安装主题reco(不使用脚手架)
npm install vuepress-theme-reco --save-dev
1
4.目录结构
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
1
2
3
4
5
6
2
3
4
5
6
5.在 package.json
中添加一些 scripts
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
1
2
3
4
5
6
2
3
4
5
6
# config.js配置
module.exports = {
"title": "",
"description": "",
"dest": "public",//build生成静态文件位置,大坑!!!怪不得部署时在默认的dist文件夹下找不到。
locales: {
'/': {
lang: 'zh-CN'
}
},
"head": [
[
"link",
{
"rel": "icon",
"href": "/favicon.ico"
}
],
[
"meta",
{
"name": "viewport",
"content": "width=device-width,initial-scale=1,user-scalable=no"
}
]
],
"theme": "reco",
"themeConfig": {
"nav": [
{
"text": "主页",
"link": "/",
"icon": "reco-home"
},
{
"text": "时间轴",
"link": "/timeline/",
"icon": "reco-date"
},
{
"text": "GitHub",
"link": "https://github.com/u4250",
"icon": "reco-github"
}
],
subSidebar: 'auto',
"type": "blog",
"blogConfig": {
"category": {
"location": 2,
"text": "分类"
},
"tag": {
"location": 3,
"text": "标签"
}
},
"logo": "/logo.png",
"search": true,
"searchMaxSuggestions": 10,
"lastUpdated": "Last Updated",
"author": "u4250",
"authorAvatar": "/bg.jpg",
"record": "xxxx",
"startYear": "2020"
},
"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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
# deploy.sh(发布)
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹 config.js里配置
cd public
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:u4250/blog.git master:gh-pages
cd -
git add -A
git commit -m "ces"
git push
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
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