建站心得
建这个个人博客站大概有 1 个月的时间了，到今天为止这个网站的大体已经成型，接下来谈谈我这一个月的建站感受，算是一个经历的记录，也是给正在准备建站的朋友们一些参考：
建站缘由及上手
原本，我并没有打算建立这个网站，因为这涉及到服务器、前后端的编写、维护等许多工作，我目前的精力并不足以在这个事情上投入太多时间。然而，有一天，我在 B 站看到了汤姆同学_分享的如何快速搭建 GitHub Pages 博客的视频，这个过程看起来非常简单且省力，于是我决定尝试一下。
按照他的视频一步步操作确实很简单，但是这个模板的自定义功能并不丰富。实际上，如果只是单纯地写博客，不进行任何个性化的处理，作者提供的基本功能就已经足够了。但我有很高的自定义需求，所以我尝试去寻找原作者的博客，意外地发现他的网页首页可以展示图片，而我使用他的模板却无论如何都无法实现这个效果。这个问题困扰了我近一个星期，我又消耗大量的精力去看 Jekyll 的官方文档，但仍一无所获。（这里有人要问了，为什么我不直接和作者取得联系询问此事？我当时只是觉得建网站毕竟是一个反复折腾的过程，学习新技能毕竟要不断探索，我对自己能尝试找出问题还是充满希望的。）后来我在博主评论区下发现了一位评论且实现这个功能的用户的反馈，于是我立马找到他 GitHub 仓库的原代码，经过仔细地反复对比才发现是Gemfile这个文件中有关于版本控制的信息，我用的模版版本是 4.0.2，而他用的是 6.x，终于真相大白，我将版本升级后解决了这个困扰我许久的问题。
建站宗旨
图片预览，快速获取信息
我为每一篇博客都配上了预览图片，这样可以帮助读者快速获取文章的内容，而无需细读简介。网站中的所有图片也都是我自己制作的，也正是因为图片处理的工作量大，写一篇博客通常需要花费一个小时的时间。说到图片，就不得不提图片加载的问题。由于国内用户访问 GitHub 的速度较慢，我在 Gitee 上开设了一个镜像仓库来发布博客，但是 Gitee Page 的外链图片加载速度很慢。我制作的月饼图片原图有 31MB，在 Gitee Page 上需要等待两分钟多才能加载完成，这对用户体验是极其不利的。可能用户没有耐心等待图片加载完成，而误以为是图片有问题就离开了。因此，我在尽量保证图片不失真的前提下进行了压缩，有的预览图从 2MB 减小到了几百KB，加载时间变成了毫秒级，这大大提升了用户体验。
打磨视觉体验
当然，我并不满足于现有模板的功能，我想要添加一个“画廊”功能，这样就无需将每张图片都放入文章中了。当时，我对 HTML、CSS、JavaScript 并不熟悉，但我抱着试一试的心态在网上寻找课程自学，HTML 和 CSS 相对简单，一天就能上手实现一些需求。JavaScript 相对较难，这个我会在后面再谈。通过一步步的摸索，我成功地为网站加入了“画廊”这个板块。然而仅仅是简单的图片排列功能并不符合“画廊”这一板块所呈现的核心思想，我在其美观性也花费了不少时间。经过多次尝试，我确定了在电脑上分 3 列排版、平板上分 2 列排版、手机上 1 列排版的形式。并且，图片交错排放，允许用户用鼠标或手指进行交互。当你点击图片时，会有文字展示图片的主要内容，有按钮允许查看更多内容。在“查看更多”内容的弹出卡片中，我也进行了动画效果和字体的优化。在弹出卡片的时候，背景会虚化，卡片呈现毛玻璃的效果，这样不仅让你可以沉浸式地阅读，也可以看到作品的大致轮廓。如果你切换深浅色模式，会发现卡片文字和背景的颜色都会改变。左上角的“红绿灯”按钮是仿照 macOS 的窗口设计，允许你像在 macOS 上交互一样在网页中进行交互。仔细观察它们的边缘，你会发现有一个深色的描边（在浅色主题下观察更明显），这也是为了使 UI 元素更加有立体感。当然，网页几乎适配了所有的显示设备，无论你使用什么设备都能得到较好的观看体验。在 UI 设计上，我花了不少时间去探索，不断修改代码，最终达到了我满意的效果。即使界面都完成了，图片加载依然是个问题。尽管我将图片进行了压缩，图片的加载速度依然让人泪目。经过反复探索，我找到了网易的 LOFTER 这个图片托管平台，将图片上传上去，获取到图片的地址，插入到个人博客就可以了。但是，如果你仅仅这样操作，你会发现图片根本不会显示。这是因为在作者给出的模板中，HTML 文件的<head>中没有设置图片访问元素。修改代码后，使用“Web Inspector”查询图片链接，插入到博客中即可
网页中的所有图片都是我使用软件一点点画出来的，就是为了使图片和我想要表达的内容高度一致。在预览图方面，我需要考虑如何让访客看到图片就能联想到这篇文章要讲什么，如何简洁明了地揭示文章的主要内容。有些不起眼的图片也需要认真制作：虽然主页中的个人头像和评论中的头像很多人并不会仔细去看，但是考虑到设备适配性与美观性，我还是花了很大的功夫在上面（头像不仅仅是 Memoji，还需要降噪、无损修复、分辨率调整）。
与用户的交互关系
设计网页过程中我认为应始终从用户角度出发，例如在“画廊”这一界面中，我反复修改了桌面端的排版和弹出卡片的样式，这不仅适配了几乎所有的显示器，还根据屏幕大小调整可点击的UI元素大小，这样无论用户使用什么设备体验都是流畅且优雅的。同时也要注重细节的打磨，即使一点点的更改可能不会对用户使用造成重大影响，但是这在潜移默化地提升用户的操作体验感。就像你在用iPhone，你说不上哪里流畅哪里感觉高级，但是就是给你带来一种流畅和高级感。我在“画廊”中的弹出卡片UI设计上反复对比原生macOS的UI，做了窗口投影阴影来增加立体感，虽然这在深色模式下不容易被察觉到，但是在浅色模式下十分重要。由此形成的立体感能告知用户当前UI层级关系，不至于混乱。
简洁明了，通俗易懂
在建站过程中，我保持着一个原则：少做加法，多做减法。我希望我的网页简洁明了，将内容一目了然地呈现给用户，不增加可有可无的功能。博客的文案我也尽量写得通俗易懂，即使是完全对我的项目没有接触的人也应该能基本理解。
彩蛋
试试看，你能在这个网站中找到彩蛋吗？
虽然彩蛋应该被读者自己发现，但是如果“忘记了彩蛋是需要被发现的，观众全然不知彩蛋的存在，那么这就成了创作团队自娱自乐的东西。”如果你想自己探索，请跳过下面的一段文字！
- 在我置顶的这篇博客中你是否发现那张图片是二维码和风景的混合物？不过这个还是太明显了，你可以尝试着将主题改为深色/浅色模式（如果你当前是深色模式就改成浅色模式，如果是浅色就改成深色），你会发现什么？
- “画廊”这一页面的标题是打字机效果，点击可填充文字颜色，多次点击可以更换不同颜色。
上手 JavaScript
最后谈谈我是如何快速上手 JavaScript 的（只是应对简单工作，形成大致概念，还是要多学多练才能掌握）。首先是寻找网络上的课程，有些时长不长的课程会带领你对 JS 形成大致概念。接着合理使用 AI 工具，比如语言模型 ChatGPT 可以为你写代码，针对比较陌生的功能可以询问它，但是 AI 毕竟不完善，有的时候它给出的代码会报错，有时算法错误输出不了你想要的内容。如果你真的时间有限，可以先尝试问它，然后根据它的思路寻找方向。