Skip to main content

个人博客搭建总结报告

· 5 min read
WelJunyu

使用 Docusaurus + Vercel 搭建静态网站。

使用 Docusaurus 的原因是,它不仅可以解析 Markdown,写作时所见即所得,而且可以使用 React 绘制前端组件,在博客中展示可交互的内容,例如 LRU-K 这篇博客中,它存在一个可交互组件。(下面的组件都可以点击)源码在:https://github.com/WelJunyu/blog/blob/main/src/components/LRUKExample.js

紫色:此次操作的描述
TF:代表该 Frame 是否可被淘汰
蓝色:缓存池中 Frame 的编号
灰色:Frame 的访问记录
访问 Frame 1,当前时间为 1
Before:
After:
F11

而 MapReduce 这篇博客开头的简介,也是 Docusaurs 本身没有的,也是自己实现的一个展示组件。源码在:https://github.com/WelJunyu/blog/blob/main/src/components/Paper.js

Abstract  MapReduce is a programming model and an associated implementation for processing and generating large data sets. Users specify a map function that processes a key/value pair to generate a set of intermediate key/value pairs, and a reduce function that merges all intermediate values associated with the same intermediate key. Many real world tasks are expressible in this model, as shown in the paper......

页面介绍​

1 主页​

点击进入

网站的根目录,以最简洁的方式展示所有博客的摘要和介绍

2 博客详细页面​

点击进入

虽然大体上和主页相似,但是右侧多了相应博客的标题栏

页面底部也有相邻的博客信息。

3 博客归档页面​

点击进入

点击上方的 Archive 即可进入,这里会将所有博客按照时间顺序进行归档

4 友链​

点击进入

可以将朋友博客的链接在这里,同时展示他们的个人信息。注意右侧展示的排名不分先后,刷新页面会同时会刷新展示顺序。这个页面也是 Docusaurus 本身不提供的,也是自己使用 React 实现的。源码在:https://github.com/WelJunyu/blog/blob/main/src/pages/friends.jsx

5 个人介绍​

点击进入

简单的展示个人介绍的页面

搭建过程​

相比于 Github Pages 的搭建过程,Vercel 搭建过程就非常简单了。只需要鼠标点点,就可以完成博客的部署。

首先进入 Vercel 网站,通过 Github 注册好账号,链接 Vercel。

之后就可以通过导入仓库的方式,导入我们的博客。可以看到,Vercel 网站中已经读取了我们的 Github 仓库,点击 Import。

在这个页面,我们什么也不用做,只需要点击 Deploy 按钮,即可完成博客的部署。

一段时间后,如下图,就出现了搭建完成的图标。

在设置中可以看到,Vercel 给我们分配了一个 https 的域名,比较难记。所以我们可以对其进行更改,或是使用自己的域名。但我没有买域名,所以就用 Vercel 提供的吧。

点击 Edit 按钮,修改域名为 weijunyu-blog.vercel.app,点击 Save 按钮。如果这个域名没有冲突的话,就可以使用了。至此,博客部署完毕!访问 https://weijunyu-blog.vercel.app/ 即可访问博客。

总结​

我感觉这种方式,比用 Jekyll、Hexo 等静态博客框架部署的更快!更简洁!可拓展性更强!可展示性、自由度更高!本身页面足够简介,可以让读者专注于阅读。使用 React 编写展示组件,也能提供比其他博客框架更强大的表现力!

参考资料​

  1. https://vercel.com/
  2. https://docusaurus.io/
  3. https://react.dev/