2020 - 2022:Carrd
大约在 2018 年,因为我有两个姓,人们开始叫我"Marvil"当作昵称。这个称呼就这样固定了下来,我决定把它用作我的网络身份。我把大多数社交媒体账号都起成了它的变体(比如当时我在 Instagram 上的 @jorgemarvil)。
随着我想有更多的网络曝光来展示我的 3D 渲染作品,2020 年底我通过 Hover 注册了一个域名:marvil.cn。这是我能找到的最便宜的 marvil. 域名,而且后缀听起来还算专业。.co 这个后缀感觉很酷,每年大约 30 美元,也算负担得起。
当时我的网页开发经验非常有限,所以我只是把它链接到了 Carrd(还有人记得它吗?)。Carrd 非常符合我当时的需求,它是一个极其简单的单页落地页工具,几分钟就能建好网站。我只花了 90 秒自定义,网站就上线了。
2022:第一个自制网站
到 2022 年中,我已经学了足够多的 HTML、CSS 和 JavaScript,可以构建一个简单的静态网站了。我之前做过一些极其简单的网页应用(比如我电脑上的应用启动器),很想做点更复杂的东西。更重要的是,Carrd 的局限性开始让我难受,我想对布局、动画,尤其是功能有更多的控制权。
我决定从零开始自己做网站,并免费托管在 GitHub Pages 上。回头看,这套流程其实相当简单:创建仓库,添加一个 index.html 文件,在设置里开启 GitHub Pages,然后绑定域名。但以我当时有限的经验,git 让人觉得陌生又可怕,而 DNS 则一如既往地是场噩梦。
不过我还是成功搞定了,而且立刻拥有了带全球 CDN 的 HTTPS 托管。免费的,相当不错!我花了几周时间设计和编写这个网站,用的是……记事本……
但作为第一次尝试,最终成果还算不错!我有一个令人尴尬的首屏区域,配着俗气的标语,还有一些指向其他项目和社交媒体的链接:
尴尬还不止于此,联系表单实际上只是触发了一个 IFTTT webhook,方法是,呃,把你重定向过去。没错,它真的会打开一个新标签页,访问 http://maker.ifttt.com/trigger/contactform/with/key/my-key?value1=[name]&value2=[email]&value3=[message]。天哪。
为自己辩解一下:当时我根本不知道后端是什么,而 IFTTT 过去在智能家居自动化方面很好用,所以我对它很熟悉。即便如此,让联系表单真的打开一个新标签页,显示"Congratulations! You've successfully triggered the contactform event"这样的消息……还是很丢人。
2023 - 不那么离谱的设计
到 2023 年初,我又改了一次网站。这次它有了和我写这篇文章时类似的背景首屏区域,但有点分散注意力,而且图案太细了。令人尴尬的首屏文字换成了稍微能接受一点的内容,副标题也没那么让人起鸡皮疙瘩了:
可惜联系表单还是那套 IFTTT 的歪招。
2024 - 现代化重新设计
2024 年 12 月,我彻底改版了网站。我刚看了一堆性能优化的视频(是讲其他语言的,所以完全不相关),受到启发想让我的网站更快。我有点着迷了,想知道自己能把加载速度做到多快。
这一次,我把首页做得超级轻量,加载画面使用内置的 CSS 动画和系统字体,并且只有在所有内容完全加载完毕后才会离开加载画面。我添加了一些 JavaScript 作为图片加载器,它会先加载图片的 -lq(低质量)版本,等完整分辨率版本加载完成后再替换。
我把我的 Logo 作为硬编码的 SVG 直接写进 HTML,这样它无需任何请求即可瞬间加载,还加了一些逻辑来显示有趣的、带科技感的加载提示语,以及一个在所有内容加载完毕后把加载画面移出视野的脚本。
我还对网站进行了全面的重新设计,与我的新 Logo 和品牌风格相呼应。我改成了更现代的外观,配色更漂亮,图标更精致,整体语气也更专业,顶部有指向我的 GitHub、电子邮件和 WhatsApp 的链接:
内容部分现在展示了我的一幅渲染作品和一些代码相关的东西:
联系表单终于换成了托管在 Heroku 上的正经 Express 后端(谢天谢地)。它使用 Nodemailer 和 Discord webhook,每当有人填写表单,就会同时给我发一封邮件和一条 Discord 消息。终于,不用再搞 IFTTT 那些乱七八糟的东西了。
设置起来超级简单,这让我觉得自己本可以在几年前就这么做。费用只有每月 7 美元,而我甚至不用付,因为我有 GitHub Student Pack 提供的免费额度;SSL 也是免费的,由 Heroku 自动集成的 Let's Encrypt 提供。
2026 - 当前版本
2026 年 1 月,我想写一篇新的博客文章,准确地说是一篇作品集条目,内容是关于我的 homelab。然而,由于我的网站是纯静态的 HTML/CSS/JS,我意识到每次想写点新东西就要这样添加新页面会非常痛苦。光是创建一篇新博客文章,就意味着要复制一篇已有的文章、编辑 HTML、手动更新 /blog/ 索引页,而如果我还想做 RSS 订阅源,那就更麻烦了。这既繁琐又容易出错,而且扩展性很差。
我决定借鉴 Jekyll 的思路,用 Node 编写一个自定义的静态网站生成器来重建我的网站。我本可以用 Jekyll、Hugo,或者其他几十种 SSG 中的任何一种,但那样就没意思了。我想要一个量身定制的东西,能适配我已有的内容结构和优化,而且不需要我去精简臃肿的功能。
核心理念很简单:用 markdown 写博客文章,在顶部放一个 % METADATA 块,存放文章标题、日期、作者、标签等特定信息。然后让 SSG 读取这些文件、解析元数据、用 marked 把 markdown 转换成 HTML,再使用自定义模板生成最终的静态 HTML 文件。
到目前为止,它的效果好得出奇。事实上,我现在正是在用 Markdown 写这篇文章!我只需新建一个 post.md 文件,在顶部添加元数据,写文章,再把需要的图片放进 /images/ 文件夹。然后运行 node build.js(实际上,我把它设置成了 Cloudflare Worker),剩下的重活就交给它了。
它还有很棒的新功能,比如用 Sharp 自动生成响应式图片(包括我之前提到的 -lq 版本)、用 highlight.js 做代码语法高亮,以及自动生成用于 SEO 的元数据。和我以前的方案相比,它轻松太多了,我也很期待之后还能往里面加入哪些功能!
我还给网站添加了一些新功能。比如新的留言板页面,访客可以在上面给我和未来的旅人留言。说实话,这个点子是从另一位开发者那里借来的。我还"偷"了他们的微博客创意,添加了我自己的 页面,我可以在那里发布简短的动态和想法,而不必写一篇完整的博客文章。抱歉啦,Ari!
最后,我还给博客文章加了评论区,由我用 Express 和 SQLite 新建的后端驱动。读者可以留言并就文章展开讨论。我早就想做这个了,但 Disqus 这类方案对我的网站来说太重、太有侵入性。这样,我就能完全掌控评论,并按需进行审核。
我为管理后台添加了基础的审核功能,比如删除评论和限流。这些交互还需要一个新的"你是人类吗?"验证,因为即使是我这个小网站也被机器人刷屏了。为此,我实现了 re.shittycaptcha.js,一个简单的验证码,要求用户输入服务器生成的 1 到 999 之间的某个随机数字。它非常基础,但对我来说够用了,它能拦住大多数机器人,又不会像扭曲图片验证码那样给真人用户带来太多不便(而且对我来说完全免费,哈哈)。
总之,我对我的个人网站这些年的演变非常满意。这是一段有趣的旅程,我也很期待它接下来的发展。每一次迭代都让我学到了新东西,无论是设计原则、性能优化、后端开发,还是 CI/CD。这个网站随我一同成长,在某种程度上已经成了我作为开发者的数字映像。
欢迎去看看留言板、μBlog,也欢迎在这篇文章下留言!我很想听听你们对我 marvil.cn 这段旅程的想法和反馈。