这是本站的第一篇文章,也是一份关于本站诞生的记录。
凌晨建立的小站
2026 年 8 月 27 日凌晨,我开始搭建这个属于自己的小站。那时夜已经很深,城市逐渐安静下来,而我仍在电脑前整理想法、配置环境、调整页面。建站并不是为了追逐某个热门模板,也不只是为了拥有一个链接,而是想给自己的文字、学习记录、生活片段和偶尔冒出的灵感留一个稳定的地方。
本站取名为“乌托邦”。它不意味着这里必须完美,恰恰相反,我更希望它是一块可以不断试错、持续生长的私人空间。以后这里会记录技术学习、个人日志、阅读与工具,也会收录那些值得回头再看的时刻。
从默认页面开始,到确定站点名称、整理栏目、设计左右侧栏,再到补充音乐、分类、标签和归档,每一步都很小,但这些小步骤共同组成了本站的第一次上线。此刻的页面或许还不够成熟,不过它已经拥有了自己的样子,也拥有了继续更新的起点。
前端技术介绍
本站采用静态博客架构,核心生成工具是 Hexo。文章使用 Markdown 编写,Hexo 在构建时读取文章、页面和主题配置,将内容生成可以直接访问的静态 HTML 文件。这样的方式结构清晰、加载轻量,也方便把写作和页面开发分开维护。
页面结构与模板
- HTML:由 Hexo 和主题模板共同生成,负责组织文章、导航、侧栏、归档和各个页面的语义结构。
- EJS:主题使用 EJS 作为模板语言,将站点配置、文章数据、分类标签等内容注入页面,减少重复的 HTML,并让侧栏菜单和统计信息可以自动更新。
- Markdown:文章正文使用 Markdown 编写,能够自然地表达标题、段落、引用、列表、链接和代码块。
样式与视觉呈现
- CSS:负责页面的排版、颜色、间距、响应式布局和交互状态。
- Stylus:主题的主要样式源文件使用 Stylus 编写。它让嵌套选择器和主题样式的组织更简洁,最终由 Hexo 编译为浏览器可以识别的 CSS。
- 响应式设计:页面针对桌面端和移动端分别处理布局,在较窄的屏幕上调整侧栏、文章和内容区域的排列方式,让手机访问也保持基本的阅读体验。
- 字体与图标:正文和界面文字使用系统字体回退方案,侧栏座右铭使用宋体;菜单和功能区域使用 iconfont 图标字体,保持界面简洁。
页面交互与内容增强
- JavaScript:用于页面交互、返回顶部、加载状态及其他动态行为。
- jQuery:为部分 DOM 操作和事件处理提供基础支持。
- PJAX:通过
jquery.pjax在页面之间进行局部切换,减少重复加载公共页面内容,让浏览体验更加连贯。 - Prism 与 Highlight.js:为文章中的代码块提供语法高亮,便于阅读不同编程语言的示例。
- APlayer:用于提供站内音乐播放功能,让阅读之外也保留一点声音和陪伴。
发布与托管
本站生成的静态文件通过 Hexo 的 Git 部署能力推送到 GitHub Pages,仓库与网站内容保持同步。更新文章或样式后,只需要重新生成静态文件并部署,就可以让线上页面获得最新内容。这种发布方式流程简单,也方便记录和维护每次修改。
感谢
感谢 Hexo、EJS、Stylus、jQuery、PJAX、Prism、Highlight.js、APlayer 和 GitHub Pages 等项目提供的技术支持。正是这些成熟、开放的工具,让一个凌晨开始的想法能够很快变成可以访问、可以书写、也可以不断完善的网站。
也感谢所有贡献开源代码、编写文档、回答问题和分享经验的人。每一份公开的知识都在降低后来者的实践成本,而本站正是站在这些积累之上开始的。
这只是乌托邦的第一天。愿这里有持续更新的文字,有认真做过的事情,也有多年以后回望时仍然觉得值得的记录。