作者:李伟我们开始上课吧
项目位置
前段时间有朋友跟我说:你写的博客已经半个月打不开了。
我知道这个问题，以前也遇到过，但是这次持续时间太长了，估计至少要20天，实在是舍不得。
要解决这个问题，我首先想到的是把文章迁移到掘金。只是想到掘金里面乱七八糟的广告就打消了这个念头。更何况，如果只是想不呢？那我还得再做一次。
所以，我决定建立自己的博客。
对于自建博客，我想到的第一个场景是:我在本地创建md文件，然后一键上传，然后就可以发布到网上，然后就可以通过相应的网站看到相应的博客。
项目要求:简单、快捷、性价比高。
项目功能:可以自己用，发布到网上看，不考虑评论功能。
开发工具:
Nodejs:添加、删除、检查和上传本地文件。
阿里云的Oss:存储本地上传的博客和图片，供前端阅读。Oss很便宜。我用了很久，也没花多少钱。
Typora: MD文件编辑器，您可以在其中指定图片的相对存储目录。
接下来说一下整体实现思路。
政体四路
博客写作规则
我会把所有的博客都写在一个固定的目录里。有主题的博客会有一个单独的文件夹，
该文件夹中可能有多个与该主题相关的md，并且还会有一个images文件夹来存储md中的所有静态资源。比如:
项目结构
Build.js:编译、打包和上传本地博客
Mds.json:存储md文件目录信息。
St.json:存储静态文件的目录信息。
Conf.json:项目配置文件
主:所有博客都写在里面。
Web:前端文件，也可以和项目分开。
Dist:本地博客包目录
项目实现逻辑
首先建立两个目录信息文件mds.json和st.json，默认为空 array，用于存储后面的文件信息；
在main中，使用Typora editor按照一个文件夹一个主题的规则进行博客，其中图片链接可以自动指向同级的图片文件夹；
在build.js中写入节点
先获取main中的文件目录，与mds.json和st.json中的文件进行对比，就可以知道哪些文件是新的，哪些文件被删除了。
新文件要重新编译打包上传；删除的文件应该从本地打包目录和oss端删除。
最后，根据文件类型，将main中的文件目录更新为mds.json和st.json
节点的具体实现
实现项目功能的主要文件是build.js，所以我们会在最后解释build.js中的各种功能逻辑。
基础数据的定义
fs内置文件系统
方法工具
GetFiles获取目录中的所有文件信息，根据文件类型分为静态文件和md文件。其字段属性为:
Path文件路径；
文件所在的文件夹；
名称文件名；
类型文件类型；
oss中ossName文件的在线名称；
Mtime修改时间；
Ctime创建时间，初始修改时间。
GetRandom根据时间戳和随机数得到一个基本不重复的数值。
配置文件
输入博客条目
解析后的在线md文件将在这里发布，然后上传到oss。
菜单博客目录:
St静态资源目录；
Mds md文件目录；
在ossPathSt oss中存储静态资源的存储桶路径
ossPathMds oss中存储md文件的存储桶路径
BucketSt存储静态资源的桶配置参数，这些参数用于实例化OSS客户端。
BucketMds存储md文件的桶配置参数，用于实例化OSS客户端。
阿里云OSS服务器接口对象
mdsOld的最后一次构建生成的Md文件目录
stOld上次构建时生成的静态资源目录
MenuOld集成了上一次构建生成的目录。
menuNow当前博客门户中的文件目录
客户机基于存储桶配置项实例化保存两种资源的存储桶。
更新博客门户中的文件
SetFiles首先上传图片文件到oss，返回静态资源目录信息。
然后SetFiles将md文件写入本地dist目录，上传到oss，返回ms文件的目录信息。
WriteMenu将静态目录信息和md目录信息写入对应的本地json文件，上传到oss。
SetFiles在博客门户中添加、修改、提交和删除文件。
GetFilesState比较新旧目录，并返回目录状态信息，如所有删除的文件、新文件和修改的文件。
如果新旧目录相同，则返回null；否则:
UpdateFiles在本地写入新的和修改过的文件，并将它们上传到oss。
DeleteFiles从本地出口和oss中删除已删除的文件。
返回到最新目录。
WriteMenu将最新文件写入本地目录并上传到oss。
UpdateFiles遍历文件目录，在本地写入新的和修改过的文件，并将它们上传到oss。
对于md文件:
ReadFileSync根据文件路径读取对应的md文件内容；
GetUrls从md获取所有图片文件的链接地址，通过该链接获取该文件的oss端名；
CompileMd解析Md文件，用oss地址替换这个文件的本地地址；
WriteFile将此文件发布到导出目录。
如果是图片文件:
只获取文件的本地地址用于后续操作。
使用oss实例对象将文件上传到oss。
DeleteFiles遍历文件目录，并从本地出口和操作系统中删除已删除的文件。
如果是md文件，从本地出口删除已删除的文件；
从oss中删除文件。
获取文件状态。
Df:要删除的文件在旧文件里，不在新文件里；
Cf:要添加的文件不在老文件里，在新文件里；
用友:要更新的文件在新旧文件里都有，但是已经改了；
Nf:修改过的文件+新文件；
Of:未更改的文件；
菜单:最新目录。
WriteFile在本地写入文件。
CompileMd解析Md文件，用oss地址替换这个文件的本地地址。
GetUrls查找所有图片URL。
如从' ]'中提取'images/img.jpg'，并排除底层目录没有'.'的链接和html链接。比如从']'中提取' images/img.jpg '，排除没有'.'的链接和html链接在底层目录中。
GetOssName根据文件的本地路径从相应的目录中获取相应的oss路径。
GetFile根据文件的本地路径从对应的目录中获取文件，并从目录中删除文件。
前端的具体实现
主页的功能是从oss中读取文件目录文件，然后显示在页面上。
从oss获取存储目录的mds.json文件。
主页效果
标题点击后会跳转到详情页，链接中会拼接出标题串和这篇文章特有的logo。
在详情页，根据首页投放文章的唯一logo，从oss获取md文件，解析成HTML，放到页面上。
有很多针对md的解析工具，比如marked。
我们可以给md文件添加样式。我这里用的是github-markdown.css。
上面类中的“markdown-body”是对github-markdown.css样式的调用。不要把它落下。
好了，我写博客的基本需求在这里实现了。
