docsify & gitee 搭建个人博客

东小西
3,251 阅读1分钟

分分钟，搭建一个属于自己的博客网站。

docsify

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

官网：docsify.js.org/#/

安装docsify

前提哟，操作系统有node.js。

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

自定义配置项

下面可以通过修改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://juejin.cn/user/3118687291183911)

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

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

（2）侧边栏设置

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

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

（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>

（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">

（7）自定义封面

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

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

<!-- _coverpage.md -->

<img src="media/avatar.png" width="100px"/>

# 东小西 <small>shiyunxi</small>

> 奋斗的年纪，改变不了过去，那就改变现在

- 即使雾霾再严重，也要坚持按照自己的节奏呼吸


[稀土掘金](https://juejin.cn/user/3118687291183911)
[知乎](https://www.zhihu.com/people/syx-1009)
[Gitee](https://gitee.com/renxiaoshi)

最后完整的 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 就好。

实现起来超级简单，只是需要实名认证审核，等我审核后，再简单搞一下。

手动更新

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

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

avatar
文章
阅读
粉丝