自己动手写动态博客

HPDell

2019-02-24

我自己动手写了一个基于 Quasar Express 的动态博客，使用 TypeScript 编写。博客代码放在 GitHub 上，目前是私有库状态。

后端仓库： HPDell/blog-zone
前端仓库： HPDell/blog-zone-views

起初做这个动态博客的原因是，过年想用手机发一篇博客。虽然有 Travis 持续集成，已经为用手机写提供了可能，但整个流程走下来，过程还是太复杂了，而且 GitHub 的编辑器 iOS 不能直接输入中文，导致我只能先在备忘录里面写好。正好趁着练一下以前没有涉足过的技术。（目前博客已经部署，但是由于是自己家的服务器，不太敢放链接出来。）

依赖库

前端主要用到的依赖库有：

Quasar 、 Webpack 和 Vue 系全家桶
MavonEditor ：Markdown 编辑器（由于需要做必要的改造，因此将源仓库克隆，使用克隆后的仓库）
marked ：渲染 Markdown
Prism.js ：代码高亮
MathJax ：渲染数学公式
abcjs ：渲染乐谱
除此之外还有 jquery 、 md5 、 moment 、 markdown-loader 、 html-loader 等

后端主要用到的依赖库有：

Express
Typeorm
Moment.js
Sqlite3
JsonWebToken
uuid

部署方法

后端的部署

后端的安装比较简单。克隆仓库后，使用如下流程进行部署

yarn global add typescript  # 如果没有 TypeScript 环境
yarn
tsc

# 直接启动 Node 进程
node app.js
# 或推荐使用 PM2 管理进程
pm2 start app.js --name blog-zone

部署完后，可以通过调用一次 POST /login/register 接口，来为数据库添加一个管理员用户。由于没有开放注册接口，因此对通过接口进行注册进行了限制。如果想修改这个限制到 ${maxUserNumber}，对 /routes/login.ts 进行修改：

router.post("/register", async function (req: Request, res: Response) {
    const connection = getConnection();
    try {
        let userList = await connection.getRepository(User).find();
-        if (userList.length < 1) {    
+        if (userList.length < ${maxUserNumber}) {    
            let userInfo = new User();
            userInfo.name = req.body.username;
            userInfo.password = req.body.password;
            userInfo.description = req.body.description;
            try {
                let user = await connection.manager.save(userInfo);
                res.json(user);
            } catch (error) {
                console.log(error);
                res.sendStatus(500);
                return;
            }
        }
    } catch (error) {
        console.log(error);
        res.sendStatus(500);
        return;
    }
})

日后会将这个配置加入到 package.json 中。

前端的部署

前端的安装也比较简单。克隆仓库后，按如下流程部署

1
2
3

yarn global add quasar-cli
yarn
quasar build

将 dist 文件夹生成的文件用服务器（如 Nginx）进行代理，即可访问。

剩下的就是使用 Nginx 对后台进行反向代理了。配置脚本如下

server {
    listen 80;

    server_name $domain;

    location /api/ {
            proxy_pass http://localhost:3000/api/;
    }

    location /login/ {
            proxy_pass http://localhost:3000/login/;
    }

    location / {
            root $pathToDist;
    }
}

主要配置选项

后端的数据库是可选的，参考 Typorm 的配置。默认采用的是 SQLite 数据库，数据库文件是根目录的 database.db 文件。

前端主要有以下几个配置：

package.json 文件
- meta 属性
  - owner : 博客显示的名称（即显示 ${owenr} 的博客 ，${owner} 的博文 等）
  - description : 博客显示的简介
/src/components/welcome.md 文件：这个文件记录了主页显示的内容。将来可能移动到专门的地方，或者放在服务器中。