当前博客框架太多太多,但是大部分框架都偏离了主题:写作。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。
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端完成。