前言

博客一年多了，最开始是将服务部署到github页面，而github在全国各地的访问速度是天差地别，有的地方可访问，有的直接访问不了，为了解决网站访问速度问题，后面又将服务同步部署到Vercel[和Netlify。Netlify目前还在使用没有出问题，而vercel近年来IP屡次被墙，需要解析到自定义域名才能正常访问，即使这样在国庆节风控期间，解析到vercel的域名也出现了问题，域名应该是被劫持了总是跳江苏反诈页面，严重的时候所有地方的流量访问网站都直接跳转江苏反诈，后面稳定为只有江苏流量访问才会出问现跳转，尤其是wifi访问，手机流量访问好像不会出现跳转。对于江苏反诈页面的跳转，可以自行了解，并非跳转了就一定是有问题的网站。对于我这种情况，问题多数还是出在了把服务部署到被封的vercel上，vercel由于是免费的，可能和我同一节点的邻居在干啥坏事，部署了不好的服务，所以导致我这个邻站也被搞了。很久之前找到了比较简单的方法即使用docker把博客部署到服务器，只是一直有个问题（如何继续使用魔改后的样式）不知道如何解决。刚好乘vercel出问题的机会就尝试折腾下迁移。

前提条件：

  1. 已经部署过hexo博客，在本地电脑端有hexo博客根目录。
  2. 一台安装好docker和docker-compose以及nginx proxy manage、hexo的VPS
  3. 一枚域名并解析到服务器

大致步骤：

  1. 使用docker在vps上安装好hexo博客
  2. 把hexo博客本地根目录的_config.butterfly.yml,config.yml,db.json,package.json,`package-lock.json，.gitignore这几个文件及source和themes这两个文件夹上传到服务器hexo目录下的blog文件夹下。（这里是butterfly主题，其他主题类似应该）
  3. 进入docker容器里面操作
1
2
3
4
5
6
docker exec -it hexo bash  #进入hexo容器里面
npm install hexo-renderer-pug hexo-renderer-stylus --save #butterfly主题需要安装这两个插件，主题才能正常显示
npm install #安装模块
hexo clean
hexo g    #hexo clean 和hexo g 必须执行，否则hexo后台无法显示。而且后期如果更改博客的配置文件需要再次执行这两条命令，改动才会生效。
exit #退出容器
  1. 重启服务
1
docker-compose restart

到这里就迁移成功了，其实和本地的操作差不多，只不过对于docker，若想主题生效需要到docker容器里面进行操作。虽然有后台，但是非常简陋，很多样式都无法正常在后台显示，可以简单使用下。后续写文章可以在本地上使用typora写，写好后再上传到服务器的网站根目录\source\_posts文件夹下，再执行docker-compose restart即可更新不需要执行docker-compose restarat，程序会自动判断文件是否发生变化，如果变化便会自动渲染.md文件即更新操作。

与网上很多其他的迁移方法不同，网上很多方法可以实现同步推送更新文章到github和服务器。而这里使用的docker方法是分开的。

目前使用的博客站点：

  1. githubpage：https://yilanbk.com
  2. netlifly页面：https://blog.yilan.uk
  3. 服务器端(此次部署）：https://blog.yilanbk.com

被劫持的域名：tjyll.com

详细教程

VPS配置（debian系统）

如果是新系统，先配置下基础环境

  • 系统软件包更新及安装常用软件
1
2
3
4
5
sudo -i # 切换到 root 用户

apt update -y  # 升级 packages

apt install wget curl sudo vim git -y  # Debian 系统比较干净，安装常用的软件
  • 安装docker
1
2
3
4
5
6
7
8
9
# 非大陆服务器安装命令
wget -qO- get.docker.com | bash
docker -v  #查看 docker 版本
systemctl enable docker  # 设置开机自动启动

# 国内服务器安装命令
curl -sSL https://get.daocloud.io/docker | sh
docker -v  #查看 docker 版本
systemctl enable docker  # 设置开机自动启动
  • 安装docker-compose
1
2
3
4
5
6
7
8
9
# 非大陆服务器安装命令
sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
docker-compose --version  #查看 docker-compose 版本

# 国内服务器安装命令
curl -L https://get.daocloud.io/docker/compose/releases/download/v2.1.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose
docker-compose --version  #查看 docker-compose 版本

安装Nginx Proxy Manager（用来反向代理）

1
2
3
4
sudo -i
mkdir -p /root/data/docker_data/npm  #创建一个npm文件夹
cd /root/data/docker_data/npm  #进入npm文件夹
touch docker-compose.yml  #创建一个docker-compose.yml的文件
  • npm的docker-compose.yml文件
1
2
3
4
5
6
7
8
9
10
11
12
version: '3'
services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'  # 保持默认即可，不建议修改左侧的80
      - '81:81'  # 冒号左边可以改成自己服务器未被占用的端口
      - '443:443' # 保持默认即可，不建议修改左侧的443
    volumes:
      - ./data:/data # 冒号左边可以改路径，现在是表示把数据存放在在当前文件夹下的 data 文件夹中
      - ./letsencrypt:/etc/letsencrypt  # 冒号左边可以改路径，现在是表示把数据存放在在当前文件夹下的 letsencrypt 文件夹中

如果使用的是finalshell sshl连接工具，就像操作windows那样在目录找到这个文件,把上面的复制进docker-compose.yml文件里面，自由更改后保存退出。

也可以使用vi编辑工具

  • 运行并访问Nginx proxy manage
1
2
cd /root/data/docker_data/npm   # 来到 dockercompose 文件所在的文件夹下
docker-compose up -d

理论上就可以输入 http://ip:81 访问了。

1
2
Email:    admin@example.com
Password: changeme

安装hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
sudo -i
mkdir -p /root/data/docker_data/hexo
cd /root/data/docker_data/hexo
touch docker-compose.yml 

#docker-compose.yml文件里面的内容
version: '3.3'
services:
    hexo:
        container_name: hexo
        restart: unless-stopped
        environment:
            - HEXO_SERVER_PORT=4000   # 不建议改，如果这边的 4000 改了，下面 ports 部分，冒号右边的 4000 也需要修改
            - GIT_USER=github_name       # 改成自己的用户名，可以随便写一个 
            - GIT_EMAIL=xxxx@gmail.com  # 改成自己的邮箱，可以随便写一个
            - TZ=Asia/Shanghai  # 时区
        volumes:
            - './blog:/app'    # 冒号左边可以改路径，现在是表示把数据存放在在当前文件夹下的 blog 文件夹中
        ports:
            - '8080:4000'     # 冒号左边可以改成自己服务器未被占用的端口
        image: spurin/hexo
#运行容器
cd /root/data/docker_data/hexo    # 来到 dockercompose 文件所在的文件夹下
docker-compose up -d

理论上就可以输入 http://ip:8080 访问了。

hexo 的后台地址就是 http://ip:8080/admin

如果无法访问，是否防火墙端口未打开，或者服务器不支持ip+端口访问，那就必须配置好域名再访问。npm反代看下面的参考资料寻找教程。

上传文件

把hexo博客本地根目录的_config.butterfly.yml,config.yml,db.json,package.json,`package-lock.json，.gitignore这几个文件及source和themes这两个文件夹上传到服务器hexo目录下的blog文件夹下。（这里是butterfly主题，其他主题类似应该）

本地目录结构

VPS目录结构

重要！！！

上传package.json到vps之后，打开package.json在"dependencies"下添加"hexo-admin": "^2.3.0",

添加admin

实际上，对于vps和本地相同的文件，把本地的文件覆盖上传到vps上就可以了。node_modules无需上传，后面npm install就是安装模块的操作。public也不用上传，每次hexo g就会生成。

容器内操作

1
2
3
4
5
6
docker exec -it hexo bash  #进入hexo容器里面
npm install hexo-renderer-pug hexo-renderer-stylus --save #butterfly主题需要安装这两个插件，主题才能正常显示
npm install #安装模块
hexo clean
hexo g    #hexo clean 和hexo g 必须执行，否则hexo后台无法显示。而且后期如果更改博客的配置文件需要再次执行这两条命令，改动才会生效。
exit #退出容器
1
2
cd /root/data/docker_data/hexo    # 来到 dockercompose 文件所在的文件夹下
docker-compose up -d

参考资料

Hexo 在线管理 + Butterfly 主题 + 自部署 Twikoo 评论系统