解锁SSG新姿势：用VitePress&Github Pages搭建免费个人网站

开篇：

SPA、SSR、CSR这些概念大家应该都耳熟能详，而我们今天要引出的 SSG——静态网站生成，有点像是介于 SSR 和 SPA 之间的一种模式。下面我们讲一下SSG是什么以及如何使用 VitePress 与 Github Pages 免费搭建个人网站。

一、初识 SSG：静态网站生成器的魅力

简单来说，SSG 是一种能将诸如 Markdown 文件这类内容源，结合模板与配置信息，在构建过程中提前渲染出完整 HTML 页面的工具。

与传统依赖服务器端脚本语言实时处理请求、动态生成页面的方式截然不同，它生成的静态页面可直接部署到服务器，用户访问时，服务器能迅速将对应的 HTML 文件发送过去。

传统动态网站构建与 SSG 的直观对比

在网站构建领域，传统动态网站构建方式和静态网站生成器（SSG）各有千秋。但随着技术的发展和用户体验需求的提升，两者的差异逐渐凸显，下面我们来进行详细的对比分析。

• 性能表现

传统方式在每次页面请求时，服务器都需执行数据库查询、模板渲染等一系列操作。这一过程耗时较长，尤其在高并发场景下，服务器资源被大量占用，容易出现延迟卡顿的现象，严重影响用户体验。

而 SSG 由于页面是预先构建好的，服务器无需即时渲染。当用户请求页面时，服务器可以直接返回已经生成好的静态页面，极大地减少了计算时间与网络延迟，让用户能闪电般获取页面内容。

• 安全性

从安全性角度看，传统动态网站因有服务器端脚本运行，存在诸多安全隐患，易遭受 SQL 注入、XSS 等攻击。黑客可以利用这些漏洞，非法获取用户数据或篡改网站内容，给网站所有者和用户带来严重损失。

SSG 没有活动的服务器端脚本，就如同给网站穿上一层坚固铠甲。由于不存在可被利用的服务器端脚本漏洞，有效降低了被黑客入侵的风险，为用户提供了更安全可靠的浏览环境。

• 部署便捷性

在部署方面，几乎所有 Web 主机服务商都对静态网站敞开怀抱。这是因为静态网站的部署相对简单，不需要复杂的服务器配置和维护。像 GitHub Pages 等平台还提供免费层级，方便开发者轻松托管，大大降低了网站部署的成本和门槛。

• 实际案例：以个人技术博客为例

若采用传统方式搭建个人技术博客，博主更新一篇文章后，服务器需即时处理渲染。在这个过程中，读者访问时可能要等待片刻，影响阅读体验。

但使用 SSG，博主更新内容后提前构建页面。当读者访问博客时，看到的是已经生成好的静态页面，随时访问都是秒开，能够流畅阅读知识干货。而且，由于 SSG 的安全性优势，博主无需担忧安全隐患，网站维护成本也更低，这样可以让博主能专注于创作优质内容，为读者带来更多有价值的知识分享。

综上所述，SSG 在性能、安全性和部署便捷性等方面都展现出了明显的优势，尤其适合个人技术博客等类型的网站搭建。

二、VitePress：强大的 SSG 框架

官方资源

• VitePress官方文档地址：VitePress

（一）VitePress 是什么

VitePress 是一个基于 Vite 和 Vue 的静态网站生成器（SSG），专为构建快速、以内容为中心的站点而设计。能把你用 Markdown 编写的源内容应用上主题样式，快速生成可以部署到任何地方的静态 HTML 页面。

（二）VitePress 的特色功能

• 即时热重载

因为内置了vite构建工具，在开发过程中，当修改了代码或Markdown文件，VitePress 能即时反馈，页面自动刷新。

• Markdown 支持

全面支持 Markdown 语法，无论是基础的标题、列表、链接，还是复杂的代码块、表格，都能完美呈现。并且，还允许在 Markdown 文件中直接使用 Vue 组件，为文档增添交互性。比如，你可以轻松嵌入一个 Vue 按钮组件，让原本静态的文档 “动” 起来。

---
hello: world
---

<script setup>
import {
     
      ref } from 'vue'

const count = ref(0)
</script>

## Markdown Content

The count is: {
  
  { count }}

<button class="button" @click="count++">Increment</button>

<style module>
.button {
     
     
  color: red;
  font-weight: bold;
}
</style>

• 主题定制

VitePress 提供了默认主题，简洁美观且实用，同时支持高度自定义主题。可以通过修改主题配置文件，自由调整颜色、字体、布局等样式，还能添加导航栏、侧边栏等个性化元素。

// 示例：修改主题元素
themeConfig: {
   
   
    logo: