hexo + nginx 的远程Blog部署

2024 年 5 月 3 日 星期五(已编辑)
53
摘要
本地Hexo,Git上传至服务器,Nginx处理请求
这篇文章上次修改于 2024 年 10 月 6 日 星期日,可能部分内容已经不适用,如有疑问可询问作者。

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上传至serverbare repository /home/hexo.git,而/home/hexo.git/hooks中的post-receive自动帮我们将内容生成至/home/hexoNginx的配置文件nginx.conf则将http requestroot指向了/home/hexo,因此访问http://server_ip/则根据/home/hexo/index.html生成了内容返回给用户

当然其实我不是计算机相关专业的,概念理解可能有误,以上只是我的粗浅理解

环境依赖


环境系统
本机(Admin / local)Node.js Hexo GitWindows 11
服务器Nginx GitUbuntu 22.04 LTS jammy on Aliyun ECS
VMNode.js Hexo Git NginxUbuntu 22.04 LTS jammy on VirtualBox

Ubuntu VM只是怕服务器有啥误操作,因为不太会linux

本机环境配置 - Windows


本机是将来对server以及Blogposts进行管理的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 initgit 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这个keyvalue里有无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.confinclude /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

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...