星际穿越

使用VuePress搭建在线笔记站点

2020-06-21

初始化VuePress项目

1
2
3
4
5
6
# 创建文件夹
mkdir your-project && cd your-project
# 安装vuepress
yarn add -D vuepress
# 创建文档目录,并写入一些文字
mkdir docs && echo '# Hello VuePress' > docs/README.md

接着,在 package.json 中添加一些快捷脚本

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

执行yarn dev,VuePress会在 http://localhost:8080 启动一个热重载的本地开发服务器

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const navConf = require("./config/navConf.js");
const pluginConf = require("./config/pluginConf.js");

module.exports = {
base: "/docs/",
port: 8000,
title: "Licoded's Note",
description: "Licoded的笔记, vuepress 文档",
themeConfig: {
repo: "https://gitee.com/licoded/docs",
repoLabel: 'Gitee',
nav: navConf,
},
plugins: pluginConf,
};
配置项 说明
base 站点的基础路径,可以理解成GitHub仓库名
port 指定本地开发服务器(dev Server) 的端口,不会影响build文件
repo Github仓库/链接
repoLabel 自定义仓库链接文字
nav 导航栏链接配置
plugins 插件配置

navConf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.exports = [
{ text: "初心", link: "/guide/" },
{ text: "大学 ", link: "/university/" },
{
text: "系统",
items: [
{ text: "Linux", link: "/os/linux/" },
{ text: "Manjaro", link: "/os/manjaro/" },
],
},
{
text: "前端",
items: [{ text: "JavaScript", link: "/frontend/javascript/" }],
},
{
text: "开发工具",
items: [
{ text: "Git", link: "/tools/git/" },
{ text: "VSCode", link: "/tools/vscode/" },
],
},
];

pluginConf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
"@vuepress/back-to-top": true,
"vuepress-plugin-auto-sidebar": {
titleMode: "uppercase",
titleMap: {
linux: "Linux 基础",
javascript: "JavaScript 基础",
guide: "不忘初心",
university: "大学记忆",
manjaro: "Manjaro",
git: "Git",
vscode: "VSCode",
},
collapsable: true,
// collapseList: ["/os/linux"],
},
};

titleMap相当于起别名,优先级最高,会覆盖titleMap;

collapsable,是否折叠侧边栏分组;也可以指定需要折叠的路径数组;

使用gh-pages插件

使用这个插件可以很方便地把build出来的dist目录推送到gh-pages分支,不需要手动切换分支

安装

1
yarn add -D gh-pages

编写脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var ghpages = require("gh-pages");
ghpages.publish(
"./docs/.vuepress/dist",
{
branch: "gh-pages",
},
function (err) {
if (err) {
console.log("docs同步失败!");
console.log(err);
} else {
console.log("docs同步完成!");
}
}
);

package.json 中添加快捷命令

1
2
3
{
"pages": "yarn build && node scripts/pages.js",
}

更新文章后需要的操作

1
2
3
4
5
6
7
# 提交VuePress项目到Gitee
git commit -am "your comments"
git push -u origin master
# 推送dist文件夹到gh-pages分支,然后手动到Gitee跟新Pages部署
yarn pages
# 更新AlgoliaSearch的Index
yarn algolia

选择Gitee也是出于无奈,GithubPages在国内访问慢,coding的Pages现在好像用不了了,它更新之后我就不会用了

Gitee的自动部署是要付费的,一年99元

参考链接: