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

2019 年 5 月 12 日 星期日(已编辑)
1

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

  • 在我的 BlogBlog 食用以获得更好的用户体验(本文链接
  • 有很多注意事项先要说一下。

优点:

  1. RTRT ,能实现远程编辑。
  2. 能让网站访问速度更快,因为部署在自己的服务器上。

缺点:

  1. 需要一个服务器,我推荐阿里云的轻量级学生机( 114 元/年)

    PS:我真的没有打广告啊~~

  2. 需要域名备案,需要成年人进行办理(也就是让家长帮助备案),审核时间在 7 天左右。

  3. 控制台页面可能对某些人来说有点丑。。。

Hexo-admin.PNG

Hexo-admin.PNG
  1. 安装过程可能有点复杂。
  • 在这一功能方面,可能 WordpressWordpressTypechoTypecho 能做的更好,但它们也一样需要服务器和域名备案。如果您认为不想再去重新搞个 WordpressWordpress 或者 TypechoTypecho ,又想实现远程编辑这一功能的话,就可以进行这篇教程了!

正文分割线\Downarrow \Downarrow


零、教程使用

  • 防止有些人根据自己情况要填的东西直接 CopyCopy 命令,忘记修改了,我会在需要自己填的地方打上 【】 。比如一个地方要填密码,我会写 【密码】 ,记得自己进行替换。

一、初步准备

  1. 现在第一步要做的事就是购买服务器了,如果已有服务器可以跳过。在这里,我推荐阿里云云翼计划的学生机(购买地址),我建议用轻量级的,因为有 5M5M 带宽, 10001000 GB的流量不用担心不够用,我用了两个月连 1 GB都没有用完 qwqqwq

    这里有个红包,你领双方都可以收利,如果需要可以领一下。

    云翼计划.PNG

    云翼计划.PNG

    记得在预装环境那里选择 Ubuntu 16.04 64位 ,当然 CentOS 理论上也可以,但是我没有试过。我刚开始选择 Ubuntu 是因为以后可能还可以用来装个 STYOJSTYOJ 什么的。有了服务器是不是感觉自己NB了很多?

  2. 现在先设置一下服务器的连接密码,在阿里云的控制台中按照下图进行操作\Downarrow \Downarrow

    服务器密码设置.PNG

    服务器密码设置.PNG
  3. 现在下载服务器的命令行工具 XshellXshellXftpXftp ,去百度一下官网,然后官网有个人免费版本下载(链接),输入邮箱,然后会把软件下载链接邮箱发给你(我也不知道为什么这么复杂),或者你直接在什么软件助手下也可以,不过可能不是最新的。

    现在开始连接服务器,安装完两个软件,先打开 XshellXshell ,新建会话:

    新建会话.PNG

    新建会话.PNG

    然后写上服务器公网 IPIP ,输上密码,设置连接失败自动重连(因为我们会重启服务器):

    设置会话IP.PNG

    设置会话IP.PNG
    设置会话密码.PNG

    设置会话密码.PNG

    没有问题的话,应该就可以连上去了。如果连不上去,在控制台检查一下服务器的防火墙设置, 看看22端口有没有打开,如果没有,就把 80 443 4000 22 8888 端口一起打开。这个应该有自动设置的,除了4000端口,这个端口是用来给 HexoadminHexo-admin 开放的。

二、配置服务器环境

  • emmemm ,我玩了两个月服务器,竟然不知道宝塔这个控制面板 qwqqwq 。本来已经写了一些了,后来发现这个对新手玩家十分的友好,所以为了大家方便,我把原来的全删了 QAQ (差点全删,一些不想安装宝塔的dalaodalao也可以通过下一部分配置服务器)。
  • 如果想注册宝塔账号,直接点这里即可注册。(该链接能使本作者得到微小的回报,您还能得到0.99元一个月的专业版体验,如果您觉得本文写的不错,就当做是一种打赏吧!)

宝塔版

  1. 首先安装宝塔控制面板,可能要几分钟时间:

    wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh
  2. 在命令行上应该出现了 3 行控制面板进入入口和账号密码,用这个在浏览器打开控制面板(如果无法访问,请检查在服务器运营商的控制台的防火墙中有没有开放 8888 端口)

  3. 进入面板后应该会让你安装一键包,直接安装即可,安装完在软件商店里面安装 Nodejs

    宝塔一键包.jpg

    宝塔一键包.jpg
  4. 打开 XshellXshell ,安装 NodejsNodejsGitGit ,这两个东西不在一键包里面:

    sudo apt-get install git
    sudo apt-get install nodejs
    sudo apt install nodejs-legacy
  5. 安装 HexoHexo

    npm install -g hexo
    npm install hexo-server --save
  6. 根据自己个人喜好,调整一下面板的名字、接入接口、用户名、密码等。

    面板常规设置.png

    面板常规设置.png
  7. 在宝塔的安全中开放端口:80 443 4000 22 8888


非宝塔版

  • 现在的服务器应该是很纯净的,需要安装一些普通的东西,如 nginxnginxgitgit 还有 hexohexo 等。在这一部分,您可以放心的 CopyCopy 命令行。
  1. 安装 GitGit

    sudo apt-get install git
  2. 安装 NodejsNodejs

    sudo apt-get install nodejs
    sudo apt install nodejs-legacy
    sudo apt install npm
  3. 安装 nginxnginx

    sudo apt-get install nginx
  4. 安装 HexoHexo

    npm install -g hexo
    npm install hexo-server --save
  5. 设置开机自启:自己查百度 ( ^ _ ^ )


三、在本地安装 HexoadminHexo-admin

  1. 在本地的 hexohexo 文件夹中 Git Bash ,这个在刚开始搭的时候应该已经装过 GitGit 了,如果没有可以看以前的日报。

    输入如下命令(现在是本地端!!),安装 HexoadminHexo-admin

    npm install --save hexo-admin
  2. 现在开始配置 HexoadminHexo-admin

    打开本地 serverserver

    hexo s

    在浏览器中打开 http://localhost:4000/admin

    Hexo-admin.PNG

    Hexo-admin.PNG

    现在应该可以看到 HexoadminHexo-admin 的界面了,应该不需要输入用户名和密码的。所以说现在要设密码,在 Settings 中打开 Setup authentification here

    Hexo-admin设置密码.PNG

    Hexo-admin设置密码.PNG

    然后填写用户名和密码:

    hexo-admin配置代码.PNG

    hexo-admin配置代码.PNG
    现在复制下面生成的代码,复制到 hexo 根目录下的 _config.yml 中,直接放在最下面即可。

    把上面的代码复制后还要再加一段,这是后面要设置一键部署脚本的路径,记得与上面保持代码缩进!!

    deployCommand: './Script/Depoly.sh'
    _config粘贴代码.PNG

    _config粘贴代码.PNG

    然后保存。

  3. 现在点击 XshellXshell 上方工具栏打开 XftpXftp ,把自己的整个hexohexo文件夹上传到服务器 \usr\local 目录,把 hexohexo 文件夹名字改为 Blog 。(目录和名字可以自己随便改,但是一定要保证后面的文件路径不要填错)

  4. 在自己的服务器上安装 HexoadminHexo-admin

    cd /usr/local/Blog
    npm install --save hexo-admin
  5. 现在是比较关键的一步了,这决定您能否实现浏览器一键部署!为了让你们方便,我直接写几段代码,自己复制即可(要分开复制!!)。

    先进入BlogBlog文件夹,新建文件夹,创建一键部署脚本:

    cd /usr/local/Blog
    mkdir Script
    nano Depoly.sh

    编辑脚本:

    #!/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 退出编辑。

    设置可执行权限:

    chmod +x Depoly.sh
  6. 然后设置 hexo s 开机自启:

    找到 Ubuntu 的系统自启文件 rc.local

    cd /etc/rc.local
    nano rc.local

    复制代码:

    #!/bin/sh -e
    /MyScript/hexo-sever.sh
    exit 0
    `Ctrl+X` 退出。

    在写一个自己的启动脚本:

    cd /
    mkdir MyScript
    cd MyScript
    nano hexo-sever.sh
    #!/bin/bash
    cd /usr/local/Blog
    hexo s

    Ctrl+X 退出。

    设置可执行权限:

    chmod +x hexo-sever.sh
  7. 现在重启一下服务器,在浏览器输入http://【服务器公网IP】:4000/admin,看看能不能上去,如果能,就说明成功了。


四、使用 NginxNginx 代理

  • 为什么要使用 NginxNginx 来代理呢?直接用 hexo s 不就可以了吗??因为 hexo s 的服务效率太低了,所以要使用 NginxNginx

宝塔版

  1. 打开宝塔面板,在左侧点击网站,添加网站

  2. 如图进行配置:

    Nginx添加网站.PNG

    Nginx添加网站.PNG
  3. 在进行一些其他的配置:

    SSL证书.PNG

    SSL证书.PNG
  4. 在你的域名运营商那里设置 DNSDNS 解析:

    DNS解析.PNG

    DNS解析.PNG
  5. 输入域名,没有问题的话应该可以访问了!!

    没有问题.PNG

    没有问题.PNG

非宝塔版

  • 就给泥萌一个配置文件吧:

    server {
        listen 80;
        server_name www.17shou.vip 17shou.vip;
        root /usr/local/Blog/public;
        location / {
                index  index.html index.htm;
        }
    }
  • 至于怎么 SSLSSL 和强制 httpshttps我在安装宝塔的时候毁了我原先的nginx配置文件nginx.conf,所以我原来的就放不出来了 qwq(好吧,其实我发现还在那里)

  • SSLSSL+强制httpshttps
    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:为什么我不能访问 hexoadminhexo-admin ??

A:可能因为你没开放4000端口,宝塔和服务器运营商那里都要开放端口!!

Q:为什么我不能使用域名访问??

A:如果端口没有任何问题的话,可能是备案问题,按照服务器运营商的操作去备案,个人认为阿里云是最方便的,自己扫一遍脸,写个备案单就可以了,所以刚开始我建议阿里云qwqqwq


使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...