发布于 

vuepress上手

1.创建并进入一个新目录

1
mkdir xxx && cd xxx

2.选择喜欢的包管理器进行初始化

1
yarn init & # npm init

3.将Vuepress安装为本地依赖(不推荐全局安装)

1
yarn add -D vuepress & # npm i -D vuepress

4.创建第一篇文档

1
mkdir docs && echo '# Hello worde' > docs/README.md

5.在packgae.json中添加scripts

1
2
3
4
5
6
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}

5.在本地启动服务器

1
yarn docs:dev & # npm run docs:dev

6.在docs中新建.vuepress文件夹及config.js文件

1
mkdir .vuepress && cd .vuepress/ && touch config.js

7.在.vuepress文件夹新建public

1
mkdir public  // 用来放网页标签的图标

8.在config.js中写入

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
module.exports = {
title: '名字', // 网页标题
description: 'xxx', // 随便起
// 注入到当前页面的 HTML <head> 中的标签
head: [
['link', { rel: 'icon', href: '/favicon.ico' }], // 增加一个自定义的 favicon(网页标签的图标)
],
base: '/xxx/', // github仓库地址
markdown: {
lineNumbers: true // 代码块显示行号
},
themeConfig: {
sidebarDepth: 2, // e'b将同时提取markdown中h3 和 h3 标题,显示在侧边栏上。
lastUpdated: 'Last Updated',// 文档更新时间:每个文件git最后提交的时间
// 主页导航栏
nav:[
{ text: 'xxx', link: 'xxx' }, // link处添外部链接(仓库地址码云或者github)
// 下拉列表
{
text: 'xxx',
items: [
{ text: 'xxx', link: 'xxx' },
{
text: 'xxx',
link: 'xxxx'
}
]
}
],
// 侧边栏
sidebar: [
['/', 'xxx'], // README.md
{
title: 'xxx',
collapsable: false,
children:[
['/help/one.md', '标题名'],
]
},
]
}
}

9.在你的项目(根目录)中创建一个deploy.sh文件(请自行判断去掉高亮行的注释)

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
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# 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:<USERNAME>/<REPO>.git master

cd -

10.写完之后运行sh打包上传

1
sh deploy.sh

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。