VuePress搭建

前言

最近研究了下VuePress，记录一下。

部署前提

VuePress requires Node.js >= 8.6.

安装vuepress

$ npm install -g vuepress

创建项目testerzhang-blog

$ mkdir testerzhang-blog


$ cd testerzhang-blog
$ npm init -y

初始化后，会生成一个package.json文件

{
  "name": "testerzhang-blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在package.json中添加启动命令
1.启动项目:npm run dev 这条命令就等于vuepress dev docs
2.打包项目:npm run build 这条命令就等于vuepress build docs

{
  "name": "testerzhang-blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

添加docs文件夹

$ mkdir docs
$ cd docs
$ mkdir .vuepress

新建总配置config.js文件

$ cd .vuepress
$ touch config.js

侧边栏和导航懒配置抽离出来，实现模块化。

$ vim config.js
module.exports = {
    title: 'testerzhang博客',
    description: '我的地盘我做主',
    dest: './dist',
    port: '5432',
    head: [
        ['link', {rel: 'icon', href: '/七龙珠.png'}]
    ],
    markdown: {
        lineNumbers: true
    },
    themeConfig: {
        nav: require('./nav'),
        sidebar: require('./sidebar'),
        sidebarDepth: 2,
        lastUpdated: 'Last Updated',
        searchMaxSuggestoins: 10,
        serviceWorker: {
            updatePopup: {
                message: "New content is available.",
                buttonText: 'Refresh'
            }
        },
        editLinks: true,
        editLinkText: '在 GitHub 上编辑此页 ！'
    }
}

新建导航栏nav.js

在目录.vuepress 下新建 并加入内容

$ touch nav.js
$ vim nav.js

module.exports = [
    {
        text: '首页', link: '/'
    },
    {
        text: '技术总结',
        items: [
            {
                text: 'github', link: '/knowledge/github/'
            },
        ]
    },
    {
        text: '个人主页',
        items: [
            {
                text: '简书', link: 'https://www.jianshu.com/'
            }
        ]
    }
]

新建侧边栏sidebar.js

在目录.vuepress 下新建 --这里还未填写完成，下周更新。

$ touch sidebar.js
$ vim sidebar.js


module.exports = {
   '/knowledge/github/': require('../knowledge/github/sidebar'),
}

如果不需要引用别的目录的siderbar，直接去掉，变成这样即可。

module.exports = {
}

新建public目录

在目录.vuepress 下新建

$ mkdir public

在public目录这里放一张图片，对应启动HTTP服务的"/"目录

主页显示的内容

在目录docs 下新建 并加入内容。

$ vim README.md

---
home: true
heroImage: /七龙珠.png
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present testerzhang
---

新建knowledge知识库

$ mkdir knowledge
$ cd knowledge/
$ touch README.md

新建github目录（这里是我上面例子配置了sidebar）

$ mkdir github
$ cd github/
$ touch README.md

编写README文件内容

$ cat README.md
###  GitHub
技术博客

github目录下创建sidebar.js

module.exports = [
    {
        title: '目录1',
        collapsable: false,
        sidebarDepth: 4,
        children: [
          'dir1/',
          'dir1/test1'
        ]
    },
    {
        title: '目录2',
        collapsable: false,
        sidebarDepth: 4,
        children: ['dir2/']
    }
]

github目录结构

$ find . -type f
./dir1/README.md
./dir1/test1.md
./dir2/README.md
./README.md
./sidebar.js

里面的md文档，可以随意填写内容

效果图

主页效果图 侧边栏效果图