docsify快速部署搭建个人知识库（支持本地、服务器、虚拟机运行）

素颜马尾好姑娘i 2024-04-24 14:36 2阅读 0赞

> 🏠 [服务器与网站部署知识体系目录][Link 1]

#### 文章目录 ####

*  1.docsify介绍与文档
 *   *  1.1 基本介绍
     *  1.2 官网
     *  1.3 github开源社区
     *  1.4 官方中文文档
 *  2.windows本地运行
 *   *  2.1安装nodejs
     *  2.2 npm安装 docsify
     *  2.3 初始化知识库
     *   *  🍀 新建文件夹
         *  🍀 初始化
     *  2.4 本地运行与访问
 *  3.docsify基础操作
 *   *  3.1 内容修改
     *  3.2 网站主题修改
     *  3.3 开启封面与内容设置
     *  3.4 开启导航栏
 *  4.部署至服务器
 *   *  4.1 安装 docker
     *   *  🍀 基于centos的安装
         *  🍀 基于ubuntu
     *  4.2 配置国内加速器
     *   *  4.2.1 配置阿里云加速器
         *   *  🍀 找到相应页面
             *  🍀 创建 docker 目录
             *  🍀 创建 daemon.json 文件
             *  🍀 重新加载服务配置文件
             *  🍀 重启 docker 引擎
         *  4.2.2 配置网易云加速器
     *  4.3 创建nginx配置文件
     *  4.4 上传 docsify 文件
     *  4.5 运行nginx容器
     *  4.6 访问测试

> ![image-20230403212717878][]
> 
> ![image-20230403212701141][]  
>   
>   
> 我们先在本地运行体会与获取 docsify 结构，后面再部署到服务器上运行。
> 
> 部署一个个人知识库只需要按照本文的指令直接 `cv` 即可。但请注意打开服务器防火墙的 **80** 端口。

## 1.docsify介绍与文档 ##

### 1.1 基本介绍 ###

Docsify即时生成您的文档网站。与 GitBook 不同，它不会生成静态 html 文件。相反，它会**智能地加载和解析您的 Markdown 文件**，并将它们显示为网站。

*  没有静态构建的 html 文件
 *  简单轻便
 *  智能全文搜索插件
 *  多个主题
 *  有用的插件接口
 *  表情符号支持
 *  与 IE11 兼容
 *  支持服务器端渲染

### 1.2 官网 ###

🏠 [docsify官网][docsify]

### 1.3 github开源社区 ###

🏠 [docsifyjs/docsify: 🃏 A magical documentation site generator. (github.com)][docsifyjs_docsify_ _ A magical documentation site generator. _github.com]

### 1.4 官方中文文档 ###

🏠 [docsify中文文档][docsify 1]

## 2.windows本地运行 ##

### 2.1安装nodejs ###

🏠 下载地址：[Node.js (nodejs.org)][Node.js _nodejs.org]

![image-20230403213607915][]

下载完成之后双击安装包，即可进行安装。安装完成之后，我们打开 cmd 验证一下安装状态。

node -v

![image-20230403213800464][]

### 2.2 npm安装 docsify ###

# 1.安装
    npm install -g docsify-cli
    
    
    # 2.校验成功，查看版本
    docsify -v

### 2.3 初始化知识库 ###

#### 🍀 新建文件夹 ####

在这里我新建了一个名为 `knowledgeBase` 的文件夹。

![image-20230403184051934][]

#### 🍀 初始化 ####

在 `knowledgeBase` 文件夹下 cmd 进行初始化：

docsify init

![image-20230403184346489][]

![image-20230403184435949][]

### 2.4 本地运行与访问 ###

在 knowledgeBase 文件下执行：

docsify serve

![image-20230403184610349][]

🏠 访问：http://localhost:3000

![image-20230403184717490][]

## 3.docsify基础操作 ##

> 这里只列举部分，更多操作前往官方文档：[docsify文档][docsify 1]

### 3.1 内容修改 ###

实际上，你只需要修改 knowledgeBase 文件夹下的 `README.md` 文件即可。因为实际上，README.md 就是展示的内容。例如将该文件修改为如下内容，修改完成后记得**先保存再访问**：：

# 1.我卑微的喜欢过你
    
    从前我觉得，爱一个人就是要在一起，所以百分百的付出，不遗余力地挽回，最后彻彻底底的受伤。知道后来我才明白，<font color='red'>爱不是一个人的死撑到底，而是两个人的一起努力</font>，我可以很爱你，也可以没有你。
    
    # 2.我还记得你
    
    我在想，一年后，两年后，五年后，十年后，三四十年后我们会是什么样子呢？
    
    我希望好多好多年后，我还能再遇见你。你白发苍苍，我还是会走向你。我会告诉你，**我还记得你**。

再次查看界面：

![image-20230403190556490][]

### 3.2 网站主题修改 ###

在 knowledgeBase 文件夹下的 `index.html` 文件中进行修改：

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">

🏠 官方主题地址：[docsify CDN by jsDelivr - A free, fast, and reliable Open Source CDN][docsify CDN by jsDelivr - A free_ fast_ and reliable Open Source CDN]

![image-20230403191006821][]

我们可以测试修改为 `dark.css` 样式，修改完成后记得**先保存再访问**：

![image-20230403191155503][]

### 3.3 开启封面与内容设置 ###

在 knowledgeBase 文件夹下的 `index.html` 文件中进行修改：

![image-20230403192110291][]

**保存修改后**再次访问：

![image-20230403192142223][]

这是一个空白的封面，我们需要设置封面内容。

在 knowledgeBase 文件夹下新建一个 `_coverpage.md` 文件，**编写markdown内容并保存**：

# 我爱过你
    
    [**开启阅读**](README.md)

注意这个 `[**开启阅读**](README.md)` 是一个相对路径的链接，会直接帮我们跳转到 `README.md` 的内容显示路径。

![image-20230403192731846][]

点击这个 开启阅读 链接后，会跳转到 README.md 内容路径，想要再次回到上图的主意，在 `README.md` 文件中加上这样一句：

[**回到主页**](http://localhost:3000)

### 3.4 开启导航栏 ###

在 knowledgeBase 文件夹下的 `index.html` 文件中进行修改：

![image-20230403194945814][]

此时在主页上依旧没有导航栏，我们需要在 knowledgeBase 文件夹下新建一个 `_navbar.md` 文件，可以编写如下内容并**保存**：

- **学习导航**
      - [**哔哩哔哩**](https://www.bilibili.com/)
      - [**GitHub中文社区**)](https://www.githubs.cn/post/what-is-github)
    - **镜像仓库**
      - [**Docker官方镜像中心**](https://hub.docker.com/)
      - [**Maven官方镜像仓库**](https://mvnrepository.com/)

![image-20230403202644791][]

## 4.部署至服务器 ##

### 4.1 安装 docker ###

#### 🍀 基于centos的安装 ####

1.  安装yum-utils
    
        sudo yum install -y yum-utils
2.  从国内服务器上下载docker
    
        sudo yum-config-manager \
            --add-repo \
            http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
3.  安装docker
    
        sudo yum install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
4.  验证是否成功
    
        sudo docker --version

#### 🍀 基于ubuntu ####

1.  安装需要的包
    
        sudo apt-get update
2.  安装依赖包
    
        sudo apt-get install \
           apt-transport-https \
           ca-certificates \
           curl \
           gnupg-agent \
           software-properties-common
3.  添加 Docker 的官方 GPG 密钥
    
        curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
4.  设置远程仓库
    
        sudo add-apt-repository \
           "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
          $(lsb_release -cs) \
          stable"
5.  安装 Docker-CE
    
        sudo apt-get update
        
        sudo apt-get install docker-ce docker-ce-cli containerd.io
6.  验证是否成功
    
        sudo docker --version

### 4.2 配置国内加速器 ###

国内镜像中心常用的为阿里云与网易云，选择其中一个加速器进行配置即可。在本地 Docker 中指定要使用的国内加速器地址后，就可以直接从国内镜像中心下载镜像了。

#### 4.2.1 配置阿里云加速器 ####

##### 🍀 找到相应页面 #####

若要配置阿里云加速器，必须首先要有阿里云的账号。登录阿里云后，打开阿里云的容器镜像服务页面 https://cr.console.aliyun.com ，然后找到如下页面，可以查看到你的 `registry-mirrors`

![image-20230403005624117][]

##### 🍀 创建 docker 目录 #####

sudo mkdir -p /etc/docker

##### 🍀 创建 daemon.json 文件 #####

注意，该 json 数据中的 URL 地址是与用户登录账号绑定的，不同的用户所生成的地址是不同的。

sudo vim /etc/docker/daemon.json

{
        
      "registry-mirrors": ["https://******.mirror.aliyuncs.com"]
    }

##### 🍀 重新加载服务配置文件 #####

sudo systemctl daemon-reload

##### 🍀 重启 docker 引擎 #####

sudo systemctl restart docker

#### 4.2.2 配置网易云加速器 ####

配置网易云加速器，无需注册网易云用户。只需将前面的 daemon.json 文件中的那个URL 替换为如下 URL 即可。

{
        
      "registry-mirrors": ["http://hub-mirror.c.163.com"]
    }

当然，替换过后，仍需重新加载服务配置文件，重启 docker 引擎。

### 4.3 创建nginx配置文件 ###

# 1.创建多级目录
    sudo mkdir -p /knowledgebase/nginx/conf/ /knowledgebase/nginx/html/service/
    
    # 2.创建 nginx.conf 文件
    sudo vim /knowledgebase/nginx/conf/nginx.conf

#user  root;
    error_log  /var/log/nginx/error.log notice;
    worker_processes  1;
    
    pid        /var/run/nginx.pid;
    
    events {
      worker_connections  1024;
    }
    http {
      include       mime.types;
      default_type  application/octet-stream;
      sendfile        on;
      keepalive_timeout  65;
    
        
      server {
          listen       80;
          # 可进行域名绑定
          server_name  localhost;
          location / {
             root   html/service;
             index  index.html index.htm;
          }
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   html;
          }
      }
    }

### 4.4 上传 docsify 文件 ###

我们在windows本地运行时，在 knowledgebase 目录下的文件：

![image-20230403211347143][]

我们将这五个文件全部上传到 /knowledgebase/nginx/html/service/ 目录下：

![image-20230403212001007][]

### 4.5 运行nginx容器 ###

sudo docker run --name knowledgenginx \
    -v /knowledgebase/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
    -v /knowledgebase/nginx/html/service:/etc/nginx/html/service \
    -p 80:80 \
    -d nginx:1.23.4

### 4.6 访问测试 ###

> 注意需要打开服务器防火墙 80 端口。

🏠 访问：http://【服务器ip】

![image-20230403212621623][]

[Link 1]: https://blog.csdn.net/qq_62982856/article/details/133744945
[image-20230403212717878]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/849390b017874132b42967137734ce26.png
[image-20230403212701141]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/4b2894ed5507499cb4da695a59bf0757.png
[docsify]: https://docsify.js.org/#/
[docsifyjs_docsify_ _ A magical documentation site generator. _github.com]: https://github.com/docsifyjs/docsify/
[docsify 1]: https://docsify.js.org/#/zh-cn/
[Node.js _nodejs.org]: https://nodejs.org/en
[image-20230403213607915]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/15129ae264aa4ac09efc5f6dfeb151af.png
[image-20230403213800464]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/e21b0346289a4022bebed7136988dcb4.png
[image-20230403184051934]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/da01119d94d54c28941461f3dd2036f5.png
[image-20230403184346489]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/28bff9f076cf43cf9e06d4a8d6cccafe.png
[image-20230403184435949]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/9507853fad93402e8165e205d2ea6934.png
[image-20230403184610349]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/71e110b1003a4532b4d0484fa74dd808.png
[image-20230403184717490]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/8238cb99ed024918900625a1d4f3f09a.png
[image-20230403190556490]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/a75f4e464323442f92e285d83cce924a.png
[docsify CDN by jsDelivr - A free_ fast_ and reliable Open Source CDN]: https://cdn.jsdelivr.net/npm/docsify@4/lib/themes/
[image-20230403191006821]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/0281e473e85145ce9c281bf54ad8478b.png
[image-20230403191155503]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/0b63ecbf6b6f4a8887dab361218b12b1.png
[image-20230403192110291]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/7690514788d84aeea61a437264af7580.png
[image-20230403192142223]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/100fcb8105914330b98b509b7e9558e5.png
[image-20230403192731846]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/4273131696484e65a72569699acd2809.png
[image-20230403194945814]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/905b982190b044d08722aa855ba8e2e4.png
[image-20230403202644791]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/77f4405c92e64d148b00f9d7ec6a1d2d.png
[image-20230403005624117]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/7bb0a2f4ed3c45be935c29b6c196859a.png
[image-20230403211347143]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/f34d994515384d1ca801ec5c526b068a.png
[image-20230403212001007]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/93f3b7a9d0344e329aaebfccadeb0c8a.png
[image-20230403212621623]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/4eb227cd5c284df496e8e87fe7dc0057.png