带你手摸手搭建vuepress站点

vuePress是什么？

VuePress 俺简单介绍下，是国内有名大神的尤雨溪发布的全新基于 vue 静态网站的生成器，内置的有 webpack组件，可以拿来写文档，主要是md格式。做出的感觉就是简约，性能也比较好，你也可以自定义很多的插件。响应式布局，PC端、手机端都能显示，觉得还不错就选它。

类似的建站工具其实有很多，你也许了解一点，譬如 Wordpress，Jekyll, Hexo等，WordPress 这需要买台云服务器才行，太贵哈哈 懂的都懂；Jekyll 是 Github-Page 默认支持的，听说操作起来比较复杂，没有用过不做评价了；Hexo 之前一直在用，但觉得花里胡哨的，风格上简洁优雅，组件太多不够轻量。自从遇见 VuePress，嗯，就是它了~

零 基础环境准备

• git(版本管理)
• cmder(可选的命令行工具，自行下载尝试)
  这个可选的，我采用git bash;
• node(核心)
• yarn(npm 包管理的替代)
  为什么不使用 npm,vuepress官网推荐（npm部分插件使用时有错误）;
• vscode(编辑器)
  不用多说，估计大家都有这个;

一 本地搭建

快速开始同 VuePress 官网:

1 创建并进入一个新目录

//创建项目文件夹
mkdir ByteGuide && cd ByteGuide

2 进入 ByteGuide 文件夹，使用你喜欢的包管理器进行初始化

//yarn管理器
//npm包管理器
yarn init # npm init(默认yes) 

3 把 VuePress 安装为本地依赖

yarn add -D vuepress # npm install -D vuepress

4 初始化项目使用 npm init 或 npm init -y（默认yes）

npm init -y

5 创建属于你的第一篇文档，VuePress 会把 docs 作为文档根目录(/)，那这个 README.md 这个相当于你的主页：

mkdir docs && echo '#Hello VuePress' > docs/README.md

目录结构

在 Myblog 项目文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，基础项目结构如下所示：

Myblog
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
|   |—— notes //放.md格式的文件
└── package.json

二 基础配置

1 在 config.js 文件中配置网站标题、描述、主题等信息

module.exports = {
   
  title: 'blog',
  description: '个人网站',
  base: '/', 
  markdown: {
   
    lineNumbers: false // 代码块显示行号
  },
  themeConfig: {
   
    nav:[ 
    {
    text: '首页', link:'/' },
    {
   
      text:'阿龙的 'JavaScript 博客',
      items: [
        {
   text: 'Java基础', link: '/accumulate/' },
        {
   text: '图解算法', link: '/algorithm/'},
        {
   text: '手摸手造一个RPC', link: 'http://dubbo.io/'}    
                    ]
                }
            ]
    }
}

2 在 package.json 文件里加两个启动命令

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

3 一切就绪 本地启动服务器 跑起来看看吧

//两种方式启动
yarn docs:dev  # npm run docs:dev

它会在 http://localhost:8080(opens new window) 启动个热加载的开发服务器。

此时界面类似于：

4 添加导航栏
在页首的右上角添加导航栏 items，修改 config.js:

module.exports = {
   
    title: '...',
    description: '...',
    themeConfig: {
   
        nav: [
            {
    text: '首页', link: '/' },
            {
    
                text: '龙歌的 JavaScript 博客', 
                items: [
                    {
    text: 'CSDN', link: 'https://blog.csdn.net/weixin_45817252?type=blog' },
                    {
    text: '掘金', link: 'https://juejin.cn/user/1935575059273485' }
                ]
            }
        ]
    }
}

效果如下：

更多的配置参考 VuePress 导航栏。

三 进阶配置

1 代码块高亮

在 .md 文件中书写代码时，可在 ```后增加 js、html、json等格式类型，代码块即可按照指定类型高亮，这个很简单。

2 也可以自定义容器

代码所示：

::: tip 提示
this is a tip
:::

::: warning 注意
this is a tip
:::

::: danger 警告
this is a tip
:::

效果：

3 添加侧边栏

现在我们添加一些 md 文档，目前文档的目录如下：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
|  └─ notes
|     └─ 图解路由协议.md
|     └─ redis对象系统.md
└─ package.json

我们在 config.js 配置如下：

module.exports = {
   
    themeConfig: {
   
        nav: [...],
        sidebar: [
            {
   
                title: