让你的Hexo博客支持远程编辑

## Update(2022.3.1) - 补全了一些失效的图片，删除了一些无用广告 PS：由于这篇博客写的时间太过久远，我也在一两年前就没有用过 Hexo 了，不保证这篇博文在现在依然有参考价值 ## Update(2019.6.9) - 因为写的时候疏忽了，发现了一些小问题。 1、在 $hexo-admin$ 的脚本中，把原来的： ```shell #!/usr/bin/env sh hexo clean hexo g ``` 改成了： ```shell #!/usr/bin/env sh hexo g 【hexo d】 ``` 因为如果先在 `hexo clean` 了一遍后，在进行 `hexo g` 的过程中将无法访问网站，因为 `public` 目录已经被请了。 `【hexo d】` 虽然我们已经使用了自己的服务器，不再使用 Github 了，但是鉴于有些读者会使用诸如 `baidu-url-submitter` 之类基于 `hexo d` 的插件，所以在这里给大家提示一下。 2、全文格式规范化。 ------ - 我其实早在一个月前就已经基本上实现了这一功能，但是因为各种原因咕咕咕到了现在 $qwq$ 。 ------ - 看到这个标题是不是特别激动呢？？但是我有很多注意事项先要说一下。 - 在我的 $Blog$ 食用以获得更好的用户体验（[本文链接](https://www.17shou.vip/让你的Hexo博客支持远程编辑/)） 优点： 1. $RT$ ，能实现远程编辑。 2. 能让网站访问速度更快，因为部署在自己的服务器上。 缺点： 1. 需要一个服务器，我推荐阿里云的轻量级学生机（ 114 元/年） PS：我真的没有打广告啊~~ 2. 需要域名备案，需要成年人进行办理（也就是让家长帮助备案），审核时间在 7 天左右。 3. 控制台页面可能对某些人来说有点丑。。。  4. 安装过程可能有点复杂。 - 在这一功能方面，可能 $Wordpress$ 和 $Typecho$ 能做的更好，但它们也一样需要服务器和域名备案。如果您认为不想再去重新搞个 $Wordpress$ 或者 $Typecho$ ，又想实现远程编辑这一功能的话，就可以进行这篇教程了！ 正文分割线$\Downarrow \Downarrow $ ------ ## 零、教程使用 - 防止有些人根据自己情况要填的东西直接 $Copy$ 命令，忘记修改了，我会在需要自己填的地方打上 `【】` 。比如一个地方要填密码，我会写 `【密码】` ，记得自己进行替换。 ## 一、初步准备 1. 现在第一步要做的事就是购买服务器了，如果已有服务器可以跳过。在这里，我推荐阿里云云翼计划的学生机（[购买地址](https://promotion.aliyun.com/ntms/act/campus2018.html)），我建议用轻量级的，因为有 $5M$ 带宽， $1000$ GB的流量不用担心不够用，我用了两个月连 1 GB都没有用完 $qwq$ 。  记得在预装环境那里选择 `Ubuntu 16.04 64位` ，当然 `CentOS` 理论上也可以，但是我没有试过。我刚开始选择 `Ubuntu` 是因为以后可能还可以用来装个 $STYOJ$ 什么的。~~有了服务器是不是感觉自己NB了很多？~~ 2. 现在先设置一下服务器的连接密码，在阿里云的控制台中按照下图进行操作$\Downarrow \Downarrow$  3. 现在下载服务器的命令行工具 $Xshell$ 和 $Xftp$ ，去百度一下官网，然后官网有个人免费版本下载（[链接](https://www.netsarang.com/zh/free-for-home-school/)），输入邮箱，然后会把软件下载链接邮箱发给你~~（我也不知道为什么这么复杂）~~，或者你直接在什么软件助手下也可以，不过可能不是最新的。 现在开始连接服务器，安装完两个软件，先打开 $Xshell$ ，新建会话：  然后写上服务器公网 $IP$ ，输上密码，设置连接失败自动重连（因为我们会重启服务器）：   没有问题的话，应该就可以连上去了。如果连不上去，在控制台检查一下服务器的防火墙设置， 看看22端口有没有打开，如果没有，就把 `80 443 4000 22 8888` 端口一起打开。这个应该有自动设置的，除了4000端口，这个端口是用来给 $Hexo-admin$ 开放的。 ## 二、配置服务器环境 - $emm$ ，我玩了两个月服务器，竟然不知道**宝塔**这个控制面板 $qwq$ 。本来已经写了一些了，后来发现这个对新手玩家十分的友好，所以为了大家方便，~~我把原来的全删了 QAQ~~ （差点全删，一些不想安装宝塔的$dalao$也可以通过下一部分配置服务器）。 ### 宝塔版 1. 首先安装**宝塔控制面板**，可能要几分钟时间： ```shell wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ``` 2. 在命令行上应该出现了 3 行控制面板进入入口和账号密码，用这个在浏览器打开控制面板（如果无法访问，请检查在服务器运营商的控制台的防火墙中有没有开放 `8888` 端口） 3. 进入面板后应该会让你安装一键包，直接安装即可，安装完在`软件商店`里面安装 `Nodejs`  4. 打开 $Xshell$ ，安装 $Nodejs$ 和 $Git$ ，这两个东西不在一键包里面： ```shell sudo apt-get install git sudo apt-get install nodejs sudo apt install nodejs-legacy ``` 5. 安装 $Hexo$ ： ```shell npm install -g hexo npm install hexo-server --save ``` 6. 根据自己个人喜好，调整一下面板的名字、接入接口、用户名、密码等。  7. 在宝塔的安全中开放端口：`80 443 4000 22 8888` ------ ### 非宝塔版 - 现在的服务器应该是很纯净的，需要安装一些普通的东西，如 $nginx$ ， $git$ 还有 $hexo$ 等。在这一部分，您可以放心的 $Copy$ 命令行。 1. 安装 $Git$ ： ```shell sudo apt-get install git ``` 2. 安装 $Nodejs$ ： ```shell sudo apt-get install nodejs sudo apt install nodejs-legacy sudo apt install npm ``` 3. 安装 $nginx$ ： ```shell sudo apt-get install nginx ``` 4. 安装 $Hexo$ ： ```shell npm install -g hexo npm install hexo-server --save ``` 5. 设置开机自启：我忘了 $qwq$ ------ ## 三、在本地安装 $Hexo-admin$ 1. 在本地的 $hexo$ 文件夹中 `Git Bash` ，这个在刚开始搭的时候应该已经装过 $Git$ 了，如果没有可以看以前的日报。 输入如下命令（**现在是本地端！！**），安装 $Hexo-admin$ ： ```shell npm install --save hexo-admin ``` 2. 现在开始配置 $Hexo-admin$ ： 打开本地 $server$ ： ```shell hexo s ``` 在浏览器中打开 `http://localhost:4000/admin`  现在应该可以看到 $Hexo-admin$ 的界面了，应该不需要输入用户名和密码的。所以说现在要设密码，在 `Settings` 中打开 ` Setup authentification here` ：  然后填写用户名和密码：  现在复制下面生成的代码，复制到 `hexo` 根目录下的 `_config.yml` 中，直接放在最下面即可。 把上面的代码复制后还要再加一段，这是后面要设置一键部署脚本的路径，记得与上面保持代码缩进！！ ``` deployCommand: './Script/Depoly.sh' ```  然后保存。 3. 现在点击 $Xshell$ 上方工具栏打开 $Xftp$ ，把自己的整个$hexo$文件夹上传到服务器 `\usr\local` 目录，把 $hexo$ 文件夹名字改为 `Blog` 。（目录和名字可以自己随便改，但是一定要保证后面的文件路径不要填错） 4. 在自己的服务器上安装 $Hexo-admin$ ： ```shell cd /usr/local/Blog npm install --save hexo-admin ``` 5. 现在是比较关键的一步了，这决定您能否实现浏览器一键部署！为了让你们方便，我直接写几段代码，自己复制即可（要分开复制！！）。 先进入$Blog$文件夹，新建文件夹，创建一键部署脚本： ```shell cd /usr/local/Blog mkdir Script nano Depoly.sh ``` 编辑脚本： ```shell #!/usr/bin/env sh hexo g 【hexo d】 ``` PS：这里不用 `hexo clean` ，然后根据自己需要，添加 `hexo d` 。如果先在 `hexo clean` 了一遍后，在进行 `hexo g` 的过程中将无法访问网站，因为 `public` 目录已经被请了。 `【hexo d】` 虽然我们已经使用了自己的服务器，不再使用 Github 了，但是鉴于有些读者会使用诸如 `baidu-url-submitter` 之类基于 `hexo d` 的插件，所以在这里给大家提示一下。 `Ctrl+X` 退出编辑。 设置可执行权限： ```shell chmod +x Depoly.sh ``` 6. 然后设置 `hexo s` 开机自启： 找到 `Ubuntu` 的系统自启文件 `rc.local` ： ```shell cd /etc/rc.local nano rc.local ``` 复制代码： ```shell #!/bin/sh -e /MyScript/hexo-sever.sh exit 0 ``` `Ctrl+X` 退出。 在写一个自己的启动脚本： ```shell cd / mkdir MyScript cd MyScript nano hexo-sever.sh ``` ```shell #!/bin/bash cd /usr/local/Blog hexo s ``` `Ctrl+X` 退出。 设置可执行权限： ```shell chmod +x hexo-sever.sh ``` 7. 现在重启一下服务器，在浏览器输入`http://【服务器公网IP】:4000/admin`，看看能不能上去，如果能，就说明成功了。 ------ ## 四、使用 $Nginx$ 代理 - 为什么要使用 $Nginx$ 来代理呢？直接用 `hexo s` 不就可以了吗？？因为 `hexo s` 的服务效率太低了，所以要使用 $Nginx$ 。 ### 宝塔版 1. 打开宝塔面板，在左侧点击网站，添加网站 2. 如图进行配置：  3. 在进行一些其他的配置：  4. 在你的域名运营商那里设置 $DNS$ 解析：  5. 输入域名，没有问题的话应该可以访问了！！  ### 非宝塔版 - 原先也没写多少，就给泥萌一个配置文件吧： ```shell server { listen 80; server_name www.17shou.vip 17shou.vip; root /usr/local/Blog/public; location / { index index.html index.htm; } } ``` - 至于怎么 $SSL$ 和强制 $https$ ，~~我在安装宝塔的时候毁了我原先的nginx配置文件`nginx.conf`，所以我原来的就放不出来了 qwq~~（好吧，其实我发现还在那里） - $SSL$+强制$https$： ```shell server { listen 443; server_name www.17shou.vip 17shou.vip; ssl on; index index.html index.htm; # 这里是证书的pem和key文件的目录，根据自己的修改！！ ssl_certificate cert/www.17shou.vip.pem; ssl_certificate_key cert/www.17shou.vip.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; root /usr/local/Blog/public; location / { index index.html index.htm; } } server { # 因为https是443端口，所以80端口的任务就是跳到443端口去 listen 80; server_name www.17shou.vip 17shou.vip; rewrite ^(.*)$ https://$host$1 permanent; } ``` ------ ## Q&A Q：为什么我不能访问 $hexo-admin$ ？？ A：可能因为你没开放4000端口，宝塔和服务器运营商那里都要开放端口！！ Q：为什么我不能使用域名访问？？ A：如果端口没有任何问题的话，可能是备案问题，按照服务器运营商的操作去备案，个人认为阿里云是最方便的，自己扫一遍脸，写个备案单就可以了，所以刚开始我建议阿里云$qwq$ ------ - 参考资料：[如何优雅地发布$Hexo$博客](https://www.jianshu.com/p/68e727dda16d) - 还有什么问题可以随时问我，由于作者我太菜了，可能会遗留下很多问题，我会尽快解决！