为博客添加一些附加功能

  1. 1. 强制HTTPS
    1. 1.1. 2022年7月26日更新
  2. 2. 图床
  3. 3. 评论系统
  4. 4. 播放器
  5. 5. Codespaces

从6月6号用Hexo框架搭建这个博客之后,我就一直在琢磨怎么完善我博客的体验(虽然没有几个人会来用)。不得不说用现成的模板和主题是真的爽,只需要几步就能添加功能,而且大部分功能都是开箱即用的,不出意外的话以后都会用这个框架了,而且会好好更新博客的。

强制HTTPS

去网络上搜了一圈,发现好像大部分人给Hexo添加SSL证书都是通过Nginx的,这就让人有点头大了,我是直接用hexo s命令来运行服务器的,网络上这些方法对我来说没什么参考价值。

好在我在之后找到了一篇符合我要求的文章,这个方法要修改node_modules/hexo-server/lib/server.js。这篇文章的代码不能直接用,因为我的hexo版本较高,没有opn模块导致报错。文章给出的解决方案如下

高版本的hexo可能会提示opn没有安装,安装也很简单,在hexo项目目录下,npm install opn --save即可。

但是我的npm提示我用open替代,按照提示修改了一下就能跑了,这之后的Http请求全部转Https了。很酷但是有BUG,不过暂时没发现影响使用的情况,如果过一阵子发现不行,就改用Nginx吧。

2022年7月26日更新

这一天我更新博客主题的时候意外将node_modules中的server.js重置了,然后去CSDN找之前的文章发现居然要登录才能复制,现在索性贴在这吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

var fs = require('fs');
var connect = require('connect');
var http = require('https');
var chalk = require('chalk');
var Promise = require('bluebird');
var open = require('opn');
var net = require('net');
var url = require('url');
var express = require('express');

var httpApp = express();

httpApp.all("*", (req, res, next) => {
let host = req.headers.host;
host = host.replace(/\:\d+$/, ''); // Remove port number
res.redirect(307, `https://${host}${req.path}`);
});

httpApp.listen(80, function () {
console.log('http on 80 Welcome to Smileyan.cn');
});

const options = {
key : fs.readFileSync("/withyan.cn.key"),
cert: fs.readFileSync("/withyan.cn.pem")
}

module.exports = function(args) {
var app = connect();
var config = this.config;
var ip = args.i || args.ip || config.server.ip || undefined;
var port = parseInt(args.p || args.port || config.server.port || process.env.port, 10) || 4000;
var root = config.root;
var self = this;

return checkPort(ip, port).then(function() {
return self.extend.filter.exec('server_middleware', app, {context: self});
}).then(function() {
if (args.s || args.static) {
return self.load();
}

return self.watch();
}).then(function() {
return startServer(http.createServer(options,app), 443, ip);
}).then(function(server) {
var addr = server.address();
var addrString = formatAddress(ip || addr.address, addr.port, root);

self.log.info('Hexo is running at %s . Press Ctrl+C to stop.', chalk.underline(addrString));
self.emit('server');

if (args.o || args.open) {
open(addrString);
}

return server;
}).catch(function(err) {
switch (err.code){
case 'EADDRINUSE':
self.log.fatal('Port %d has been used. Try other port instead.', port);
break;

case 'EACCES':
self.log.fatal('Permission denied. You can\'t use port ' + port + '.');
break;
}

self.unwatch();
throw err;
});
};

function startServer(server, port, ip) {
return new Promise(function(resolve, reject) {
server.listen(port, ip, function() {
resolve(server);
});

server.on('error', reject);
});
}

function checkPort(ip, port) {
return new Promise(function(resolve, reject) {
if (port > 65535 || port < 1) {
return reject(new Error('Port number ' + port + ' is invalid. Try a number between 1 and 65535.'));
}

var server = net.createServer();

server.once('error', reject);

server.once('listening', function() {
server.close();
resolve();
});

server.listen(port, ip);
});
}

function formatAddress(ip, port, root) {
var hostname = ip;
if (ip === '0.0.0.0' || ip === '::') {
hostname = 'localhost';
}

return url.format({protocol: 'http', hostname: hostname, port: port, path: root});
}

图床

租了华为云OBS作为图床,中间踩了坑,还去PicGo华为云插件的GitHub仓库提了Issue,得到原作者的帮助。另外一提,这位插件作者GitHub个人资料显示他是华为的工程师,没想到这么近距离接触到大佬了。

具体可以看看我之前的文章利用华为云给自己搭一个图床。总之现在一口气加载好几张高清图片都不费劲了!

评论系统

用了waline,因为这个博客主题的原作者用的也是这个,我也用了这个23333。

配置的话只需要按照官网给的指示一步步配置就行了,有什么问题都可以发在我的评论区,我还配置了通过Github登录的功能。非常方便!另外这个评论系统还集成了访问人数统计功能。这正是我所需要的。

播放器

这个播放器其实是这个主题送的,我把网站的播放器配置成我的一个网易云音乐歌单,于是我就能通过网易云音乐来同步了。虽然估计没几个人会听。

Codespaces

这个跟博客功能没什么关系,主要是我开发时用到的GitHub搞得一个云端开发的功能,非常强大,可以在浏览器里开个VScode编辑你的项目然后再在仓库里更新。我可以直接在Codespace写完文章然后push到仓库,这之后我打算在服务器配置一个每小时pull一次的脚本,这样就不用每次都登录去改了。