Cynosura

Trying to light up the dark.

About

关于本站

随笔记录一些站点相关的技术细节及设计理念

站名含义

Cynosura / 小熊座

小熊座 的希腊古名拼写,呼应在用 ID: froseiun (from 星雲),及常用昵称"熊"。

而小熊座 α 星恰好为当前的北极星,在极北的夜空闪烁,指引正确的方向。Per aspera, ad astra. / 终抵繁星。

搭建环境

GitHub + Cloudflare Pages

全站现已迁移到 Astro 框架 + Tailwind CSS,当前使用自设计主题 Lucent

站点的源代码托管于 GitHub,并使用 Cloudflare Pages 自动部署。

字体选用

Overpass / 高速公路

标题使用 Overpass Regular,美国联邦高速公路字体 Highway Gothic 的开源实现。代码块采用 Overpass Mono。许可协议:OFL

正文使用系统默认字体,避免中文字形增加加载负担。

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

色彩搭配

水蓝 / 夏空和大海的颜色

全站使用"水蓝"作为主题色,期望能营造夏日清爽的观感。深色模式不使用纯黑,提亮背景缓解强对比度造成的眼睛疲劳,及防止 OLED 显示拖影。

同时在尽量不破坏整体设计的情况下,选用高对比度色彩以符合 WCAG 标准。

Colophon

刊印志 / 造物清单

主体框架

Astro 6 静态站点生成框架,支持内容集合与按需渲染
Tailwind CSS 4 原子化 CSS 框架,通过 Vite 插件集成
Vite 7 Astro 内置的前端构建工具
pnpm 10 快速、节省空间的 Node.js 包管理器

插件模块

Expressive Code 代码块语法高亮,使用 Vesper 主题
Sharp 构建时图片压缩与响应式变体生成
markdown-it RSS 订阅源的 Markdown 渲染
sanitize-html RSS 输出的 HTML 清洗

部署环境

Cloudflare Pages 全球 CDN 自动构建部署
GitHub 源代码托管与版本管理
Sitemap 自动生成站点地图供搜索引擎索引
RSS 提供 Atom 格式的订阅源

字体

Overpass 标题及部分标签用字,代码块使用 Mono 变体
系统字体栈 正文采用系统默认字体,避免加载中文字形

第三方服务

Disqus 文章评论系统

时间轴

记录本站发展历程

  1. 本站建立,博客部分由 Hexo 独立构建

  2. 开始使用域名 cynosura.one

  3. 博客部分由 Hexo 迁移至 Pelican,与主站共用设计风格

  4. 个人介绍页使用 CSS Grid 大幅重构

  5. 博客从 Pelican 迁移至 Astro,并完全整合博客与个人页

  6. 全站使用 Tailwind CSS 进行重构,风格翻新

  7. 启用设计主题 Lucent,新增音乐及图集模块