Hexo项目部署到阿里云实战

效果展示

王三梦的博客

部署过程记录

宝塔安装

  1. 这个博客部署还是挺简单的，只需要搭建node环境和编写nginx配置文件。属于对小白来说比较简单。

  2. 进入所有云服务器的终端，安装宝塔，宝塔很方便便于我们对项目的管理，而且免费实属良心。

    1
    yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

    我是centos7的linux，大家可以根据自己的需要按照情况安装。等待安装完成之后会在终端弹出管理页面地址和账号密码。大家登录进去之后是这个面板。

    登录首页

Nginx安装

一般如果通过命令行安装，很多常用的nginx插件是默认不安装的，但是在宝塔软件商店安装的话，是会默认帮你把常用的插件安装上的。

在软件商店搜索nginx，安装免费的那个。

安装完成点击配置，那里有图形化的启动开关，启动之后，打开阿里云安全组的80端口，访问看到nginx就是安装成功了，我这边就不做展示了。

安装node环境

我这边默认安装node14

1
curl -sL https://rpm.nodesource.com/setup_12.x | bash -

安装node12

1
2
yum install -y nodejs
yum intall -y npm

安装nodejs和npm

看网上说安装nodejs会帮你npm安装好，但是我这边没有安装npm，所以又装了下。可以通过node -v和npm -v查看安装是否成功。

初始化服务器代码仓库，方便本地hexo博客同步到服务器

在linux下选择一个目录，进行git仓库的初始化

1
2
3
4
5
6
adduser git

chmod 740 /etc/sudoers

vim /etc/sudoers
chmod 400 /etc/sudoers

这边先设置下默认git相关操作都是root权限。进行如下修改

1
2
3
4
5
6
7
8
9
10
11
12
cd /home.git
git init --bare blog #创建落仓库
sudo passwd git  //设置git密码
su git	//切换到git用户
cd ~	//切换目录
mkdir .ssh	//新建.ssh文件夹
cd .ssh	//进入文件夹
ssh-keygen	//生成公钥密钥文件
cp id_rsa.pub authorized_keys	//复制文件
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

设置完之后可以通过window终端进行ssh访问看看是否成功，命令

1
ssh -v git@你的公网IP

密码是你linux操作系统的密码，能访问进入操作系统内部的话就是配置成功。

编写git hook钩子文件，把我们本地同步的代码，放到nginx配置文件，配置的工作目录。

githook文件一般在仓库目录下的hooks文件下,post-receive文件是在仓库收到推送时，会进行操作的脚本文件。

1
2
3
4
5
6
7
8
9
cd blog/git/hooks
vim /hooks/post-receive
#!/bin/bash
git --work-tree=/www/blog --git-dir=/home/git/blog checkout -f
输入：wq保存退出
#添加相关运行权限
chmod +x /hooks/post-receive 
#修改仓库拥有者
chown -R git:git blog

woork-tree: 就是你nginx需要配置的文件路径，git-dir：你的git仓库路径 我下面直接这么叫了

开始创建工作目录，也就是nginx配置文件所需要的目录

1
2
3
4
cd /www && mkdir blog
chown -R git:git ./blog
chmod -R 755 ./blog

配置nginx文件

在宝塔软件商店配置nginx配置文件，点击设置，点击配置修改，添加如下。

1
2
3
4
5
6
7
8
9
server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /www/blog;
        server_name hostname;
        # location / {
        #         try_files $uri $uri/ =404;
        # }
}

hostname是你的个人域名，location可写可不写，配置完成之后，在nginx服务选项，点击重载配置并且重启nginx。之后在work-dir编写一个index.html,再访问服务器ip看看配置是否生效。

本地hexo配置文件修改

在本地hexo的配置文件__config-yml中

1
2
3
4
deploy:
  type: "git"
  repository: git@<ip>:<git-dir服务器仓库路径>
  branch: master
1
2
hexo clean && hexo g
hexo d

之后就会让你输入服务器密码，输入完成就会发现推送完成。

在服务器查看git-dir 和work-dir，会发现有文件进行了同步，再次查看服务器ip会发现，博客已经可以访问。

博客http升级到https

开启https认证，需要将申请到的ssl证书在nginx进行配置

在nginx.cnf文件中加入以下配置

1
2
3
4
5
6
7
8
9
10
server{
        listen 443 ssl;

        server_name wjwsm.top www.wjwsm.top;
        # # SSL 协议版本
        # # 证书
        ssl_certificate /www/wsm.top/ssl/wjwsm.top.pem;
        # # 私钥
        ssl_certificate_key /www/wsm.top/ssl/wjwsm.top.key;
        }

重启nginx之后，打开443端口，再次访问就会显示升级到https

nginx解决跨域问题

在配置博客的评论系统的时候发现，docker部署的服务在前段访问是http协议，违反跨域原则，被浏览器拦截了，这边可以设置nginx进行https到http的转发避免该问题的出现,根据域名在nginx.cnf配置如下

1
2
3
4
location =/twikooserve{
      proxy_pass http://ip:8099;
      # allow all;
    }

精准配置到相关路由后，使用proxy_pass进行http的转发，从而避免网络层协议不同，导致的跨域问题的出现。

重载配置文件后，重启下ngixn，刷新博客，可以发现评论系统已经恢复正常。

跨域问题还可以通过添加请求头，默认对*允许跨域请求的方式来解决。在此就不做赘述。