最详细的docsify+nginx服务器端配置教程

2021-09-03 10:45:31

建站，but how?

前言

当前博客框架太多太多，但是大部分框架都偏离了主题：写作。Docsify可以直接编写markdown文件，轻松实现基于文档的个人博客部署。

但是当前docsify接受度远远不如hexo、word press等框架，导致很多问题无法快速找到答案。基于静态网站托管，或者直接托管到github page的方案非常多，但是github page国内访问速度极慢。

本文基于Ubuntu云服务器+Windows WSL Ubuntu + docsify + nginx搭建私有服务器端的文档博客。

准备工作

写作环境

第一种最常用的方法是用git+github完成，但是我更希望我的文件保存在我自己的机器上。
写作环境我选择在本机PC端，写完之后推送到云服务器端即可。这里以Windows wsl ubuntu为例（涉及云服务器的应用，使用wsl作为本机环境会非常方便。）。

首先登陆腾讯云控制台，管理云服务器，新建密钥，会自动下载一个私钥，这时候公钥会自动部署到云服务器，不用操心。将下载的私钥在Windows资源管理器中复制到Linux子系统的文件系统中（这就是WSL2强大之处！），复制到子系统的/home/yourusername/.ssh/,用户名自己填写相应名称。

接着在wsl终端编写一个shell脚本，进入/home/yourusername/目录，将下述内容写入脚本sudo vim ssh.sh。
ssh -i "/home/luvinda/.ssh/luvinda" ubuntu@xxx.xxx.xxx.xxx,其中/home/luvinda/.ssh/是私钥保存路径，最后的luvinda是私钥文件名。Ubuntu是服务器用户名，后面的是服务器公网ip。

这样下次登陆只需要在ssh.sh的保存路径下面执行sh ssh.sh就可以用私钥直接登陆服务器了。

安装rsync用于文件同步到云服务器。
接着在同样位置新建脚本sudo vim rsync.sh,将下述内容写入：
rsync -rlvz --delete ./blog/ ubuntu@124.223.30.36:/home/ubuntu/blog/，第一个./blog是你准备在本机写博客的地方，后面的地址是你的博客同步到服务器的地方。
以后直接在脚本所在目录执行sh rsync.sh可以自动将本机的最新版本推送到服务器相应位置。

服务器环境配置

sudo apt update && sudo apt upgrade更新系统
sudo apt install nodejs安装node.js环境
sudo apt install npm安装npm包管理
sudo npm i docsify-cli -g注意！官方文档中没有sudo，但是腾讯云环境中没有sudo安装会出错

到这里，服务器的环境配置就完成了，极其简单。
下面是相对复杂的nginx配置环节。
首先安装nginx（大部分服务器都预装了）sudo apt install nginx

Nginx配置！！！

此处为重点，大部分教程都没有详细讲述如何配置nginx。
cd /etc/nginx
你会进入nginx的文件夹，接着编辑此文件夹中的nginx.conf
务必先备份！！！防止改错了回不来！！！
sudo cp nginx.conf ./backup.conf,这样就拷贝了一份备份在当前目录，名称为backup.conf
sudo vim nginx.conf
**注意，不要全删完！**原文件开头应该是这样：

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##
        在这里！！！！！
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;
后面的省略，还有很多，务必不要删除！

在我标注的地方（在这里！！！！！），将下面的代码插入进去，注意，server name应当输入你自己的服务器IP地址，或者你的域名（需要购买域名并备案），alias应当输入你实际上服务器存储博客的路径。

http {

        server {
        listen 80;
        server_name  124.223.30.36;

        location / {
        alias /home/ubuntu/blog/;
        index index.html;
        }
        }

接着不要保存退出！将第一行的user www-data;,不管你那里是什么，统一改为user root，否则后面会出现403 forbidden.

保存退出，命令行输入：sudo service nginx restart
去浏览器输入你的IP地址，理论上你会看到主页了！

博客编写

基本配置

这里建议直接参考官方文档，只需要注意几个小细节就行了：官方文档

说实话，官方文档写的不够细节，很多地方漏标点符号什么的，然而这些标点符号漏了就运行不了。但是我认为大部分用这些框架的都是不想自己学前端的，这些细节估计很难注意到把？

举个例子，下面是官方文档中关于侧边栏的教程：

<script>
  window.$docsify = {
    loadSidebar: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

但是实际上这是错的，loadSidebar: true后面必须加逗号，否则运行不了。
如何用这些代码呢？
你执行初始化之后会生成一个index.html，只需要把示例里面的loadSidebar: true,插入到window.$docsify = {下面一行就行。
接着把实例里面最后一行的
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
插入到index.html的最后一行，后面想添加其他功能也是一样的。

其他地方官方文档已经讲的非常详细了，建议大家直接看官方文档，现在网上能搜到的教程也都是翻译的官方文档。
注意，官方文档是有中文的！右上角可以看到thanslation。

写博客

这才是最难的地方。大部分人花了几个月时间自己搭建了网站，终于搭建好的时候，精力激情已经消耗完了。
但是按照我的教程去使用docsify，大概率可以在一天之内搞定。

码农公寓