Docsify 是一個動態生成文件網站的工具。不同於 GitBook、Hexo 的地方是它不會將 `.md` 轉成 `.html` 檔案，所有轉換工作都是在執行時進行。

這非常實用，如果只是需要快速的搭建一個小型的文件網站，或者不想因為生成的一堆 `.html` 檔案“汙染” commit 記錄，只需要建立一個 `index.html` 就可以開始寫文件，可以直接部署在 GitHub Pages，也可以部署在雲上。

本文將介紹如何在[滴滴雲](https://blog.didiyun.com)上部署 Docsify 。

# 一、前置條件
在安裝 Docsify 之前，需要先購買一臺 DC2 雲伺服器，並安裝 Node 環境。如果已經安裝成功，可直接跳至安裝 Docsify 部分。

### 1.1 購買雲伺服器
首先我們需要有一臺雲伺服器來部署服務，可在[滴滴雲](https://blog.didiyun.com)上進行購買。具體的購買步驟可參考[幫助文件](https://help.didiyun.com/hc/kb/article/1145869/)。

下面我們看到的是已經購買好的雲伺服器。配置為 **2 核 4G**, 系統為 **CentOS7.6** 。

![](http://img.blog.itpub.net/blog/2018/12/26/4f1435abf4329187.png?x-oss-process=style/bb)

購買完畢後，遠端登入伺服器，進行服務安裝的安裝與部署。以 dc2-user 的身份登入後，可以透過 `sudo su` 來切換至管理員身份進行安裝。

### 1.2 安裝 Node
我們將 Node 服務安裝在 `/usr/local` 目錄下：
```bash
## 下載node
cd /usr/local/src
wget https://nodejs.org/dist/v8.9.0/node-v8.9.0-linux-x64.tar.xz
## 解壓
tar xf node-v8.9.0-linux-x64.tar.xz
cd /usr/local
## 重新命名
mv src/node-v8.9.0-linux-x64 node

## 將node新增至path
vi ~/.bashrc
export NODE_HOME=/usr/local/node
export PATH=$NODE_HOME/bin:$PATH
source ~/.bashrc

## 安裝成功
node -v  // 安裝成功會顯示Node版本

```
# 二、安裝 Docsify
### 2.1 安裝 Docsify
```
npm i docsify-cli -g
```
### 2.2 初始化文件目錄
```
docsify init ./docs // 會在當前目錄下建立docs目錄，裡面的內容將會作為文件內容展示
```
可以看到，文件目錄下有這兩個檔案：
```
[root@1-1-1-1 docs]# ls 
index.html  README.md
```
其中 `index.html` 是入口檔案，`README.md` 會做為主頁內容渲染。
### 2.3 預覽
執行一個本地伺服器透過 Docsify Serve 可以方便的預覽效果，而且提供 LiveReload 功能，可以讓實時的預覽。預設訪問 http://ip:3000 。
```
docsify serve docs
```

![](http://img.blog.itpub.net/blog/2018/12/26/293e2d50a5b31d07.jpeg?x-oss-process=style/bb)

文件內容豐富之後，可達到[官網](https://docsify.js.org/#/?id=docsify)類似效果。

![](http://img.blog.itpub.net/blog/2018/12/26/fcb203398557e544.jpeg?x-oss-process=style/bb)

# 三、使用 Nginx 代理
實際工作中，我們很多服務都是配在 Nginx 裡，方便使用 Nginx 的負載均衡、許可權控制等功能。

### 3.1 Nginx 安裝
可參考 [CentOS7 安裝 Nginx 的兩種方式](https://blog.didiyun.com/index.php/2018/11/16/centos7-nginx/) 這篇文件在[滴滴雲](https://blog.didiyun.com)上安裝 Nginx。

### 3.2 Nginx 配置
下面是一個 Nginx 配置的示例，注意自己的 server name 需要進行替換：
```
server {
      listen 80;
      server_name your_server_name; ## 這裡需要寫自己的伺服器名稱

root /usr/libra/docs; ## docsify建立的目錄
      set $node_port 3000;

index index.js index.html index.htm;

location / {
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://127.0.0.1:$node_port$request_uri;
        proxy_redirect off;
      }
    }
```
配置完成後，我們就可以透過 80 埠訪問文件服務了。

文件系統有很多，GitBook 也是非常好的文件工具，可參考 [在滴滴雲 DC2 上基於 Gitbook+Nginx 構建輕量級文件管理服務](https://blog.didiyun.com/index.php/2018/11/15/dc2-gitbooknginx/) 這篇文件搭建 GitBook 服務。

基於滴滴雲搭建輕量文件網站生成工具 Docsify

相關文章