一、前言

之前个人主页一直挂在 coding 上,好久没有看过了,结果发现必须要自有域名才能继续访问。趁着还云服务的学生服务器,和以前买来蹭免费邮件服务器的域名,准备迁移到云服务的 ECS 上。

二、域名及服务器

现在云服务的生态已经非常丰富了,所有工作可以在主流的云服务厂商一站式搞定。这里挂一个我的一个的推广链接,路过的大佬们给个支持呗。

2.1 域名

买域名没什么说的(点击购买),唯一要提的一点是国内域名需要备案,不过很简单,各大厂商都提供一站式服务(点击备案)。之后可以顺便使用证书服务给自己的网站注册一个免费的 SSL 证书(点击注册),方便后续对个人主页进行 https 方面的设置。

  • 单个域名-DV 域名级 SSL-免费版

2.2 服务器购买

开发者成长计划对用户还是很友好的,性能上 一核 2G 1M带宽 也够普通用户折腾了。自带公网 IPv4 地址,要是还配 IPv6 地址就再好不过了。(貌似新版服务器已经支持 IPv6,可惜我没有优惠服务器购买资格了,已经转移到腾讯云)我这里买的是 Ubuntu 的操作系统,因为这个用的多,具体用什么 Linux 系统,看自己习惯就好。Windows 就算了,这个配置也够呛能跑动。另外记得开启安全组端口和密钥对。

  • 云服务器管理-网络与安全-安全组-手动添加 80 端口和 443 端口

  • 云服务器管理-网络与安全-密钥对-创建密钥对&绑定密钥对

2.3 服务器配置

服务器购买完成当然是要先配置一番,基础的操作命令就不再说了,由于是 root 权限进入系统,所有的命令就不在带上sudo了。如果之前已经绑定了密钥对,这里可以直接使用密钥登录服务器。

2.3.1 开放端口

服务器默认是打开防火墙并屏蔽除 ssh 外的各种端口的,这里需要用 Ubuntu 自己的 UFW 命令放行网页服务所需端口。

1
2
ufw allow 80/tcp
ufw allow 433/tcp

2.3.2 安装 nginx

端口开放以后需要配置 nginx 来作为 hexo 运行的服务器,安装并启动的命令如下,nginx 配置的默认路径为/etc/nginx

1
2
3
apt install nginx -y
systemctl start nginx
systemctl enable nginx

2.3.3 配置 nginx 网页服务

启动服务后直接访问服务器公网 IP 即可打开 nginx 的默认页面,如果无法打开,请确认安全组和防火墙的设置问题。
打开后第一步可以先在域名解析服务中将刚才已经购买并注册 SSL 证书的域名指向该 IP,然后进入目录/etc/nginx/conf.d对个人主页的相关服务信息进行配置,首先创建个人主页的配置文件vi hexo.conf,然后对内容进行修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
server {
listen 443;
server_name youdomain;
ssl on;
ssl_certificate /etc/ssl/youdomain.pem;
ssl_certificate_key /etc/ssl/youdomain.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; #使用此加密套件。
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #使用该协议进行配置。
ssl_prefer_server_ciphers on;
location / {
root /home/git/www/hexo;
index index.html;
}
}
server {
listen 80;
server_name youdomain;
rewrite ^/(.*)$ https://youdomain:443/$1 permanent;
}

第一个 server 是用来配置 https,SSL 证书的 pem 文件和 key 文件可以在阿里云的证书控制台中下载,然后上传到服务器的/etc/ssl目录即可。location 中的 root 路径是个人主页的根地址,之所以是/home/git是因为之后要对 git 进行操作,完成个人主页的自动部署。
第二个 server 是对 http 访问进行跳转,将所有的 http 请求转换为 https 请求。
如果不需要设置 https,可以按照如下进行设置。

1
2
3
4
5
6
7
8
server {
listen 80;
server_name youdomain;
location / {
root /home/git/www/hexo;
index index.html;
}
}

2.3.4 配置 git

这一块就是为了让我们可以本地编辑完成后直接通过hexo d命令一键将博文部署到服务器。

  1. 通过adduser git创建 git 用户,并配置密码。

  2. 通过adduser git sudo授予 git 用户管理员权限。或通过以下代码手动添加权限。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    chmod 740 /etc/sudoers
    vi /etc/sudoers

    # User privilege specification
    root ALL=(ALL:ALL) ALL
    git ALL=(ALL:ALL) ALL #添加这一行
    # Members of the admin group may gain root privileges

    chmod 400 /etc/sudoers
  3. 对 git 用户进行配置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    # 切换到git用户
    su git
    cd ~

    # 创建个人主页根目录
    mkdir www
    cd www
    mkdir hexo

    # 添加ssl密钥 (authorized_keys文件来自默认登录用户的对应目录)
    cd ~
    mkdir .ssh
    sudo cp /root/.ssh/authorized_keys /home/git/.ssh/
    sudo chown git:git /home/git/.ssh/authorized_keys

    # 创建git仓库
    git init --bare hexo.git

    # 添加并赋予hooks执行权限
    vi ~/hexo.git/hooks/post-receive

    git --work-tree=/home/git/www/hexo --git-dir=/home/git/hexo.git checkout -f

    chmod +x ~/hexo.git/hooks/post-receive

至此对服务器的配置已经完成,之后是对本机的 hexo 进行安装和配置。

三、 hexo 版本升级

由于好久没有更新过个人主页,电脑在此期间也经历过重装系统,所以一切配置都要从头再来。电脑环境为 Windows,后续安装都是基于 Windows 10。

3.1 配置 NodeJS

3.1.1 下载

下载安装包,我这里通过清华大学的镜像站进行下载。这里选择的是绿色免安装版,后续需要对环境变量进行设置。

3.1.2 配置环境变量

首先将文件解压缩到自己指定的目录,然后再用户环境变量中添加NODE_HOME,变量指向 NodeJS 解压目录。然后在用户的 path 中添加%NODE_HOME%NODE_PATH%\node_global

3.1.3 修改 npm 包安装位置

在 NodeJS 解压目录中建立node_globalnode_cache两个文件夹。然后执行命令:

1
2
3
# 将'NodeJS解压目录'替换为自己的实际目录
npm config set cache "NodeJS解压目录\node_cache"
npm config set prefix "NodeJS解压目录\node_global"

3.1.4 修改 npm 源

默认的安装源在国外,下载不稳定,可以调整到淘宝源。

1
2
3
4
# 配置
npm config set registry https://registry.npm.taobao.org
# 验证
npm config get registry

3.2 更新 hexo 相关包

首先通过npm install -g hexo-cli安装hexo-cli

然后由于个人主页的许多配置都是两年前的,已经非常落后了,为此,对 npm 包进行升级。

  1. 全局升级hexo-cli,先hexo version查看当前版本,然后npm i hexo-cli -g,再次hexo version查看是否升级成功。截至2020/10/12hexo最新版本为5.2.0

  2. 使用npm install -g npm-checknpm-check,检查系统中的插件是否有升级的,可以看到自己前面都安装了那些插件。

  3. 使用npm install -g npm-upgradenpm-upgrade,升级系统中的插件。

  4. 使用npm update -gnpm update --save

3.3 hexo-asset-image 插件 bug 修改

hexo-asset-image插件的作用是将 md 文件中的图片路径在生成个人主页是动态转换为对应网址路径,然而对应的 npm 包存在 bug,会导致路径生成出现错误。该 bug 作者在 github 中已经修改,但是没有发布新的 npm 包,所以需要手动修复文件。对应的修改操作为该commit。文件位置在./node_modules/hexo-asset-image/index.js

目前 bug 已经被修复,新版插件已经不需要在修改对应源码。

1
2
24  -   var endPos = link.lastIndexOf('.');
24 + var endPos = link.length-1;

3.4 hexo-browsersync 问题小记

在某次重启电脑后执行hexo s命令时发现hexo-browsersync所需要的 3000 端口被占用,提示listen EACCES。通过netstat指令却找不到相关进程信息。在一顿搜索后发现是 hyper-V 对端口进行了保留,当要修改保留端口时提示进程被占用,重启电脑后发现保留端口自己修改了,不再冲突。查看和修改预保留端口命令如下,我差点就想重置 winsock 了。

1
2
3
netsh interface ipv4 show excludedportrange protocol=tcp
netsh int ipv4 set dynamicport tcp start=49152 num=16383
netsh int ipv4 add excludedportrange protocol=tcp startport=3000 numberofports=1

四、 hexo 主题修改

4.1 选择主题

在升级完 hexo 以后,无奈的发现主题适配存在问题,于是重新搜索主题(前端实属不精,就不自己献丑搞了),最后敲定了主题:Fan

  • 首先将主题 fork 到自己的仓库中,然后按照主题的 GitHub 页面进行相关配置。
  • 该主题在Hexo 5.0.0+版本中存在侧边栏 toc 无法正确响应的 bug,经排查后发现是 hexo 本身的 toc 生成机制对跳转路径进行了转码,但文章生成时没有转码,导致函数无法正确识别 toc-link。在主题的sidebar.js文件结尾添加如下代码将侧边栏的 toc-link 重新解码即可。 修改已经贡献到主题。
1
2
3
4
5
6
7
8
/**
* @description 为toc-link重新解码
*/
var list = document.getElementsByClassName('toc-link');
for (var i in list) {
var tochref = decodeURI(list[i].getAttribute('href'));
list[i].href = tochref;
}

4.2 修改目录结构

默认的 hexo 新文章都生成在_post 目录下,当文章数目变多时无法快速查找,为此将文章以年为单位进行归类。修改根目录下的_config.yml文件。然后将现有文章进行分类归纳,命令行一键操作可参考博文——如何在 Hexo 中对文章 md 文件分类。

1
2
new_post_name: :year/:title
permalink: :year/:month/:day/:name/

五、 网站推送

在一切配置完成以后,需要通过hexo-deployer-git插件设置推送服务,从而做到自动推送更新个人主页。

  1. 安装插件。

    1
    2
    npm install hexo-cli -g
    npm install hexo-deployer-git --save
  2. 配置推送地址。其中 repo 栏的设置参数与第二章配置一致。

    1
    2
    3
    4
    5
    6
    7
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
    type: git
    message:
    repo: git@youdomain:/home/git/hexo.git
    branch: master
  3. git 添加可信目录

    新版 git 更新了可信域机制,需要将.deploy_git对应目录添加到安全目录里面才可以完成部署。

    1
    git config --global --add safe.directory 'your-projrct-dir/.deploy_git'
  4. 执行hexo clean && hexo g && hexo d推送个人主页。此处需要将云服务器生成的密钥,导入到本地计算机中。

六、 参考资料