使用VuePress搭建在线笔记站点
licoded / / 工具使用 / 阅读量

初始化VuePress项目

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

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

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
  }
},

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

配置

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

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

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分支,不需要手动切换分支

安装

yarn add -D gh-pages

编写脚本

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 中添加快捷命令

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

更新文章后需要的操作

# 提交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元

参考链接:

支付宝捐赠
请使用支付宝扫一扫进行捐赠
微信捐赠
请使用微信扫一扫进行赞赏
有 0 篇文章