一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

拥有这样一个网站,真是太酷了!

最近闲余时间在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块钱。买了后,一般半个小时左右注册完成。

下面是绑定域名的步骤。

  1. 先在vercel里绑定。

拥有这样一个网站,真是太酷了!

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

  1. 在阿里云里增加解析记录。

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

拥有这样一个网站,真是太酷了!

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

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

网站地址:www.historyline.online/

github源码地址:github.com/liujuntao12…

原文链接:https://juejin.cn/post/7315231440776757286 作者:会飞小超人

(0)
上一篇 2023年12月22日 下午4:48
下一篇 2023年12月22日 下午4:59

相关推荐

发表评论

登录后才能评论