Jekyll2026-08-07T16:43:10+08:00https://glancake.github.io/feed.xmlGlancake’s Blog个人技术博客，记录学习与思考。Glancake从聊天室到博客：我的 Jekyll 建站之旅2025-01-15T12:00:00+08:002025-01-15T12:00:00+08:00https://glancake.github.io/posts/2025/01/15/hello-jekyll从零搭建一个个人博客，在今天的选择实在太多了。你可以用动态的 WordPress、Hexo、Hugo，也可以选择托管平台的 Medium、Notion。但如果你和我一样，想要完全掌控数据和样式，又不想花钱买服务器，那么 Jekyll + GitHub Pages 可能是最优雅的解决方案。

为什么选择 Jekyll

  1. 零成本托管：GitHub Pages 免费提供 HTTPS、全球 CDN
  2. 版本控制：所有文章以 Markdown 存在 Git 仓库中，永远不会丢失
  3. 极简工作流：写完文章 git push，自动构建发布
  4. 高度可定制：从布局到配色，一切由你控制

从聊天室到博客

这个站点之前是一个基于 Firebase 的实时聊天室应用。虽然功能齐全，但作为个人主页，一个博客显然更合适——它可以沉淀内容，而不仅仅是即时通讯。

改造过程并不复杂：

  • 保留 GitHub Pages 的部署流程（.github/workflows/static.yml）
  • 用 Jekyll 替换掉原来的 SPA 架构
  • 将文章数据从 Firebase 迁移到 Markdown 文件
  • 重新设计了极简阅读风格的样式

一些设计决策

明暗模式

我在 CSS 中使用了 data-theme 属性配合 CSS 变量来实现明暗切换。首次加载时通过 prefers-color-scheme 媒体查询跟随系统设置，用户手动切换后存入 localStorage 持久化。

:root {
  --bg: #ffffff;
  --text: #2d3436;
}

[data-theme="dark"] {
  --bg: #1a1a2e;
  --text: #e0e0e0;
}

代码高亮

Jekyll 默认使用 Rouge 作为代码高亮器。我在样式中定义了浅色和深色两套 token 颜色，确保代码块在两种模式下都有良好的可读性。

接下来的计划

  • 添加标签聚合页面
  • 集成 Giscus 评论系统
  • 优化图片懒加载
  • 添加文章搜索

如果你也想搭建类似的博客，不妨从我的仓库 fork 一份开始。

]]>GlancakeMarkdown 写作指南：让你的技术文章更易读2025-01-10T18:00:00+08:002025-01-10T18:00:00+08:00https://glancake.github.io/posts/2025/01/10/markdown-writing-guideMarkdown 是技术写作者的标配。语法简单，但写出易读、美观的文章仍然需要一些技巧。以下是几条我遵循的原则。

标题层级

文章应该有清晰的结构。通常：

  • # 用作文章标题（由模板自动渲染）
  • ## 用作主要章节
  • ### 用作子章节
  • 避免使用 #### 及以下的深层嵌套——如果内容需要那么多层级，或许该拆成两篇文章

代码块

始终指定语言以获得正确的语法高亮：

```python
def hello():
    print("Hello, World!")
```

渲染效果：

def hello():
    print("Hello, World!")

行内代码用反引号包裹：import this。

列表和引用

无序列表适合并列要点，有序列表适合步骤说明：

  1. 第一步
  2. 第二步
  3. 第三步

引用块用来强调关键点或引用外部内容：

简洁是智慧的灵魂，冗长是肤浅的藻饰。 — 莎士比亚

链接和图片

  • 外部链接用 [文字](URL)
  • 内部链接用 Jekyll 的 {% link _posts/xxx.md %}
  • 图片加上替代文本：![描述](URL)

段落节奏

一段话不要超过 5 行。长段落让人窒息，适当的空白让阅读更轻松。

善用粗体标记关键词，但不要在一段话里用超过 3 次——否则反而没有重点。

以上就是我遵循的一些写作习惯。说到底，好的技术文章不在于辞藻华丽，而在于结构清晰、表达准确。

]]>Glancake