vuePress是什么？

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

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

一 本地搭建

快速开始同 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: '以前的文章',
                path: '/',
                collapsable: false, // 不折叠
                children: [
                    { title: "学前必读", path: "/" }
                ]
            },
            {
              title: "学起来",
              path: '/notes/图解路由协议',
              collapsable: false, // 不折叠
              children: [
                { title: "图解路由协议", path: "/notes/图解路由协议" },
                { title: "redis对象系统", path: "/notes/redis对象系统" }
              ],
            }
          ]
    }
}

对应的效果如下：

4 支持Emoji

代码所示：

:tada: :100: :bamboo: :gift_heart: :fire:

效果：

这里有一份 Emoji 大全 https://www.webfx.com/tools/emoji-cheat-sheet/ 给你参考下用

5 换主题

现在基本的目录和导航功能已经实现，但如果我还想要加载 loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能呢，为了简化开发成本，我们先可以直接使用主题插件，这里使用的主题是 vuepress-theme-rec 这个

现在我们安装它

npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco

同样的道理，然后在 config.js 里引用该主题：

module.exports = {
  // ...
  theme: 'reco'
  // ...
}  

刷新一下页面，我们会发现一些细节的改变，比如加载时的 loading 动画、以及支持切换暗黑模式：

6 开启目录结构

在原本的主题里，我们发现每篇文章的目录结构出现在左侧：而 vuepress-theme-reco 将原有的侧边栏的中的多级标题移出，生成子侧边栏，放在了页面的右侧，如果你要全局开启，可在页面 config.js 里设置开启：

module.exports = {
  //...
  themeConfig: {
    subSidebar: 'auto'
  }
  //...
}

此时效果如下：

7 修改主题颜色

VuePress 基于 Vue，所以主题色用的是 Vue 的绿色，那我想换 VuePress 的主题色呢？

你可以创建一个 .vuepress/styles/palette.styl 文件，文件代码如下：

$accentColor = #3178c6

此时可以发现主题颜色变了：

更多的颜色修改参考 VuePress 的 palette.styl。

8 自定义修改样式

如果你想自定义修改一些 DOM 元素的样式呢？就比如在暗黑模式，我们发现用作强调的文字颜色比较暗淡，在暗黑模式下看不清楚，我想改下这个文字的颜色和背景色呢？

而 VuePress 提供了一种添加额外样式的简便方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件，但你也可以使用正常的 CSS 语法。

我们在 .vupress 文件夹下创建这个目录，然后创建 index.styl 文件，代码如下：

// 通过检查，查看元素样式声明
.dark .content__default code {
    background-color: rgba(58,58,92,0.7);
    color: #fff;
}

此时文字就清晰了很多：

那之前我们想提到去隐藏每篇文章的标题、作者、时间呢，其实也是类似的方式：

.page .page-title {
   display: none;
}

最后的效果如下：

四 部署

我们的博客就算是正式的做好了，接下来我们部署到免费的 Github Pages 上。我们在 Github 上新建一个仓库，这里我取得仓库名为：blog。

对应，我们需要在 config.js 添加一个 base 路径配置：

module.exports = {
   // 路径名为 "/<REPO>/"
    base: '/blog/',
   //...
}

最终的 config.js 文件内容为：

module.exports = {
    title: 'blog',
    description: '个人网站',
    base: '/blog/',
    theme: 'reco',
    locales: {
        '/': {
          lang: 'zh-CN'
        }
    },
  themeConfig: {
            // lastUpdated: '上次更新',
            nav:[
                { text: '首页', link:'/' },
                {
                    text: '阿龙的 JavaScript 博客',
                    items: [
                        {text: '博客搭建', link: '/notes/'},
                        {text: '图解高频算法', link: '/algorithm/'},
                        {text: '手摸手造一个RPC', link: 'http://dubbo.io/'}
                    ],
                }
            ],
            subSidebar: 'auto',
            sidebar: [

                {
                    title: '欢迎学习',
                    path: '/',
                    collapsable: false,
                    children: [
                        { title: "学前必读", path: "/" }
                    ]
                },
                {
                    title: "文章",
                    path: '/notes/redis对象系统',
                    collapsable: false,
                    children: [
                        {title: "redis对象系统", path: "./notes/redis对象系统"},
                        {title: "图解路由协议", path: "./notes/图解路由协议"}
                    ],
                }
            ]
    }
}

然后我们在项目 ByteGuide 目录下建立一个脚本文件：deploy.sh，注意修改一下对应的用户名和仓库名：

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f  master:gh-pages

cd -

然后命令行切换到 ByteGuide 目录下，执行 sh deploy.sh，就会开始构建，然后提交到远程仓库，注意这里提交到了 gh-pages 分支，我们查看下对应仓库分支的代码：

我们可以在仓库的 Settings -> Pages 中看到最后的地址：

像我最后生成的地址就是 https://mqyqingfeng.github.io/blog/

至此，我们完成了 VuePress 和 Github Pages 的部署。

我们成功的用 VuePress 搭建了博客并部署到 Github Pages，但由于 Github 的访问问题，我们可以选择把仓库部署到 Gitee 一份，利用 Gitee 的 Pages 服务再生成一份静态网站用于备用。

Gitee 导入仓库

上篇我们已经在 Github 创建了博客仓库，现在我们在 Gitee 绑定 Github 账号后，选择仓库导入：

仓库建立后，问题也来了，即我们一份本地仓库，如何保证 Github 和 Gitee 仓库代码的同步呢？

1. 手动同步

在 Gitee 的项目主页，提供了同步的按钮，你只用点一下，即可与 Github 同步更新，但是注意这里的同步功能默认是强制同步。

有点麻烦的是，我们需要在推送到 Github 后，再到 Gitee 项目主页手动点击一下。

2. 推送两个仓库

除此之外，我们也可以在 sh 脚本文件里，直接推送到两个仓库地址上，我们修改一下上篇的脚本：

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:Datalong/ByteGuide.git master:gh-pages
git push -f git@gitee.com:Datalong/ByteGuide.git master:gh-pages

cd -

当我们执行 sh deploy.sh 的时候，就会自动往两个仓库里推送。

至此，我们实现了 Github 与 Gitee 代码仓库的同步。

唯一不足的地方是每次需要更新博客仓库你都需要手动点击同步，是有点麻烦，下篇着重描述下这里，再见。

系列文章

系列文章目录地址：https://github.com/Datalong/blog

搜索公粽号:龙哥手记 「加群进阶」, 进龙歌唯一的读者群。
如果有错误或者不严谨的地方，请务必得出指正，非常感谢。如果喜欢或者 有所启发，欢迎star, 对作者也是一种鼓励。
跟着龙哥一起掉亿点点秀发吧~, `别忘给我点赞💖 哥哥姐姐们再走啊！！！