个人博客方案

个人博客

概念

名词

很多人都以为 Vue 只能做 CSR（客户端渲染）或 SSR（服务端渲染），其实现在 Vue 生态已经支持 SSG（静态站点生成） 了，只是实现方式 不在 Vue 本体，而是在 Nuxt 等框架层面

元数据frontmatter

像 Hugo、Hexo、Jekyll 这类博客框架，需要知道除了正文以外的“元数据”，比如：

• 文章标题（title）
• 日期（date）
• 标签（tags）
• 分类（categories）
• 作者、摘要等

这些信息就放在一个叫 Front Matter（前置区块） 的区域里。

博客框架推荐的写法（带元信息）

---
title: "个人博客"
date: 2025-10-10
tags: ["博客", "Markdown", "静态网站"]
---

## 从 markdown 生成网页

这是我的第一篇笔记。

这个“上半部分的三条横线 --- 到 ---” 就是 Front Matter，告诉博客系统一些“文章属性”。

---（三条横线）如果放在正文中间，确实是代表一个水平分割线（horizontal rule）。

当 --- 出现在文件开头时，它就被特殊识别为 “Front Matter”（前置数据区） 的边界。

这不是 Markdown 标准的一部分，而是静态博客生成器扩展的语法。

位置	作用	是否显示在网页上
文件开头的 --- ... ---	Front Matter（元数据块）	❌ 不显示（仅用于配置）
文件中间的 ---	水平分割线	✅ 显示为一条线

输入数据：

用静态网页生成器

这些工具能自动把你的 Markdown 文件转成网页（HTML + CSS）。

无论哪种生成器，大体流程是：

1. 你写笔记（.md 文件）；
2. 博客框架读取这些 Markdown；
3. 按模板（主题）渲染成 HTML；
4. 最终生成静态网页（可部署到 GitHub Pages、Vercel、Netlify 等）。

我要自己解析Markdown

你要做的是这样一个流程：

.md 文件（Markdown 内容）
     ↓
Markdown 引擎（解析器）
     ↓
HTML 片段（可嵌入到你的网站模板）
     ↓
网页（你自己设计结构 / 样式 / JS）

选择一个 Markdown 引擎

取决于你用什么语言写博客系统，这里给你几个主流选择：

Java 主流 Markdown 解析库对比

推荐使用 flexmark-java —— 它几乎等于 Java 版的 markdown-it

Hugo

Hugo 是一个用 Go 编写的静态网站生成器，其速度和灵活性都经过优化。凭借其先进的模板系统和快速的资源管道，Hugo 可以在几秒钟甚至更短的时间内渲染出一个完整的网站。

项目位置：https://github.com/gohugoio/hugo/

VitePress

VitePress 可以说就是 “Hexo 的现代化进化版 + 完全可嵌入 Vite/Vue 生态的轻框架”。 如果你已经熟悉 Vue 或 Vite，那它几乎是最自然、最干净的选择。

https://vitepress.dev/

VitePress 是一个静态网站生成器(SSG)，旨在构建快速、以内容为中心的网站。简而言之，VitePress 会获取您用Markdown编写的源内容，应用主题，然后生成可轻松部署到任何地方的静态 HTML 页面。

Hexo

Hexo 本质上是一个Node.js 驱动的静态博客生成框架」。

它的目标是：让你用 Markdown 写文章，一键生成整站。

也就是说，它是“面向写作者”的工具，不是面向“网站开发者”的框架

Hexo 有三层核心结构：

内容层： content/*.md
模板层： themes/<your-theme>/
引擎层： Hexo 核心逻辑 (Node + EJS)

你能改的部分，主要在：

✅ 内容层（你自己的 Markdown）

✅ 主题层（可改模板样式、布局）

⚠️ Hexo 内部逻辑（很难改）

简单说：Hexo 是“你可以改主题，但不能改发动机”的系统。

Astro

https://astro.build/

内容驱动网站的网络框架

Astro 为世界上最快的营销网站、博客、电子商务网站等提供支持。

Astro是一个用于构建内容驱动型网站（例如博客、营销和电商）的Web 框架。Astro 以其开创性的全新前端架构而闻名，与其他框架相比，它能够降低 JavaScript 的开销和复杂性。如果您需要一个加载速度快且 SEO 表现优异的网站，那么 Astro 就是您的理想之选。

很高级很复杂！

Astro 的定制空间非常大 —— 它几乎给了你“自己造轮子”的自由， 但帮你免去了“打包、路由、优化、渲染”这些底层琐事。

从“HTML 到模板到组件”这一层，几乎 100% 可定制。 底层构建逻辑（比如 Vite、渲染管线）虽然能改，但一般没必要。

怎么选择

核心理念对比

VitePress：写文章、做知识库最舒服；

Astro：做网站、博客、作品集最灵活。

自由度对比（非常关键）

学习文档

Astro.md