最近闲余时间在B站看一些各朝代历史的视频，发现自己以前的历史知识实在是太匮乏了，几乎就是个史盲。所以萌发了一个志愿，在B站把中国历朝代的相关历史都了解一遍。

因此也生发了一些灵感，何不如以历史线为轴，搞一个历朝代历史视频讲解的汇总站呢？这样既有利于自己，要是也能给别人提供一些帮助，那就太好了。

说干就干，下面全面记录这个网站从灵感到诞生的全过程。其中包含了：产品设计-技术选型&素材寻找-代码开发&调试-网站部署的全部过程。

虽然整体的难度并不是很高，不过各个阶段都有值得记录的地方。希望给同样希望自建网站的伙伴带来一些参考和帮助。

先放一个网站的地址：www.historyline.online/

另外是github源码地址：github.com/liujuntao12...

效果截图：

产品设计

前面提到过，这个网站的灵感来源于我想通过在B站看视频来系统的了解一下中国历朝代的历史。

所以产品诉求就出来了：能够方便的通过各朝代的维度看B站的历史视频。

各个朝代的必然有开始和结束的年代，所以可以用时间轴的形式呈现，这样清晰直观。

这样，产品的大致形态就出来了：网页的主要部分是一个包含了朝代信息的时间轴。点击朝代元素，可以跳转或者弹出相关视频。

技术选型&素材寻找

首先寻找一些可供参考网站，和一些需要的素材。找到一个包含了历史时间轴的网站，整体设计也不错，借鉴一下:)，作为网站整体的模板。

然后，既然是自己的网站，当然是怎么酷怎么来。因此我想到了选用卷轴的方式呈现朝代，选用纸片的方式呈现朝代介绍。这样整体看起来比较有历史的感觉。

然后是在找资料的过程中，觉得wiki的这个朝代年表很不错，所以也借鉴了过来。

最后选取了一些有中国风格的古典配色。

因为我近些年的技术栈一直是vue，所以就确定了vue3作为技术栈。另外逐渐明确了一些产品细节，需要一个抽屉组件和一些基础的小组件，所以就引入了ant-design-vue，使用按需引入，节省自己的开发时间。

另外代码常规托管到github上，也是为了后续的部署方便。

本身开发调试就是常规的vue项目的开发调试，无需多讲。

这里想提的是github的codespace功能，很好用。因为我的本地环境原因，没法push到github上，所以使用codesapce在线开发和调试，整体使用体验还挺好的。基本和本地的vscode没有太大差异。

如果还有人不知道vercel这个平台，我第一个不同意。这个网站提供一站式前端静态网页部署服务，能够引入自己的github仓库代码，一键部署。这些功能全部免费！

部署完成之后，会生成一个vercel的域名，但是这个域名在国内被防火墙拦截了。所以可以去买一个自己喜欢的域名绑定一下，这样国内就能访问了。

以我的这个为例，我是在阿里云买的，一年8块钱。买了后，一般半个小时左右注册完成。

下面是绑定域名的步骤。

选第一个即可。表示重定向到www的子域名下。

需要增加两条，一条是原本域名的，一条是www子域名的。

到这里，全部工作就完成了！访问自己的域名即可访问到网站。

最后再次贴上GitHub和网站地址，欢迎访问。