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