我的博客网站大升级

我的个人博客网站始于 2015 年 11 月 11 日,当时迈入大二不久,还不太懂前后端相关技术,搭建了个比较粗糙、简单的个人博客网站。两年后的现在,趁实习期间工作之余,是时候赶在 2017 年结束前来一波大升级了,让我的网站 2018 年也迎来一个崭新的自己…

# 1. 原始架构

15 年的时候,HEXO 博客框架就已经比较流行了,主打快速、简洁和高效,全站静态网页,支持 MarkDown 语法,同时有许多惊艳的主题可供选择,这便是当时选择 HEXO 的原因。在这里,此部分将讲解本博客网站当时的原始架构模型,对 HEXO 很熟悉的读者也可跳过此部分。

1.1 工作流程

使用 HEXO 的发表一篇博文由 5 个步骤组成:

sequence171220

没错,是比较繁琐,2 年来,虽然已经熟悉这个繁琐的流程,但仍希望能够通过技术来进一步简化这个流程。

1.2 组件

component171220

博客的原始架构很简单,如图所示几大部分组成,下面分点简述:

1.2.1 七牛云存储

负责博文中引用的静态图片资源。在 Chrome 浏览器中安装了七牛云图床插件,使用中只需将图片拖入页面,便会返回给你图片引用链接,将此链接插入到你的博文中就可以了。

qiniu20171220

但有一大遗憾,博文中的图片大多是截图或者自己做的图片,而且为了管理图片,不得不以一个统一的形式为文件重命名,然后再将图片拖入浏览器上传,这样一来,博文中插入一张图片还真是麻烦。

1.2.2 阿里云

用来安装 HEXO 的客户端,负责解析内容目录的博文并生成静态页面,然后 deploy 给 GitHub。明明 HEXO 可以本地运行,为什么选择阿里云呢?坑就坑在当时自己电脑主力系统还是 Windows 系统, 只好 PUTTY 连阿里云发博客,也算是给自己买的阿里云提高一点利用率。别问我为什么不在 Windows 下倒腾 HEXO

1.2.3 GitHub

免费的静态页面托管服务很棒,配置好 CNAME 还可以重定向自己的域名地址,在当时访问速度也没什么问题,现在看来,不科学上网好像还没法进去看博客了,吐血…

1.2.3 个人电脑

个人电脑用来干嘛,还能干嘛,就是用来写文章呗。

1.3 痛点

讲了原始模型的组件架构,差不多有一个印象了。这里就提出所遇到的痛点吧:

problem20171220

# 2. 改进计划

新的博客系统架构如图所示:

new20171220

从左到右分为三层结构: 持久层、控制层、展示层,没错,神似大名鼎鼎的 MVC 软件架构设计模式。

2.1 模块简述

  • GitHub 不再用作静态内容页面的托管,而真正回归本真用途,用于对博文原稿进行版本管理
  • 数据库用来对博文进行结构化存储,便于以后扩展更强的用途
  • HEXO 客户端用途不变,仍然放在阿里云主机上用作静态页面的生成
  • 处理层提供 Restful 接口,为用户终端提供 HTTP 服务接口
  • 原本单独托管的图片资源和静态页面资源现一并托管(可能暂时会依然存储在七牛),置于服务器或国内静态页面托管平台

2.2 技术栈

各个部分均选择最易于快速实现的微服务架构,此次改进的技术栈涉及如下:

技术栈

2.3 迁移旧博客

新的博客将会自动存储在 MySQL 数据库,而旧的博客仍在原有的 HEXO 客户端目录,需要使用脚本对原有的博文进行解析,将其存储至数据库。

# 3. 动工实践

3.1 数据库

首先要做的是分析文章结构,然后构建出合适的数据库表,最终创建出的数据库表如下:

1
2
3
4
5
6
7
8
9
10
11
12
CREATE TABLE `posts` (
`id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
`title` VARCHAR(45) NOT NULL,
`file_name` VARCHAR(45) NULL,
`file_uri` VARCHAR(45) NULL,
`tags` TINYINT NULL DEFAULT 0,
`categories` TINYINT NULL DEFAULT 0,
`created_at` DATETIME NULL,
`updated_at` DATETIME NULL,
`content` LONGTEXT NOT NULL,
PRIMARY KEY (`id`),
UNIQUE INDEX `id_UNIQUE` (`id` ASC));

3.2 后端

服务端采用 Kotlin + Spring Boot + Gradle 栈开发,实现功能包括:

  • 用户验证,验证是否为管理员操作,采用 token 验证机制
  • 文章的录入,包括文件复制、解析并插入数据库、执行发布脚本子步骤

文件目录

3.3 前端

精力暂时有限,充当客户端的前端就暂时使用 Python 脚本完成,大致流程就是登录后调用后端提供的 HTTP 接口上传文件,部分代码如下所示(请原谅我为了保障我博客系统的安全稳定地运行不能贴出更多代码):

1
2
3
4
5
6
7
8
9
10
def run():
response = requests.post(base_url + '/login', params={})
token = json.loads(response.text)['']
args = sys.argv
if len(args) <= 1:
return
path = args[1]
with open(path, 'rb') as f:
name = os.path.splitext(os.path.basename(path))[0]
res = requests.request('', base_url + '/***/')

3.4 脚本

最后,需要准备好发布博文和 Git 提交的脚本,用来对每一篇文章上传后的 Git 备份和 Hexo 发布。

其中要注意的就是向国内托管 Git 和 GitHub 都注册公钥,采用 ssh 访问,以便方便脚本自动化执行:

1
# 生成密钥
root@iZ28rekyw61Z:~# ssh-keygen 
# 查看密钥
root@iZ28rekyw61Z:~# cat ~/.ssh/id_rsa.pub

如此一来,便可以免去输入密码,直接 push 到仓库。

同时,还需要一些脚本用来帮助迁移旧博文到新博客系统,这些使用 Python 完成足矣。

3.5 还差一点

用了两年的主题也是看腻了,换上 next 主题,简单配置下 _config.yml,变换了套新衣服,此处展出旧版博客主页:

博客老样子

# 4. 最终效果

其实读者和我也许一样好奇,到底经过这么一番折腾后有啥效果,接下来我们就模拟撰写一篇博文后发生的事情来就看看效果吧!

(1)和以往一样,使用 Typora 软件(良心推荐)写博文

article20171229

(2)写完后保存,然后打开终端执行写好的上传脚本,参数直接将文件拖入窗口即可:

bash171230

(3)回车后,键入密码,稍等片刻,博文将自动发布。其中自动化操作包括以下流程:

  • 用户权限验证
  • 博文原稿上传至阿里云 HEXO 发布目录
  • 解析博文并存储至 MySQL 数据库,位于阿里云
  • 博文新版本在 GitHub 版本管理上提交新纪录
  • 渲染发布博文并推送至静态页面托管平台(coding 平台)

在版本管理下的博文原稿

# 5. 结语

写这篇博客的结语时,已经是 2017 年 12 月 30 日了,改造计划前前后后差不多用了一周多的下班后时间,还算赶在了 2017 年末。

本文主要讲解我是如何实现博客的自动化发布和备份管理的,这对于个人来说也算是用技术力量来解放自己的双手,却又保障系统的安全和稳定,也希望本文能给有同样想法的读者提供一点思路或启发。

最后,年末之际,祝大家新年快乐,一起迎接更好的 2018!