做10个网站用多大的服务器,【教你搭建服务器系列】（10）利用Docsify搭建个人笔记网站...

写文档的工具非常多，但是作为程序员，大部人还是偏爱Markdown的，有时需要写一份开发文档，以供自己或者他人查看，那如何把 Markdown 文件转换成文档呢？

docsify 就可以做到了，docsify 可以直接加载 Markdown 文件并动态渲染，同时还可以生成封面页，还可以部署在github pages ，效果图像以下这种：

1、安装docsify

安装docsify需要node环境，所以必须先安装Node环境才能进行下一步。

Node下载地址：https://nodejs.org/zh-cn/download/current/

配置完node环境后，使用npm下载docsify组件：

npm i docsify-cli -g

2、初始化文档目录

演示为 windows 系统

新建一个目录 为 LearnJavaToFindAJob

进入目录，再新建一个文件 docs

docs 目录表示我所有文章的根目录

docsify init ./docs

看到这个目录生成了文件：

这个index.html 就是首页了，可以放在自己的服务器，利用Nginx、Tomcat进行部署都行。或者你也可以使用GitHubPage进行部署。

3、运行

docsify serve ./docs

打开 http://localhost:3000 就发现可以访问文档了。

4、其他配置

docsify 提供了很多配置给到用户自行设置，更详细的配置都可以在官网找到：

下面列举一下我自己的配置：

4.1、index.html

如果你的MD文件多，首次访问是非常慢的，因为docsify的原理也是通过把md文件渲染成html，所以白屏时间可以加个提示：

正在加载中.....

其他一些插件：

window.$docsify = {

coverpage: true,

name: 'LearnJavaToFindAJob',

//点击name对应的URL

nameLink: '#/README',

repo: 'https://github.com/DogerRain/LearnJavaToFindAJob',

loadNavbar: true,

loadSidebar: true, // 加载自定义侧边栏

maxLevel: 0, // 默认情况下会抓取文档中所有标题渲染成目录，可配置最大支持渲染的标题层级。

subMaxLevel: 0, // 生成目录的最大层级

mergeNavbar: true, // 小屏设备下合并导航栏到侧边栏

alias: { // 定义路由别名，可以更自由的定义路由规则。 支持正则

'/.*/_sidebar.md': '/_sidebar.md',//防止意外回退

'/.*/_navbar.md': '/_navbar.md'

},

auto2top: true,

//代码一键复制

copyCode: {

buttonText: '复制',

errorText: 'Error',

successText: '复制成功'

},

//分页

pagination: {

previousText: '上一章节',

nextText: '下一章节',

crossChapter: true,

crossChapterText: true,

},

//全局搜索

search: {

paths: 'auto',

placeholder: '搜索',

noData: '找不到结果',

depth: 3, //搜索的标题深度

},

//字数统计，需要引入js

count:{

countable:true,

fontsize:'0.9em',

color:'rgb(90,90,90)',

language:'chinese'

},

coverpage: true,

onlyCover: true

}

4.2、左侧栏

新建一个 _sidebar.md 文件，只需要写入自己的表题和路径即可：

(注意：这里一定是要对应你文章的相对路径)

- [算法](articles\\算法\\高频算法面试题.md)

- [八大排序算法](articles\\算法\\八大排序算法.md)

- 字符串(辅助Map)：

- [1-两数之和](articles\\算法\\1-两数之和.md)

- [2-两数相加](articles\\算法\\2两数相加.md)

- [387-字符串中的第一个唯一字符](articles\\算法\\387-字符串中的第一个唯一字符.md)

- [20-有效的括号](articles\\算法\\20-有效的括号.md)

- [09-用两个栈实现一个队列](articles\\算法\\09-用两个栈实现一个队列.md)

- 链表：

- [19-删除链表的倒数第N个结点](articles\\算法\\19-删除链表的倒数第N个结点.md)

- [206-翻转链表](articles\\算法\\206-翻转链表.md)

- [141环形链表](articles\\算法\\141环形链表.md)

- [234回文链表](articles\\算法\\234回文链表.md)

- 树：

- [543-二叉树最大直径](articles\\算法\\543二叉树最大直径.md)

- [11-盛水最多的容器](articles\\算法\\11-盛水最多的容器.md)

- 动态规划：

- [70-爬楼梯](articles\\算法\\70-爬楼梯.md)

- [53-连续最大子序和](articles\\算法\\53-连续最大子序和.md)

- 回溯：

- [46-全排列](articles\\算法\\46-全排列.md)

展示效果：

4.3、导航栏

新建一个 _navbar.md 文件，写入：

* [技术博客](https://rain.baimuxym.cn/)

* [Github地址](https://github.com/DogerRain/LearnJavaToFindAJob)

展示效果：

4.4、首页

新建一个 _coverpage.md 文件，写入：

# LearnJavaToFindAJob

### LearnJavaToFindAJob 是一个帮助Java程序员到找到一份工作的面试指南。

- Java常见的面试题

- MySQL、MQ、Nginx等中间件

- 计算机网络、操作系统

- 高频算法

- 大厂原题

- 项目经验

- 简历

👀 本站总访问量 次

| 🐒本站访客数人次

[开始阅读](/README.md)


设置完后再打开，就发现封面变了：

体验地址：