欢迎来到我的个人网站。在这里，我记录学习笔记、分享项目经验，并探讨各种有趣的技术话题。许多朋友对本站的实现方式感到好奇，因此我决定撰写这篇文章，详细介绍本站所使用的技术栈。

核心技术：Jekyll

本站基于 Jekyll 构建。Jekyll 是一个简单、易于使用的静态网站生成器。它允许我使用 Markdown（一种轻量级标记语言）来撰写内容，然后通过模板引擎将这些内容转换成最终的 HTML 网页。

选择 Jekyll 的主要原因有以下几点：

  • 专注于内容创作：我无需关心复杂的后台数据库和服务器配置，只需专注于撰写高质量的内容。
  • 版本控制友好：所有内容和代码都可以通过 Git 进行版本控制，方便追踪修改历史和进行团队协作。
  • 部署简单：Jekyll 生成的静态网站可以轻松部署在各种平台上，本站目前托管在 GitHub Pages 上，完全免费。

本站使用了 Minima 主题，并在此基础上进行了一些个性化定制。同时，我也使用了一些 Jekyll 插件来增强网站功能，例如 jekyll-feed 用于生成 RSS 订阅，jekyll-toc 用于生成文章目录。

交互式模块：JavaScript 与 VexFlow

除了静态内容外，本站还包含一些交互式的音乐学习模块，例如“谱号识别训练”、“音高识别训练”等。这些模块主要使用原生 JavaScript 实现，并借助了 VexFlow 这个强大的音乐符号渲染库。

VexFlow 是一个开源的 JavaScript 库，专门用于在浏览器中绘制精美的乐谱。通过 VexFlow，我可以在网页上动态生成各种谱号、音符、节拍等音乐元素，为用户提供直观、有趣的交互式学习体验。

网站分析：GoatCounter

为了解网站的访问情况，同时尊重访问者的隐私，我选择了 GoatCounter 作为本站的分析工具。GoatCounter 是一款开源、注重隐私的网站分析服务，它不使用 Cookie，也不会追踪用户的个人身份信息。

通过 GoatCounter，我可以了解到：

  • 访问量：网站的总访问次数和独立访客数。
  • 热门页面：哪些文章和页面最受欢迎。
  • 流量来源：访问者通过哪些渠道来到本站。

这些数据对我改进网站内容和方向非常有帮助，同时又避免了侵犯用户隐私的风险。

互动地球：Cobe

首页的互动地球动画是基于 Cobe 实现的。Cobe 是一个轻量级、高性能的 WebGL 库，可以轻松地在网页上创建一个优雅的、可交互的地球模型。

我利用 Cobe 来展示网站的全球访客分布，这不仅为网站增添了视觉趣味，也让我能够直观地看到我的读者来自世界何处。

内容管理：Markdown

本站的所有文章和文档都使用 Markdown 格式编写。Markdown 语法简洁、直观，让内容创作过程变得非常高效。我可以使用任何自己喜欢的文本编辑器来写作，并通过 Git 提交更新。

总结

总而言之，本站的技术选型遵循了“简洁、高效、专注内容”的原则。通过 Jekyll、GitHub Pages、JavaScript 和 VexFlow 等技术的结合，我得以快速构建一个功能丰富、易于维护的个人网站。

希望这篇文章能帮助您了解本站的技术实现。如果您有任何问题或建议，欢迎随时与我交流。

• ... 次阅读