YDL 使用Hexo+GitLab+WebHook创建可自动刷新

概述

使用Hexo+GitLab+WebHook创建可自动刷新的团队技术博客

需求

• 编写blog不需要本地安装Hexo框架
• 推送后自动刷新远程Blog页面

实践

服务器配置

1.服务器环境搭建

安装nginx

yum install -y nginx

启动服务器：

systemctl start nginx

systemctl enable nginx

2.配置服务器路由

在/etc/nginx/目录下创建一个文件夹 叫 vhost

    cd /etc/nginx/a
    mkdir vhost
    cd vhost
    vim blog.conf

编辑 blog.conf文件内容

    server{
        listen    80;
        root /home/mobile/blog;这里填博客目录存放的地址
        server_name 这里填域名如(www.baidu.com) 域名
        location /{
        }
    }

保存并退出 :wq

打开/etc/nginx/目录下的nginx.conf文件 vi /etc/nginx/nginx.conf

找到include /etc/nginx/conf.d/*.conf;

在下面添加一行

include /etc/nginx/vhost.d/*.conf;

建立博客的目录：

        cd /home
        mkdir mobile
        cd /mobile
        mkdir blog

3.安装Git以及Node.js

• 安装Node.js

  curl -sL https://rpm.nodesource.com/setup_10.x | bash -
  yum install -y nodejs
  

  安装完成后执行 node -v 和 npm -v 如果打印版本号则安装成功

  [root@localhost /]# node -v
  v10.9.0
  [root@localhost /]# npm -v
  6.2.0
  

• 安装Git及配置仓库

  安装git:

  yum install git
  

  在~目录下创建.ssh文件夹

      su git
      cd ~
      mkdir .ssh
      cd .ssh
  

  生成公钥密钥文件

  ssh-keygen
  

  此时在目录下就会有两个文件，分别是

  id_rsa 和 id_rsa.pub
  

  复制 id_rsa.pub 中的公钥内容，备用

  vi id_rsa.pub
  

4.安装Hexo

• 设置cnpm源

npm config set registry https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装 hexo

cnpm install -g hexo-cli

5.安装PHP环境

PHP-FPM

• 安装

yum install -y php-fpm 

• 启动

systemctl start php-fpm 

PHP

• 安装

yum install php

• 找到配置文件

find / -name nginx.conf

• 修改为如下配置

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        location / {
        }
        
        location ~ \.php$ {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include        fastcgi_params;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }
        error_page 405 =200 http://$host$request_uri;
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

PHP脚本

• 进入PHP根目录

cd /usr/share/nginx/html

• 创建blog.php文件

 touch blog.php

• 编辑php文件

vi blog.php

• 填入更新代码

?php
exec("cd ../../../../home/mobile/blog/; pwd;git pull origin master 2>&1;hexo clean && hexo generate;nginx -s reload", $output);
var_dump($output);
?>

Gitlab配置

• 配置服务器ssh公钥

  
  image

• 创建gitlab 项目

• 添加WebHook，监听Push事件

  
  image

本地配置(只需首次配置一遍)

初始化Hexo项目

cd ydl-blog
hexo init

安装插件

npm install hexo-deployer-git --save
npm install hexo-server

预览博客

hexo g && hexo s

打开浏览器访问：http://localhost:4000/.

关联远程仓库

git remote add origin git@xxx/ydl-blog.git

推送至远端仓库

git push -u origin master

预览

• 阿里云配置域名解析规则

• 打开blog.conf中配置的域名，即可访问

  
  image