星际穿越

使用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元

参考链接：

Tags: 工具使用