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

2022/1/7 7:05:10

本文主要是介绍最详细的docsify+nginx服务器端配置教程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

建站,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,大概率可以在一天之内搞定。

后面写博客我建议是在wsl上写,写好了直接用准备工作中的脚本同步到你的服务器,所有操作都在你的PC端完成。



这篇关于最详细的docsify+nginx服务器端配置教程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程