原文地址：

https://bhznjns.github.io/markdown-blog/#static/Web%20%E5%89%8D%E7%AB%AF/%E5%89%8D%E7%AB%AF%E9%9D%99%E6%80%81%20Markdown%20%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99%E5%AE%9E%E7%8E%B0.md

本文主要介绍了本站的实现原理，本文实现仅供参考。

如果你访问过本站，你可能会对本站作为一个部署于 Github Page 上的静态网站，是如何实现类似于动态网站的功能感到好奇。如果你看过了本站的部分代码，你可能也会对本站是如何渲染 Markdown 文档感到好奇。

本文主要分为三个部分：

1. Markdown 文档的编译（md -> html）

2. 网站静态文件索引的实现（indexing）

3. 前端路由的实现（hash）及路由到静态文件的映射

Markdown 文档的编译

这一部分其实算是本站最复杂的一部分，因为这个简易的编译器是我自己写的（😀

当然你如果嫌麻烦之类的，也可以用现成的 npm 包（e.g. marked），效果相同。

为了防止文章篇幅过长，这里就不贴我的代码实现了，贴个 Github 上的代码地址，有感兴趣的小伙伴可以看一下~~

网站静态文件索引的实现

这一部分又可以分成三个小部分：

1. 静态文件遍历

2. 分页函数实现

3. 创建并写入索引数据

在完成了这三个部分之后，你可以参考这里，将代码整合到一个脚本中，在你每次对静态文件进行改动（增添、删减等）时对其调用。

静态文件遍历

这一步非常简单，下面直接贴上我的代码实现：

分页函数实现

这一步是为了防止当网站文章过多时导致索引文件过大。下面贴上代码实现：

创建并写入索引数据

这一步主要是在处理第一步生成的数据，将每个文件夹下的每一层放到一个索引对象中。我们用一棵树来具体解释一下：

则最终会生成大概这样的结构：

下面是具体的代码实现：

前端路由的实现及路由到静态文件的映射

由于本项目的目标是一个静态站点，故使用基于 location.hash 的路由实现。

这里放出我的实现，仅供参考。

项目预览

最后，当你写完一篇博客的时候，肯定会有想要先在本地预览的需求。

首先，如果你的代码组织使用了 ES Module，你是无法通过在浏览器直接打开 HTML 文件的方式来预览的，即使这个项目基本所有的代码都写在前端。如下图，你大概率会因为同源策略而无法加载索引文件。浏览器报错如下图所示：

我的解决方式

在本地安装 Express

在项目根目录新建preview.js

运行脚本，在浏览器中打开 http://localhost:3000/preview/ ，就可以看到网站的预览啦！

为了方便，你还可以将第二阶段的构建脚本和这个预览脚本写到package.json中，方便调用。

本文到此结束，感谢阅读！