建站原因

两天之前在跟我爸聊天之后颇有感悟，想要写一些东西。

在移动端我一直用卡片日记做每日记录，由于手机打字没有PC方便，很难用来写长文。而且近来记录欲望下滑，对鸡毛蒜皮的小事进行记录也逐渐成为了负担，时常拖到第二天才去补录，那时就已经忘记了很多当时的感受。刚好两天前萌生“换一种记录方式”的想法，一看卡片数量，刚刚好好记录了365天整，蛮有仪式感的。想来正是一年之前孤身跨越8192千米来到了英国，初来乍到在阿姆斯特丹转机没有签证不能出机场还在候机大厅睡了一夜，印象深刻。

在PC端用的是Word，体验并不美好。界面单调且不美观，整理和查找的难度也挺高。我的记录几乎是纯文本，所以所谓丰富全面的功能对我来说也意义不大。

除此之外，我也缺乏一个用于向别人展示我的想法的地方：我没有一个长时间使用的社交软件，QQ空间和朋友圈只有寥寥几条，最新发布也已经是几年之前了，微博之流更是从来没有用过。我还是希望可以有一个地方，在我新认识朋友时直接甩过去，让他可以快速了解我的偏好和各种思考。

在几年前看到过一个很漂亮的个人博客，遗憾的是已经不记得名字了。但是他的Subtitile让我至今记忆犹新：Stay hungry, Stay foolish。求知若饥，虚心若愚，很契合我的人生美学。这可以说是我搭自己的博客想法的萌芽。

建站过程

主要参考的是唐志远大佬的博客，选择使用Hexo + Github.page，博客主题选用Butterfly。一来是搭建过程简单、界面简洁，二来是可以省去服务器的成本。主要是写给自己看，或者自己手动甩给朋友，因此静态网页就足够满足我的需求了。

搭建过程没有什么好说的，对着教程照葫芦画瓢就行。搭建过程中犯的一个比较笨蛋的错误是，Tzy为国内的小伙伴提供了一个淘宝的镜像，因为在国内使用Github的源会比较慢。我在国外也照抄了这一步用国内的源，反而舍近求远了:(

域名

我在阿里云买了一个.cc域名，首年29CNY，次年及以后续费75CNY。让我没想到的是两位数的交易额都有一个阿里云的客户经理打电话过来跟我建立沟通渠道，后续有云服务需求的话可以直接对接。大厂的市场能力！（小姐姐的声音真的很好听w

虽然现在确实用不上其他服务，但是还是留了邮箱给对方，因为以后确确实实大概率会需要做一些网站，服务器应该也是不可或缺的。读本科的时候我爹就提过让我学着给他公司做个官网，当时贪玩，完全没放在心上（现在也贪玩xd

主题组件调整和美化

我期待的风格

在开始搭建我的博客之前浏览了几十个博客，最终坚定了我的博客页面一定要简洁，不布置花里胡哨的组件，尽可能做减法。功能服务于需求，为了实现功能而实现功能就本末倒置了。

对主题组件的调整

调整都基于对下方文件的编辑。

D:\hexo-blog\blog-demo_config.butterfly.yml

具体调整内容如下：

顶部导航栏的图标和名称修改。
社交图标修改，并新增QQ和Wechat。移除Follow me按钮。
网站图标修改，设置了Subtitle。
头像修改，并添加个性签名。
设置主页顶部图片，其他页面暂时沿用此图片。
关闭“复制添加版权信息”的功能。
开启Algolia search功能。
调整网站背景颜色为“#f8f9fe”。
关闭打字特效、背景特效。

其中，关闭公告栏一方面是因为博客主要面向我自己，另一方面是我觉得红色的抖动图标不够美观，而我现在的CSS编码能力几乎为零。未来有希望优化之后可能会添加回来。

~~是否保留进入网站时的大图界面也是我在犹豫的，Tzy大佬在后续迭代中关闭了这个功能，这也是做减法的一部分。之后我很有可能也会关掉这个功能。~~
看了手机端的展示效果，还是有这个界面效果好，暂时决定保留。

顶部导航栏的图标位置有些偏低，通过注入CSS调整了位置。网站图标的设置遇到了一个问题尚未解决，图标在标签页会正常显示，但是收藏到书签中后又会变成主题默认的图标。

主题美化和功能实现

主要参考的对象是Tzy、JayHrn和Leonus，这三位的网站是我见过的最具简洁美感的。

调整个人信息卡片的悬停动画

关闭头像的悬停动画（旋转），并将社交图标的悬停动画修改为缩放。参考Ks233的博客，通过注入自定义CSS实现，自定义CSS文件由head.pug引入，文件路径如下。之后的CSS文件如无特殊说明也都用同样的方式引入，不再特别说明。

D:\hexo-blog\blog-demo\source\css\hover_animation.css
D:\hexo-blog\blog-demo\themes\butterfly\layout\includes\head.pug

调整卡片透明度、页脚毛玻璃效果

将文章、侧边栏等卡片设置为有一定透明度，并为页脚添加毛玻璃效果。这个美化搭配背景图片使用效果更佳。参考Ks233的博客，通过注入自定义CSS实现，文件路径如下。

由于暂时不设置背景图片，所以暂时不需要做这个美化

美化顶部导航栏

将文章、清单、留言和关于置中，参考Leonus的butterfly博客导航栏居中教程。通过注入自定义CSS实现，文件路径如下。

D:\hexo-blog\blog-demo\source\css\menu_mid.css

隐藏“搜索”文字。通过注入自定义CSS实现，文件路径如下。

D:\hexo-blog\blog-demo\source\css\search_hide.css

将导航栏的左端和右端与卡片左端和右端对齐。这一个功能我始终无法实现，最终决定发邮件询问Tzy大佬。

美化搜索栏

参考Leonus对algolia的简单美化和优化，搜索栏的页面布局直接使用了他的方案，按照他的源码对下述两个文件内容进行了修改。

D:\hexo-blog\blog-demo\themes\butterfly\source\css_search\algolia.styl
D:\hexo-blog\blog-demo\themes\butterfly\source\js\search\algolia.js

之后发现他用于设置颜色的变量是全局变量，在他提供的这部分源码中没有，因此我的搜索栏边框、搜索结果页码等依旧在使用默认主题颜色。我对algolia.styl文件添加了以下代码：

// 定义颜色变量
$search-color = #4b4a48 // 搜索框边框颜色
$search-keyword-highlight = #881400 // 关键词高亮颜色
$theme-paginator-color = #4b4a48 // 分页器选中项背景颜色

// 定义CSS自定义属性（适用于主题色）
:root {
  --search-input-color: #7b7c7d; // 搜索输入框文字颜色
  --search-bg: #f8f9fe; // 搜索框背景颜色
  --search-result-title: #000000; // 搜索结果标题颜色
  --leonus-main: #4b4a48; // 主主题颜色
  --search-height: 60px; // 搜索框高度
}

由于还没有对我自己的颜色进行规范化，所以暂时沿用Leonus佬的变量名。修改后基本完成了对搜索栏的美化，只剩最后一个问题：搜索栏展开后左上角的“搜索”两个字和搜索结果前面的无序列表符号还是沿用主题颜色，也就是天蓝色，我会在后续修复这个问题。

基于外挂标签的最新文章标签

参考Leonus佬的实现最新文章标志教程。修改了如下两个文件：

D:\hexo-blog\blog-demo\themes\butterfly\scripts\helpers\page.js
D:\hexo-blog\blog-demo\themes\butterfly\layout\includes\mixins\post-ui.pug

随后注入自定义CSS文件，文件路径如下：

D:\hexo-blog\blog-demo\source\css\new_post.css

~~成功实现功能，但是存在问题：颜色仍然是我不喜欢的天蓝色主题色。希望在调整主题色之后可以随之改善。~~
发现颜色可以直接在 new_post.css 里调整，调成了#646f9b。

尚未实现功能

美化右下角图标颜色、页码颜色等主题颜色

在JayHrn佬的博客里找到了这项功能的实现方法，即提取文章封面的颜色作为主题色。实现起来有一定难度所以暂时搁置，另寻他法。

基于外挂标签的清单页面美化

Tzy佬通过接入豆瓣、Bilibili的接口来实现对影视、番剧观看情况的转录，但是这种方式受限于平台本身，可能会有资源不全的问题，且难以实现高度个性化。我打算参考Leonus佬的方案，通过外挂标签实现对自己各种偏好清单的罗列和自定义。

归档、标签、分类页面美化

由于也还没有发文章，没有标签和分类，还不知道要怎么做，暂时搁置。Leonus佬有标签页优化方案，后续可以尝试。

开通留言板

这个功能需要先部署评论功能，我不打算在文章页开通评论，所以评论功能只用于留言板，以后再说。

制作关于界面
历史版本记录

在页脚或者顶部导航栏的“关于”一栏中，导向历史版本记录页面，以时间轴的形式对博客的迭代过程进行记录。可以参考Tzy佬的博客。

个性化页脚和页脚徽标
修改字体

暂时继续使用主题默认字体。

主页顶部轮播卡片

参考Akilar佬的教程

修改卡片宽度
修改加载动画

结语

从7.7到7.9，历时三天，搭出了基本框架并上传了第一篇文章。前端真的是一个上限很高的领域，厉害的前端大佬不但编码能力强，一定也是有属于自己的设计美学的。在寻找功能实现的教程的过程中进入了好几个大佬的网站，也看到了更多精妙绝伦的布局和设计，我的路还很长。

另一方面，也感慨于人工智能的发展确实是对生产力的又一大提升，读不懂的源码直接丢给chat-gpt来讲解，甚至可以直接让它帮你写简单功能的代码，假以时日人们只做甲方，工作全让gpt来做也未必不能实现。

目前只是大致搭建了一个框架，还有很多细节可以优化，会在未来的日子里慢慢实现。虽然借助Hexo的主题搭建网站已经可以说是傻瓜式建站流程了，但是对于我这样长时间没有实战且完全没有接触过前端的人来说也走了不少弯路。印象最深刻的就是在注入第一个css的时候，被困在inject这一步好久。开F12用开发者工具看，发现始终不能成功调用到我写的css文件。跟gpt反复确认我的路径设置是否正确、我的文件内容是否正确，都得到无误的答案。单这一步折腾了至少有一个小时，最后爬到Ks233的GitHub去看了她的路径设置，照抄了才最终解决，而且到现在还只是知其然而不知其所以然，哭。

目前没有搭服务器的需求，但是得琢磨一下找个图床用，付费的也行。现在用的聚合图床也能实现基本功能，但是真的有点慢，在手机端体现的尤为明显，经常加载不出来背景的大图。此外，我觉得也有必要统一管理图片资源，至少在找到可以按账户进行云端储存的图床之前有必要在本地做好整理，打算在D:\hexo-blog目录下新建一个blog-pic文件夹。

这三天真的感觉过的好快，每天都是一眨眼就过去了。我现在终于体会到了吴世豪大学时候在寝室自己废寝忘食做项目玩的感受了，原来做自己喜欢的事情是真的可以完全沉浸到里面茶饭不思的。看来我对自己的认识还是存在不小的误区：我一直以为自己是缺乏长时间集中到学习某样东西的能力。现在看来，只不过是我在做的事情不是我真正喜欢的而已。

此前不觉光阴虚度，近半年来才时常懊悔于自己一事无成，我终于发现了时间一直在追赶着我。28岁的乔丹·巴尔德拉都要当法国总理了，22岁的我还只是个喽啰。不幸的是我已经错过了许多宝贵的机会，幸运的是对我来说仍有花堪折，种一棵树最好的时间是十年前，其次是现在。希望我在未来两年里能够给出让我自己满意的答卷，至少不辜负自己。