使用轻量级服务器和Vercel双部署Hexo

前言

其实将博客放到自己服务器上是半好半坏的

1
2
3
4
5
6
7
好处:
1.不用担心别的静态部署平台有什么变化，包括唧唧了，或者涨价了；
2.自己的其他东西也可以放到自己的服务器，比如自己开发的联机游戏；
3.没事自己捣鼓捣鼓，对个人的技术成长和作品展示都是有好处的，也是非常有意思的事情
坏处:
1.国内需要ICP备案和公安备案【香港澳门等除外】；
2.可能需要一些技术能力，比如反向代理，linux知识；
  • 腾讯云

马上年底了，腾讯云也推出了一些优惠活动，这个基本上新老用户都有比较合适的，而且腾讯云肯定在这方面做的比较好的了，而且你后面的ICP备案，腾讯这边是有幕布的

  • 百度智能云

百度智能云虽然是后来才有的，但是无论是服务态度上还是稳定性上都挺不错的【本博主的就在这】

这一家也是可以的，最最最重要的是这家服务器不用备案，相关手续和证件比较全面，跑路的可能较低，价格方面也是可以的

服务器配置

安装常用工具

这里主要的含义就不过多说了，基本都是常用到的

1
yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel

安装git

这一步可能有的在实例的时候就安装了git，大家如果不能保证自己的服务器是否安装了git，可以通过git - -version，如果能够显示以下信息就不用再重复安装了

image-20221219101559932.png (992×65) (gmcj0816.top)

1
yum install -y git

可以用git - -version查看git是否安装成功，看到以下信息说明安装完成咯

image-20221219101559932

创建指定的上传用户名和密码

创建后期上传hexo的git指定用户，这里以hyh为例(这个用户名可以自定义，但是要保证后面的需要用户名的地方需要改成自己自定义的用户名即可)

1
2
useradd hyh
passwd hyh

需要注意的便是在设置密码时，一般玩过虚拟机的都知道，主要是没玩过的，要注意设置密码时是没有回显的

image-20221219101655382

编辑权限文件

赋予hyh用户相关权限

需要注意，//后面的别复制，内个是给大家做的解释

1
2
chmod 740 /etc/sudoers   # 设置权限
vim /etc/sudoers # 编辑/etc/sudoers

使用 set: nu 显示行号，找到100行左右，添加如下信息

1
2
root ALL=(ALL)  ALL
- hyh  ALL=(ALL)   ALL  #主要添加这句话（这里hyh是你刚才创建的用户名）
image-20221219102042402

直接:wq!，进行保存，保存后再次修改权限。因为 sudoers是只读文件，所有要使用 !进行保存，否则会失败。

将/etc/sudoers 修改成只读类型【为了保证服务器的安全，这个一定要做，千万不要懒哦】

1
chmod 600 /etc/sudoers   //改回权限

创建hexo文件夹及赋予文件夹权限

需要注意，//后面的别复制，内个是给大家做的解释

1
2
mkdir /home/hexo  #这个也是自定义的
chown hyh:hyh -R /home/hexo //授予权限

安装Nginx

这里基本没啥好说的，直接运行就可以，然后看到最后一行显示Complete就说明完事了

1
yum install -y nginx
image-20221219102251439

这个时候我们可以通过以下命令，启动一下，看看效果，如果没有报错的话就说明启动完事了

1
systemctl start nginx.service

编辑Nginx文件

1
vim /etc/nginx/nginx.conf
image-20221219103606818

如果后面用https，直接复制我这套就ok了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server{
        listen 80;
        server_name ceshi123.top;
        rewrite ^(.*)$  https://$host$1 permanent;  # http转https
    }
    server{
        listen 443 ssl;
        root /home/hexo;
        server_name ceshi123.top;  # 请替换为你的域名
        client_max_body_size 40m;  # 请求体上限
        # ssl的一些配置
        ssl_certificate "/home/ssl/hexo_ssl/ceshi123.top.crt";   # 请务必替换成你的ssl证书路径
        ssl_certificate_key "/home/ssl/hexo_ssl/ceshi123.top.key"; # 请务必替换成你的ssl证书路径
        ssl_protocols TLSv1.1 TLSv1.2;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;
        ssl_session_cache shared:SSL:10m;
        ssl_session_timeout 10m;
    
        error_page   404    /404.html;
        error_page   500 502 503 504     /50x.html;
    }

保存退出后，重启服务器，
修改完配置以后，需要重启一下Nginx服务。

1
systemctl reload nginx.service

建立git仓库

需要注意，//后面的别复制

1
2
3
4
su root   //如果现在就是root用户下可以不用这一句
cd /home/hyh
git init --bare blog.git  //创建Git仓库
chown hyh:hyh -R blog.git  //授予Git仓库权限

编辑post-receive

进入cd /home/hexo/blog.git/hooks/执行下方命令

需要注意，//后面的别复制

1
vim post-receive   //这一句话千万别错了哦

把下面的内容拷贝进去并wq!保存

1
2
#!/bin/sh
git --work-tree=/home/hexo  --git-dir=/home/hyh/blog.git checkout -f

再次修改权限

1
chmod +x post-receive

开放80端口，如果https需要开放443端口

1
2
firewall-cmd --permanent --zone=public --add-port=80/tcp
firewall-cmd --reload

到这基本的工作已经完事了

本地安装和配置Hexo

这里需要git和node，这个教程就比较多了，在这里就不进行赘述了

安装Hexo

这篇文章先以最基本的hexo为准，后面会给大家更新如何魔改

1
npm install -g hexo-cli

初始化hexo

这里myblog可以去掉，加myblog只不过是为了使所生成的文件全都放到myblog文件夹中

1
2
hexo init myblog  
cd ./myblog
image-20221219104442542 
1
2
3
npm install
npm install hexo-server --save
npm install --save hexo-deployer-git

目前基本的hexo已经ok了，本地运行一下看看

1
hexo s

在浏览器中输入：http://localhost:4000/即可查看

本地运行效果

上传到服务器

1
2
3
su hyh  //登录你用来上传博客的用户
mkdir ~/.ssh   //创建存放密钥的文件夹
vim ~/.ssh/authorized_keys  //写入密钥

这里需要一个秘钥，在你的物理机上C:\Users\Administrator\ .ssh的文件中找到id_rsa文件

image-20221219104916864

复制到你的服务器中

image-20221219105146530

测试物理机与服务器能否跑通

1
ssh -v hyh@121.41.11.145 //服务器ip
image-20221219105415482

我们需要在config.yml中的最后一行编辑以下信息，然后咱们就可以把自己的博客推送上去了

1
2
3
4
deploy:
  - type: git
    repository: hyh@121.41.11.145:/home/hyh/blog.git
    branch: master
image-20221219135835553

然后就可以通过以下命令进行推送了

1
hexo clean && hexo g && hexo -d

最好呢，这篇文章就基本上说完了，大家对于这篇文章有什么不懂的呢，可以在评论处评论，到时候看到会进行回复的

Vercel部署

安装Node.js

这里需要注意一点便是是否希望自己的豆瓣游戏，书籍，电影等也可以在博客里进行浏览，如果需要的话，暂时可以跳过这一步骤，直接选择进行下一步

查看在博客中显示豆瓣收藏效果请点击以下链接查看

这是链接哦==> 电影推荐 | 七鳄の学习格 (gmcj0816.top)

Node.js官网地址如下：（正常安装即可）

1
https://nodejs.org/zh-cn/

安装Git

1
https://git-scm.com/downloads

这里就直接正常安装，自定义安装路径，然后一路下一步即可，安装完之后，可以通过git –version查看版本（如果有版本号说明安装没问题）效果如下：

1
2
PS C:\Users\28138> git --version
git version 2.38.1.windows.1

注册GitHub

使用邮箱注册 GitHub: Let’s build from here · GitHub账户，选择免费账户（Free），并完成邮件验证。

然后打开powershell或者选择Git Bash Here(这里列出了Git Bash Here)

  • 设置用户名和邮箱
1
2
git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"
  • 创建 SSH 密匙：

输入 ssh-keygen -t rsa -C "GitHub 邮箱"，然后一路回车。

进入 [C:\Users\用户名.ssh] 目录（要勾选显示“隐藏的项目”），用记事本打开公钥 id_rsa.pub 文件并复制里面的内容。

登陆 GitHub ，进入 Settings 页面，选择左边栏的 SSH and GPG keys，点击 New SSH key。

(1)首先找到settings

(2)SSH and GPG keys–>选择New SSH key

（3）填写秘钥【这里的Title名字随意，key需要复制自己的公钥 id_rsa.pub 文件中的所有】

（4）验证连接，打开 Git Bash或者是powershell，输入 ssh -T git@github.com 出现 “Are you sure……”，输入 yes 回车确认，当显示显示 “Hi xxx! You’ve successfully……” 即连接成功。如下所示

1
2
3
PS C:\Users\28138> ssh -T git@github.com
Warning: Permanently added the ECDSA host key for IP address 'xx.xxx.xxx.xxx' to the list of known hosts.
Hi *******! You've successfully authenticated, but GitHub does not provide shell access.
  • 创建github仓库

（1）选择New responsitory

(2)填写信息，仓库名这里最好是用户名.github.io，其实自定义也是可以的，反正到时候也是放到vercel上

安装 本地Hexo 博客

  • 创建hexo

使用powershell或者git bash输入一下命令【这里Mac 用户需要管理员权限】

1
npm install -g hexo-cli
  • hexo初始化并安装所需组件
1
2
hexo init myblog      # 初始化，这里添加myblog是用来将生成的文件全都放到myblog文件中
npm install    # 安装组件
  • 安装 hexo-deployer-git

这个组件主要是用来上传到github仓库用的【必需】

1
npm install hexo-deployer-git --save
  • 编辑hexo中的config.yml文件
1
2
3
4
deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git #这个信息可以复制仓库地址【如下图】
  branch: master

部署到Github上

用powershell或者git bash依次输入以下命令【无需复制#后面的注释信息】

1
2
3
hexo clean # 清理缓存  
hexo g # 转化为html页面
hexo deploy #部署 这一步最好用全称，因为后面如果用豆瓣爬虫插件时会导致重复

Vercel配置

因为github如果不用tz的话，部分小伙伴无法使用，所以呢，可以将博客放到vercel上代理，这里建议用github注册

  • 注册vercel
1
https://vercel.com/
  • 导入github仓库

（1）选择Add New Project 然后选择自己刚刚上传的仓库点击Import，最后选择deploy即可

（2）如果需要绑定域名的话，可以选择Settings中的Dimains添加域名

在域名解析出填写相应的CNAME值
  • 记录主机：填写域名
  • 记录值：填写vercel上你添加的域名给的CNAME值
  • TTL:一般选择10分钟即可