前言

Align（这里代指本站）的诞生算是曲折但是并不困难，作为一个博客网站，在加入Memory模块之前就是一个单纯的个人技术文章站点，目前都是我自己写的原创文章和翻译的文档，出于尊重和自己二开方便保留了开源作者的文档，当然不排除未来会引入他人的文章的可能性，但是会做好备注。

我在三年前踏入前端领域时候就有写一些学习和技术积累文章的想法，那时候还没有建站的能力，有几篇小短文发布在了博客园中，但是博客园在我当时看来是在"太复古"了（没错我是个颜控了），所以一有空我就琢磨自己整一个符合自己审美的个人站点。当时在从vue2转vue3，所以前端就选择了vue3和ts，至于后端，我想起大四找实习面试时面试官提到过他们后端用的eggjs，当时我不知道eggjs是什么，所以一直记在心里给自己画饼安慰自己哪天有空了解下，这下正好用下eggjs实现我的后端服务。所以现在有了Align和Align-server项目，不过Align这个项目现在还是蛮遗憾的，写了大半年，想法太多啥功能都往里面塞，什么点赞评论，多人协作，音乐视频，最后还塞了个在线聊天进去，反倒忽略了好好优化最重要的写作功能...

总之这个网站的写作功能体验一言难尽啦，现在已经不用这个网站发布文章了，我现在叫这个项目为vue3技能实践网站哈哈。而且当时部署这个网站时备案还遇到了些问题（这个在下面一起说）。不过写写这个网站收获还是蛮多了，尤其是node这块，eggjs的设计理念还是多少让我入门了点node开发。

再往后面，就是接触到vercel和静态页面部署了。我之前不知道vercel，是我领导推荐给我的，当时我云服务器到期了在逛腾讯云，结果被他看到了于是极力推荐vercel给我。我当时是看重vercel能提供https域名的能力的（在腾讯云上备案真是难住我了，导致我用不了域名），于是花了点时间了解下了静态资源托管，然后很理所当然的想到了现代框架有类似的ssr能力，然后再顺其自然的意识到肯定有人写过实现过，最后顺理成章的找到了vuepress和它的主题社区在里面找到了一个自己最喜欢的，就是当前的网站，开源作者是邹笑寒，这里贴下大佬的GitHub主页以示尊敬。

构建和vercel部署

启动项目

本文默认你的设备具有node环境。

在根目录打开终端，运行指令pnpm install安装所需依赖，运行pnpm run build构建主题，cd docs文件夹，执行pnpm run dev即可启动本地项目，服务默认挂载在8080端口下。

撰写文章

本站使用的开源项目已经十分完善，这里 简单介绍下项目的目录结构方便小白理解和使用。

在项目根目录下我们需要关注packages和docs这两个目录，前者是面向开发者的主题和插件源码，fork仓库后可以在里面开发定制自己的功能；docs文件夹是存放markdown源文件的地方,你的写作和修改vuepress配置都应该在这个地方。

  • 在./docs/posts/下的markdown文件将会在博客首页的文章列表中。例如发布一篇名为XXX.md的文章即可在该文件夹下创建，你将会在博客首页查看到你发布的文章。
  • ./docs/links下是配置博客links菜单下的信息，可以参照已有的配置添加修改自己的链接地址
  • ./docs/dosc/下是开源作者写的文档，会展示在文档菜单下
  • ./docs/zh/下存放着中文的文档和你要发布的文章，当用户在博客中切换语言(默认英文)为中文时会加载该文件夹下的文件。
  • ./docs/.vuepress/下是vuepress生成的项目文件，你可以参考文档来修改相关配置。

当你在本地启动项目时，在./docs文件夹下的修改都会通过热更新实时显示在页面中，当然最好的方法是用个能实时显示markdown文件效果的编辑器。

在vercel上部署

在vercel官网上注册账号后，

集成web应用实现自动构建和部署

需求

作为一个博客项目，我觉得每次都要从编辑器里创建文件编辑然后打包上传有些不人性化了，有时候写作灵感是说来就来的，也不可能随时都带着电脑。所以有了做一个小web应用来简化这一过程的想法。于是诞生了avditor这个专门给博客使用的markdown文件在线编辑器。当然我做的工作很少，markdown的编辑使用了另一个开源的markdown编辑器项目,后端复用了上文提到的Align-server,这个项目虽然我写的很烂，但是耐不住业务体系相对完整(苦笑),我只需要额外增加些api即可。

架构

说这玩意有架构也是抬举我了，蛮简单的，markdown源文件和文件信息都被序列化后存在我的mongodb中，剩下的就是通过接口增删改查了，结束。

实施细节

已有文件导入

存入已有文件只能手动把正文复制到编辑器里再保存了，至于一些博客扩展的formatter头部需要自己在编辑器里重新填写一遍（什么写个脚本自动导入，没空啦没空啦）。

文件生成

鉴于要在博客目录下执行vercel --prod指令发布文件到vercel，所以引入了’构建‘的概念。当构建时，node服务会启动一个子进程:

  • 读取用户的文件信息
  • 根据文件信息生成对应的markdown文件找到博客项目的对应文件夹把生成的文件放进去
  • 最后在博客项目下执行vercel --prod发布

找到博客项目

注意这里我需要强调两个项目，一是Align-server和博客项目，因为Align-server中的子进程要对博客项目执行读写等操作，所以我们要获取到博客的根目录，为了简化这个获取的过程我选择将两个项目放在同级，这样简化了目录查找的逻辑。Align-server项目的环境变量中会存储博客项目的根目录，并基于此实现对markdown文件的操作。

剩下的就是实现各种服务，例如读取数据库中的文件信息生成符合博客规范的md文件，启动进程提交远程服务器上的修改到git，对博客项目修改完成后启动进程构建vercel等等。

注意

由于静态网站的特殊性，你的任何修改都需要构建后才会在网站上生效，而我们的编辑器项目又和博客页面是分离的且受制于我的服务器没有域名，这样在实际开发中就会遇到一些奇怪的问题：

资源引用

在编辑器中想要支持设置博客的封面。这个本身是个很简单的问题，图片资源上传至服务器，博客文件中通过地址引用资源即可。但是由于服务器没有域名，所以无法使用https协议，浏览器会禁止博客项目加载服务器上的资源。这个问题比较方便的解决方法是上传资源时同时保存到博客中(是的，难以置信我居然要保存两份)，这样构建的时候让博客加载自己的图片即可。