0%

我的博客网站大升级

发表于 分类于

我的个人博客网站始于 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
2
3
4
# 生成密钥
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！