从零搭建个人技术博客完整指南

2026-07-25 · VitePress GitHub Pages 建站

前言

本文介绍如何使用 VitePress + GitHub Pages 搭建一个免费、高性能、SEO 友好的个人技术博客，从零到上线全流程实战。

技术选型

方案	优点	缺点
VitePress	Vue 生态、性能极佳、配置简单	博客功能需自定义
Hexo	主题丰富、中文社区成熟	生成速度较慢
Hugo	速度极快	模板语法学习成本
Astro	现代化、灵活	配置较复杂

综合考量，我选择了 VitePress，理由是：基于 Vue 生态、构建速度快、文档友好、默认主题已经很美观。

搭建步骤

1. 初始化项目

mkdir my-blog && cd my-blog
npm init -y
npm install -D vitepress vue

2. 创建配置文件

在 .vitepress/config.ts 中配置站点信息、导航栏、侧边栏等。

3. 编写内容

使用 Markdown 编写文章，VitePress 支持丰富的 Markdown 扩展语法。

4. 部署到 GitHub Pages

创建 GitHub Actions 工作流，推送代码后自动构建并部署。

5. 绑定自定义域名

在域名注册商添加 DNS 解析记录，在 GitHub Pages 设置中绑定域名。

关键配置

GitHub Actions 自动部署

name: Deploy
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: docs

域名解析

A 记录 @ → 185.199.108.153
A 记录 @ → 185.199.109.153
A 记录 @ → 185.199.110.153
A 记录 @ → 185.199.111.153
CNAME  www → 用户名.github.io

总结

使用 VitePress + GitHub Pages 搭建个人博客，不仅完全免费，而且性能优秀、SEO 友好。整个过程不到半小时即可完成上线。