分分钟，建立一个归于自己的博客网站。

docsify

一个神奇的文档网站生成器。docsify 能够快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，一切转换工作都是在运行时。如果你想要开始运用它，只需求创立一个 index.html 就能够开始编写文档。

官网：docsify.js.org/#/

docsify & gitee 搭建个人博客

安装docsify

条件哟，操作系统有node.js。

# 安装 docsify-cli
npm i docsify-cli -g
# 初始化项目
docsify init ./docs
# 发动项目
docsify serve docs

docsify & gitee 搭建个人博客

docsify & gitee 搭建个人博客
docsify & gitee 搭建个人博客

自定义配置项

下面能够通过修改index.html，定制化开发页面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: ''
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>

（1）顶部导航栏和侧边栏

    window.$docsify = {
       name: '东小西', // 侧边栏顶部显现的称号
       repo: 'https://gitee.com/renxiaoshi', // 右上角Github图标链接
       loadNavbar: true, // 默许加载 _navbar.md，作为顶部导航栏
       loadSidebar: true // 默许加载 _sidebar.md，作为侧边栏
    }

新建 _navbar.md 文件，内容如下：

* 专栏
  * [微服务「Nacos」](https://www.zhihu.com/column/c_1488183624659300352)
  * [微服务「Admin」](https://www.zhihu.com/column/c_1489264713041608705)
  * [微服务「Gateway」](https://www.zhihu.com/column/c_1490069341529538560)
  * [微服务「Sentinel」](https://www.zhihu.com/column/c_1490415514178875393)
  * [更多专栏](https://www.zhihu.com/people/syx-1009/columns)
* 源码&博客
  * [Gitee](https://gitee.com/renxiaoshi)
  * [知乎](https://www.zhihu.com/people/syx-1009)
  * [稀土](https:///user/3118687291183911)

docsify & gitee 搭建个人博客

新建_sidebar.md文件和示例文档，内容如下：

* 简介
    * [东小西](md/myinfo.md)
* 精选博客
    * [CPU100%，怎么快速定位](md/100.md)
    * [谈一谈9年前的jdk8的新特性](md/谈一谈9年前的jdk8的新特性.md)
    * [自定义类加载器](md/自定义类加载器.md)

docsify & gitee 搭建个人博客

docsify & gitee 搭建个人博客

（2）侧边栏设置

在 window.$docsify 中插入 subMaxLevel: 3，显现文章标题。

    window.$docsify = {
       name: '东小西', // 侧边栏顶部显现的称号
       repo: 'https://gitee.com/renxiaoshi', // 右上角Github图标链接
       loadNavbar: true, // 默许加载 _navbar.md，作为顶部导航栏
	   loadSidebar: true, // 默许加载 _sidebar.md，作为侧边栏
	   subMaxLevel: 3, // 目录的最大层级
    }

docsify & gitee 搭建个人博客

（3）检索插件

类似于全文检索。

    window.$docsify = {
       name: '东小西', // 侧边栏顶部显现的称号
       repo: 'https://gitee.com/renxiaoshi', // 右上角Github图标链接
       loadNavbar: true, // 默许加载 _navbar.md，作为顶部导航栏
	   loadSidebar: true, // 默许加载 _sidebar.md，作为侧边栏
	   subMaxLevel: 3, // 目录的最大层级
	   search: {
        paths: 'auto',
        placeholder: '检索',
        noData: '没有找到喔！',
        depth: 3,
      },
    }
  <!-- 检索插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

docsify & gitee 搭建个人博客

（4）一键仿制

  <!-- 一键仿制插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>

（5）代码高亮

  <!-- 代码高亮 -->
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-c.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-shell-session.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-http.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>

（6）主题

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">

docsify & gitee 搭建个人博客

（7）自定义封面

window.$docsify 中添加 coverpage: true，默许会加载 _coverpage.md。

新建_coverpage.md文件，内容如下：

<!-- _coverpage.md -->
<img src="media/avatar.png" width="100px"/>
# 东小西 <small>shiyunxi</small>
> 斗争的年岁，改变不了曩昔，那就改变现在
- 即使雾霾再严峻，也要坚持按照自己的节奏呼吸
[稀土](https:///user/3118687291183911)
[知乎](https://www.zhihu.com/people/syx-1009)
[Gitee](https://gitee.com/renxiaoshi)

docsify & gitee 搭建个人博客

最终完好的 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
       name: '东小西', // 侧边栏顶部显现的称号
       repo: 'https://gitee.com/renxiaoshi', // 右上角Github图标链接
       loadNavbar: true, // 默许加载 _navbar.md，作为顶部导航栏
	   loadSidebar: true, // 默许加载 _sidebar.md，作为侧边栏
	   subMaxLevel: 3, // 目录的最大层级
	   search: {
        paths: 'auto',
        placeholder: '检索',
        noData: '没有找到喔！',
        depth: 3,
      },
	  coverpage: true,//掩盖首页
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  <!-- 检索插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  <!-- 一键仿制插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
  <!-- 代码高亮 -->
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-c.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-shell-session.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-http.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>
  <!-- 主题 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">
</body>
</html>

继续集成

首先在 gitee 新建库房，把上述一切文件上传到库房。

Gitee Pages服务

Gitee Pages服务，代码托管网站将用户的库房文件以网页方式发布。

白嫖党的福利，不用自己买服务器、买域名，交给 gitee 就好。

完成起来超级简单，仅仅需求实名认证审阅，等我审阅后，再简单搞一下。

docsify & gitee 搭建个人博客

docsify & gitee 搭建个人博客

手动更新

由于 Gitee Pages 只能运用 gitee 的默许域名，我暂时先不考虑 Gitee Pages ，在自己的腾讯云服务器安装好 docsify，手动从 gtiee 拉取代码，完成页面更新。

docsify & gitee 搭建个人博客

附上我的个人博客：onetree.plus/blog

docsify & gitee 搭建个人博客