一、什么是 vuepress
VuePress 是一个基于 Vue 的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。 它是为了满足 Vue 自己的子项目文档的需求而创建的。
实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。详见 VuePress中文网
效果：
效果1.png
效果2.png
二、怎么白嫖？
本文推荐两种方案：
- github 的 github pages
- gitee 的 gitee pages
具体使用方法，后面会说，下面就开始动手。
三、开始
git仓库：https://github.com/chenjing0823/githubio
想直接体验白嫖的 可以直接拉这个仓库，然后去第四章。
3.1 搭建项目
- 创建目录
githubio，mkdir githubio，进入项目目录githubio， 初始化项目
npm init -y
- 安装 vuepress
npm install vuepress -S
- 在
githubio文件夹中创建docs文件夹，在docs中创建.vuepress文件夹 和README.md，在.vuepress中创建public文件夹和config.js文件，项目结构如下所示：
githubio
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ └── config.js
└── package.json
- 在
config.js文件内 配置网站标题、描述、主题等信息，具体配置看官方文档 vuepress config
module.exports = {
title: 'Chen\'s blog',
description: '我的个人网站',
head: [ // 注入到当前页面的 HTML <head> 中的标签
['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
],
base: '/', // 这是部署到github相关的配置
markdown: {
lineNumbers: false // 代码块显示行号
},
themeConfig: {
logo: '/logo.JPG',
nav:[ // 导航栏配置
{text: '导航一', link: '/route-one/' },
{text: '导航二', link: '/route-two/'},
{text: '外链', link: 'https://baidu.com'}
],
sidebarDepth: 2, // 侧边栏显示2级
sidebar: 'auto' // 侧边栏配置
}
};
- 在 package.json 内，添加命令：
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
- 一切就绪，跑项目查看效果
npm run dev
3.2 丰富项目
添加多个侧边栏，修改config.js, 我参考的是 vue 的配置 vue doc
const sidebar = {
'route-one': [
{
title: '目录一',
collapsable: false,
children: [
'',
'/route-one/readme1',
'/route-one/readme2',
]
},
{
title: '目录二',
collapsable: false,
children: [
'/route-one/readme3',
'/route-one/readme4',
]
}
],
'route-two': [
{
title: '目录一',
collapsable: false,
children: [
'',
'/route-two/readme1',
'/route-two/readme2',
]
}
]
}
module.exports = {
title: 'Chen\'s blog',
description: '我的个人网站',
head: [ // 注入到当前页面的 HTML <head> 中的标签
['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
],
base: '/', // 这是部署到github相关的配置
markdown: {
lineNumbers: false // 代码块显示行号
},
themeConfig: {
logo: '/logo.JPG',
nav:[ // 导航栏配置
{text: '导航一', link: '/route-one/' },
{text: '导航二', link: '/route-two/'},
{text: '外链', link: 'https://baidu.com'}
],
sidebarDepth: 2, // 侧边栏显示2级
sidebar: {
collapsable: false,
'/route-one/': sidebar['route-one'],
'/route-two/': sidebar['route-two']
}
}
};
添加各目录结构 对应的.md文档，如下
image.png
.md文件内容 侧边标题 自由发挥。
最后，继续查看本地效果，看到效果后，任务完成。
四、开始部署（正式白嫖）
4.1 github
4.1.1 登录 github ，新建仓库
从 github pages 内可以看到详细的内容，我在这里总结一下。
新建仓库，必须是 <username>.github.io。例如 我的 username 是 chengjing0823，那么我新建的仓库就是 chenjing0823.github.io
image.png
因为我已经创建过了，会有警告
image.png
仓库建好后，就再也不去动他了
4.1.2 配置发布脚本
在刚刚的 githubio 项目内，跟package.json同级，新建文件 deploy.sh，内容如下：
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.yourwebsite.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果你想要部署到 https://USERNAME.github.io
# git push -f git@github.com:chenjing0823/chenjing0823.github.io.git master
git push -f https://github.com/chenjing0823/chenjing0823.github.io.git master
# 如果发布到 https://USERNAME.github.io/<REPO> REPO=github上的项目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages
cd -
然后在 package.json 内新增脚本
"scripts": {
"deploy": "bash deploy.sh"
}
后续也可以使用免费的
CI资源Travis CI进行持续集成，将白嫖进行到底😁
意思大概类似于 Docker实战，配合使用Travis CI进行持续集成 的Travis CI自动编译部分，可以灵活贯通。
最后运行脚本
npm run deploy
打开链接 ：http://chenjing0823.github.io/ 查看效果
image.png
image.png
4.2 gitee
使用gitee白嫖相对简单很多
只需要将 githubio 项目，上传到 gitee 仓库。
点击Gitee Pages
image.png
- 上传生成好的html文件到仓库
- 仓库界面-服务-Gitee Pages 选择部署分支、填写 部署目录 （Hugo生成的在/public）, 填写后 点击 更新即可
网友评论