我的建站全纪录

目录

• 一、想法缘由
• 二、初次建站
• 三、再次建站
• 四、开始建站
• 五、介绍一下网站
• 六、特色功能
• 七、鸣谢

---

一、想法缘由

前几年，我第一次有了建立属于自己网站的想法。

当时看到一些推友拥有自己的网站，主要吸引我的点包括：一个自己喜欢的域名、可以在网站上编辑、投递自己喜欢的文章，放自己喜欢的照片，并且能够高度自定义和个性化网站从头到尾的各项内容。同时，我也看到很多人的网站使用了各种各样的模板，非常好看、非常可愛い。于是我开始计划自己建站。

二、初次建站

那是我第一次建网站，从 GoDaddy 上租了一个域名。 考察了几个推友的网站，并看了一些其他博主的案例。最终，我采取了 WordPress + 租用 VPS 的办法来进行运营。当时用的时候，我对 HTML 这种东西完全一窍不通，需要一直去搜教程，整个过程举步维艰。最终选用了一个非常好看的主题，Sakurairo。从 Vultr 上租用了VPS。

一代网站的优点在于：

1. 零代码门槛：WordPress 拥有一个图形化的界面，无论是编辑内容、写文章还是放图片，都可以直接通过图形化界面来完成。无论是在电脑上还是在手机上操作都很方便，手机上甚至还有专门的 App。对于一些完全不懂代码的人来说，这是非常友好的。
2. 丰富的主题选择：WordPress 有很多非常好看的主题，如果不喜欢还可以随时更换。
3. 完善的主题功能：安装主题之后，直接在图形化的管理界面中上传内容，不少主题都有着既简单又美观的功能和插件。

至于缺点，最大的问题在于 VPS。

当时租了一个 Vultr 中距离中国大陆最近的 VPS，位置在东京。虽然它是该网站上最便宜的方案，但一个月也需要 6 美元，价格非常贵。尽管支付了这么高的费用，实际的使用体验却并不理想。这可能是因为网站是动态网页，加上我不确定是自己的配置问题、VPS 的性能限制，还是网络线路的原因，导致每次访问都比较慢，甚至偶尔还会出现无法访问的情况。

总结来说，缺点主要有两点：

1. 连接不畅：动态网页的加载缺陷导致访问体验不佳，经常卡顿。
2. 价格昂贵：每月 6 美元的支出对于我放一些日常内容来说，性价比确实不高。

所以后来我就停止了继续租用 VPS，只是舍不得我挑选的域名，继续租用但是荒废了。

值得一提的是，我当时那个网站在学校某一次重大的事件期间，放了一些我自己搜集总结的信息。在我们学校小火了一把，当时的访问量非常大，都是同学，但是他们都不知道是我的网站。

三、再次建站

这一次建站，主要是因为我在 X 上发现很多推友都建了自己的博客网站。

我查看了一下，发现这些网站没有使用 WordPress，而是使用了 Hexo 来进行建站。这种方式构建的是静态网站，加载速度非常快。更重要的是，它可以利用各种网站托管功能，完全免费。这让我产生了一个想法：把那个租了多年但一直没使用的域名重新利用起来。

经过多方考察研究，我没有使用 Hexo，而是使用了一个叫 Astro 的框架来进行建站。它在大部分地方和 Hexo 是一样的，主要区别在于这个更加现代，性能也更好一点。他们的共同点是，文章都是用 Markdown 格式写成的，且都没有一个便于管理的图形界面。这对于不懂代码的我来说，确实稍微有一些困难。但优点也非常明显：

1. 它可以实现完全免费。我可以用 GitHub 加 Cloudflare 部署，不需要自己去租价格昂贵的 VPS。毕竟对我这种只是放一些平时文章和照片的人来说，租付费 VPS 确实有些太贵、太奢侈了。
2. 它是纯静态的网站。利用 Cloudflare 全球的服务器，可以做到在任何地方加载都非常快，完全不会有卡顿。

当然，我也是刚刚了解静态网站、动态网站等各种架构没多长时间。这只是我通过自己建站，对这些内容产生的一个浅薄了解。如果哪里说得不对，欢迎大家指正并给我提意见。

四、开始建站

经过我前期的一些了解和调查，我最终决定使用的架构是 Astro 架构，主题则采用了一个叫 ShokaX 的主题。这个主题是我看很多人都在使用的，同时它有官方的 GitHub 界面和一份非常详尽的官方文档。我可以完全根据这两个渠道提供的教程，一步一步地自己来进行建站。

• GitHub页面
• 官方文档

具体流程如下：

1. 本地配置与修改
   • 先通过终端命令从 GitHub 仓库将项目下载到本地。
   • 在本地使用 VS Code 修改配置代码，例如网站名称、个人姓名、头像以及各种个性化设置。
   • 直接通过 MD 格式来编写自己的文章，放到特定文件夹中即可。
2. 预览与提交
   • 在本地写好文章后，我一般会通过命令进行预览。
   • 确认预览没问题后，将整个文档通过 commit 和 push 提交到我的 GitHub 账号上。
3. 自动化构建与部署
   • 登录我的 Cloudflare 账号，通过配置 Cloudflare Pages 功能，让它直接读取我 GitHub 上的仓库。
   • 通过我设置的构建配置和环境变量，在服务器上进行网站构建。
   • 之后每次更新内容时，我只需要在本地文件夹写好并提交到 GitHub 仓库，Cloudflare 就会检测到仓库的新变动，并按照要求自动重新构建。

整个过程完全是自动化的，我只需要在电脑上完成编写和提交，等待几分钟，网站就会直接更新了。由于 GitHub 和 Cloudflare 上的功能完全免费，所以建站的成本非常低，只有租赁域名的费用。

在我建站的时候，经常会遇到非常多的问题。我的解决办法是：直接把问题复制下来，粘贴到 Gemini 的对话框里，问它下一步该怎么做。在 AI 大模型的加持下，有任何不懂的地方都可以直接询问，这极大地方便了我解决建站过程中的难题。相比之下，我以前建站遇到不懂的东西，很多时候只能靠搜索引擎。搜索过程非常困难，很多东西甚至搜不到。因为很多网页虽然出自不同的网站和作者，但内容往往千篇一律，根本无法精准定位到我需要解决的问题。有了 AI 大模型之后，我有什么问题都可以直接询问，它会给我一个非常直接且具体的解决办法，而且其中大部分方案都是非常有用的。

官方的文档虽然也非常详细，但它没法根据我们每个人实际的情况来进行个性化的解答。很多问题是官方文档在编写时没有预见到的，而我在实际使用的过程中却遇到了。这期间，我非常仰赖 AI 大模型对我的帮助。在此，我要由衷感谢各种 AI 大模型的提供者，为我提供了非常大的帮助。没有 Gemini 的帮助，我的这次建站根本没办法这么顺利。其中遇到最大的一个问题，也是当时在各种 AI 里面问了好久的问题是 Cloudflare Pages 里面构建网站时的构建配置以及环境变量的设置。当时我用官方文档给出的环境变量和构建配置，尝试了很多次都没有成功。于是我把输出的错误报告提交给 Gemini，它为我生成了如下的配置，非常成功，没有任何问题。

环境变量配置：

类型	名称	值
纯文本	BUN_VERSION	1.3.11
纯文本	NODE_VERSION	22.14.0
纯文本	SITE_URL	https://www.superchat.moe

构建配置：

• 构建命令: bun install && bun run build
• 构建输出: dist
• 根目录: （留空）
• 构建注释: 已启用

此外还有一些功能上的问题，可能是因为这个网站的主题架构在编写时不够完善，或者是不同系统的兼容性导致的。主要问题如下：

1. 网站标题颜色显示异常：在本地预览和在 Cloudflare 构建后的颜色不一致。这导致无论是在白天还是夜晚模式下，无论上传什么样的封面头图，标题始终显示为灰色，非常不明显。
2. 顶部链接功能失效：顶部的链接功能完全无法使用。
3. 字数统计不一致：网站为每篇文章提供了三处字数统计：分别在封面上、标题下方以及网页底部。然而，同一篇文章在这三个地方显示的字数竟然是不同的。
4. 建站时间修改问题：底栏显示的是建站开始的时间，我想将其改为网站实际部署的时间，但官方文档中并没有相关的修改说明。

除开这几个较大的问题，还有一些非常个性化的微调需求，比如想在特定位置删减或添加一行文字，这些在官方文档里也都没有提及。按理说通过查看代码应该能找到修改位置，但我不太懂这个架构，不知道具体该在哪里调整，所以最后这方面我是使用了 CodeX 来处理。

使用 CodeX 的方法也非常简单，我只要提交我的问题，必要时再给出目前网站的截图并告知具体要求，它就可以进行修改。

以我上面提到的几个问题为例：

1. 网站标题样式：我命令它将标题强制设为白色（无论白天还是夜晚模式），并增加黑色阴影。这样能保证在任何背景下，标题文字都清晰可见。
2. 顶部链接跳转：我直接说明需要将哪个链接导向哪个界面，CodeX 就会自动帮我完成修改。
3. 其他细节调整：包括建站时间的显示问题，以及底部页脚需要读取文章作者信息的需求。

这些问题都可以通过直接向 CodeX 描述需求来解决，它会自动帮你进行修改。此外，还有字数统计功能，这个比较复杂，在下文详细阐述。

五、介绍一下网站

首先是网站的域名，这也是我当时精心挑选的域名：SuperChat.moe。“SuperChat”是在 YouTube 上直播时，观众打赏的“醒目留言”的名称。后缀域名“.moe”代表“萌え”，是一个非常经典的二次元的域名。这个域名非常符合这个网站的特性以及我发布的内容。

打开网站的首页，就能看到我的文章，这是最核心的部分。目前我的文章总共分为了 6 个板块。这 6 个板块分别是：

• 赛博工坊
  主要是介绍我对于软硬件折腾的一些内容。接下来我可能会在里面更新一下折腾家用 NAS 的过程。
• 重力观测
  主要更新的是我对于二次元内容（动画、ACG 相关）的一些观测。至于为什么起“重力”这个名字，去看看《It’s MyGO!!!!!》就知道了。
• 时代切片
  每个时代对于不同的人，都可以构建出无穷多个切片。通过对很多个时代不同角度切片的研究，可以窥一斑而知全豹。这里会发一些我对于历史、政治以及其他人文社科方面的文章。
• 仓鼠阁楼
  这里存的不是我的文章，而是我转载的别人的文章。我觉得这些内容比较有价值，或者纯粹是为了把它们存在我的网站上。
• 焚膏继晷
  这个名字出自“焚膏油以继晷，恒兀兀以穷年”。主要存的是我每天学到的内容以及个人的一些思考。
• 人生逆旅
  这是我个人的生活部分，名字取自“人生如逆旅，我亦是行人”。人生于世间，只是匆匆过客。主要存的是我平时的一些个人杂谈和人生感想。

除了文章内容之外，我的网站还有一些其他的版块，比如“关于我”、“友链”以及“动态”。目前这些内容还没有正式启用，里面只是一些我上传的用于测试的内容。
针对“友链”这一部分，如果大家有谁想要把你的网站放进友链中，可以联系我哦。

当然，我头像下面的三个按钮链接是启用的，它们分别是：

1. 我的 GitHub
2. 我的 X
3. 自动向我的邮箱发送邮件的链接。欢迎大家给我发邮件，我看到之后都会回复的。

六、特色功能

网站的特色功能有：

音乐播放器
网站内置了音乐播放器的功能，可以直接播放音乐。目前设置的是 MyGO!!!!! 的网易云歌单，点击右下角的播放按键，就可以直接播放 MyGO!!!!! 的所有歌曲。

字数统计功能

起初我并不清楚这个网站预设的字数统计逻辑，后来在 CodeX 的帮助下，我自己通过 Vibe Coding 实现了一个字数统计功能。它在三个不同的地方直接引用统计出来的数据，从而保证了这几处显示的字数结果完全一致。

当然，我也经过了多次修改。目前它的字数统计逻辑如下：

1. 汉字：每个汉字计为一个字。
2. 英文：每个英文单词计为一个字。
3. 扩展拉丁文：增添了 Unicode 的扩展拉丁库，包含了所有带有变音符号的字母，以及许多语言中特有的、英语中没有的字母。如：Ä、ß、Ç、Ñ等。
4. 日语：每个假名计为一个字。
5. 韩语：每个谚文计为一个字。
6. 西里尔字母：每个单词算一个字
7. 此外还添加了希伯来语、阿拉伯语以及希腊语等语言的支持。

基本上，现在这个字数统计功能已经可以支持绝大部分我能看到的语言，只要不是特别小众的都能涵盖。最终的阅读时间是基于这个总词数除以 300，按照每分钟阅读 300 个汉字或 300 个英文单词的速度来进行计算。

七、鸣谢

我的网站之所以能够这么顺利地建起来，是因为我站在了巨人的肩膀上。感谢这些先驱为我提供的各种技术支持，以下是我的感谢名单：

1. Astro 以及我的主题 ShokaX 的开发者。感谢开发者开源。
2. Google以及 OpenAI的大模型团队。提供了非常详细、非常直接的解答和技术指导。
3. GitHub和 Cloudflare。提供的免费托管与全球 CDN 分发服务，使我不需要继续支付租用 VPS 的费用。
4. 苹果公司的 MacBook Pro，让我能够在上面进行便捷的开发。
5. 微软开发的 VS Code 软件，让代码修改变得非常方便。
6. Typeless 的开发者。这篇文章基本上完全是通过我的口述，由 Typeless 帮我生成并代替我进行打字的。使用过程非常方便，只需要我进行口述，它就可以自动编成文稿，比我自己打字要快很多，同时也非常便于我的表达。