hexo + nginx 的远程Blog部署
整个工作流程的概念
主要是概念上的事情,一开始不了解应该看不懂,搭建完回来再看比较合适,当然懒得看不看也无妨。
首先Hexo
依赖于Node.js
,而Git
则是Hexo
用于自动化上传的工具。
Nginx
作用是web server
,帮我们自动处理http request
。
从本地Hexo
到服务器Nginx
整个流程为,Hexo
将我们写的markdown
转译为基于hexo-theme
的静态网页,hexo deploy
将输出的public
中的网页,即hexo generate
生成的结果,用Git
上传至server
的bare repository /home/hexo.git
,而/home/hexo.git/hooks
中的post-receive
自动帮我们将内容生成至/home/hexo
,Nginx
的配置文件nginx.conf
则将http request
的root
指向了/home/hexo
,因此访问http://server_ip/
则根据/home/hexo/index.html
生成了内容返回给用户
当然其实我不是计算机相关专业的,概念理解可能有误,以上只是我的粗浅理解
环境依赖
环境 | 系统 | |
---|---|---|
本机(Admin / local) | Node.js Hexo Git | Windows 11 |
服务器 | Nginx Git | Ubuntu 22.04 LTS jammy on Aliyun ECS |
VM | Node.js Hexo Git Nginx | Ubuntu 22.04 LTS jammy on VirtualBox |
Ubuntu VM只是怕服务器有啥误操作,因为不太会linux
本机环境配置 - Windows
本机是将来对server
以及Blog
的posts
进行管理的PC
Node.js 安装
官网就可以下,有时会有奇怪的bug,重装又没了
Npm 的使用
安装要用-g
在全局安装,而且似乎有的包第一次安装要--save
,且当前目录是hexo的工作目录
--save
的具体含义还没弄明白,似乎和node.js有关,似乎现在save默认是true了,但是不想深究了
换cnpm和源
Windows似乎要好一点,在Linux时最好用npmmirror换成cnpm,在Ubuntu VM用npm时没少受折磨
npm install -g cnpm --registry=https://registry.npmmirror.com
但是有时cnpm的search不好用,所以不换npm的源了就,npm用来search,cnpm进行安装
Hexo 的安装
官方有教程,其中值得注意的是npm在全局安装hexo时要安装的是hexo-cli
,即:
npm install hexo-cli install -g
安装完后在E:
建个blog
,初始化hexo
mkdir E:\blog
cd E:\blog
hexo init
在Ubuntu中hexo init
默认会用npm进行安装,经常直接卡住,此时在Git clone
完成后Ctrl + C
直接干掉npm,然后cnpm install
即可,效果与hexo init
相同
之所以hexo init
会git clone
是因为hexo init
进行初始化时的文件安装hexo-cli
时并没有包含,是hexo init
时从github的hexo-startergit clone
过来的
git clone
卡住的话就需要对所用的Shell
比如PowerSehll
或者Linux Bash
进行代理设置了
hexo-deployer-git 安装
用于向server
进行推送,Hexo与Git进行沟通的插件
可能是必须要在Hexo的工作目录进行--save
安装,不想深究,没有验证
npm install -g hexo-deployer-git --save
如果后面出现Not found: git,查看一下Hexo的工作目录的package.json
里的dependencies
这个key
的value
里有无hexo-deployer-git
如果没有的话需要再hexo
的工作目录下用npm本地安装,不要-g
Git
官网安装包一路回车
服务器环境配置
Ubuntu应该是自带Git的,如果没有apt install git
应该也可以直接用
Nginx 的安装
官网有详细的安装教程,一路复制粘贴即可。不想解释,因为我看不懂 -.-
Nginx 的配置
这是个麻烦事
Nginx 的路径和配置文件
配置nginx最好还是先搞清楚自己在干什么。首先nginx.org是我们用的Nginx Open Source,即免费版,nginx.com则是Nginx Plus,即付费版,故nginx.com的文档做的要好得多。。。
官方有提到不同的系统以及不同的nginx版本其配置文件可能不同,如果你是以root用户安装的,没有指定用户,那么Nginx应该在/etc/nginx
,其主配置文件为nginx.conf
,其他的诸如/etc/nginx/sites-enabled
、/etc/nginx/sites-availables
、/etc/nginx/conf.d
里的配置文件均是以在nginx.conf
中的如http { include /etc/nginx/sites-enabled/*.conf;}
的形式生效的
由于我的Ubuntu VM用的是清华源,而server
的Ubuntu的apt应该是默认的阿里源,结果相同系统,甚至版本相同,Nginx的配置文件结构完全不同,和网上教程也不一样,当时真是给我搞懵了。
如果不想折腾,直接修改nginx.conf
即可,但是不建议。改成conf.d/default.conf
被include /etc/nginx/conf.d/*.conf;
我觉得更简洁
Nginx server 的配置
官方有详细的解释,我觉得以下几个有必要看一下:
启动
systemctl start nginx # 启动nginx.service
systemctl enable nginx # 开机启动
systemctl status nginx # 如果启动成功应该会有绿色的active
如果成功了的话默认配置用浏览器应该是可以直接http的80端口访问,nginx默认没记错是不监听443端口的。由于远程服务器没有GUI,所以只能远程http查看了,阿里的ECS要注意默认Ubuntu不开启ufw的——即防火墙,但是需要在ECS控制台的安全组开放端口。
默认应该是nginx的欢迎界面,如果有那就说明成功了。
配置default.conf
首先将http{}
包裹的include
改为include /etc/nginx/conf.d/*.conf;
,然后在default.conf
中进行编辑
注意:不同文件结构不会有实质差异,主要还是看/etc/nginx/nginx.conf
怎么配置的
server {
listen 80;
server_name example.com forexample.com; # 你的域名,其实可以不写,详见官方文档
rewrite ^(.*)$ https://$server_name$1 permanent; # 重定向至https
}
server {
listen 443;
server_name dwdadwa.love;
ssl on;
ssl_certificate /path/to/your/certificate.pem;
ssl_certificate_key /path/to/your/certificate.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_prefer_server_ciphers on;
location / {
root /home/hexo; # 这里就是hexo的工作目录,准确的说是public被上传到的地方
autoindex on;
}
# 像是error_page以及其实上面的ssl部分配置不填也可以,默认配置足矣
}
以上只是一些能用的配置,如果想客制化,就得去官网看文档了
在这之后重启nginx.service
systemctl restart nginx
关于SSL证书
可以直接花钱在阿里买,但是我觉得个人博客的话Let's Encrypt足矣
本机与服务器的互通 - hexo-git的自动化处理
有两种方式,第一种是蛋疼的方式是你写个md文件,手动上传至服务器,在服务器部署hexo,再用hexo将md转为静态网页,但是这一点都不程序员。
另一种则是hexo本身集成了的利用Git自动化上传
在服务端
在/home生成一个bare repository
,约定俗成加个.git
cd /home
git init hexo.git --bare
至此需要将收到的.git
还原,利用git hooks
进行自动化处理
cd hexo.git/hooks
vi post-receive
将收到的内容放到/home/hexo里
#! /bin/sh
git --work-tree=/home/hexo --git-dir=/home/hexo.git checkout -f
然后修改一下这个文件的权限
chmod +x post-receive
关于bare repository
bare repo
相当于是普通repo下的.git
文件夹,也就是说没有工作目录。之所以可以这么干其实是因为即使没有工作目录,.git
中的内容其实就相当于压缩过的工作目录。可以自行尝试将一个裸仓库不用--bare
进行git clone
,你就会发现神奇般的所有工作目录都出现了。
比如在服务器上的bare repository /home/git/hexo.git
,对其进行git clone
git clone -l /home/git/hexo.git /home/git/hexo
然后你就会发现/home/git/hexo
的工作目录文件与/home/hexo
的文件相同,而/home/git/hexo/.git
则与/home/git/hexo.git
完全相同。这也是为什么Github复制的HTTPS都是https://github.com/*/*.git
本来应该是为了节约带宽的,但是这里这么做是因为这样可以将Git与网页目录分离开,管理更加简洁。
在管理端
修改hexo
工作目录中的_config.yml
配置文件
deploy:
type: git
repo: root@server_ip:/home/hexo.git
branch: master
之后就是执行自动化部署了
hexo clean
hexo g
hexo d