搭建个人技术博客完全指南

1. 方案选择

1.1 两种主要方案对比

维度	平台托管（博客园/CSDN）	自建博客（GitHub Pages/Vercel）
门槛	低，开箱即用	需要学习 Git、静态网站生成器
成本	免费	免费（可选付费增强）
流量	平台自带，SEO 较好	需自己推广
维护	平台负责	自己负责（但几乎免维护）
灵活性	受平台限制	完全自定义
数据所有权	平台托管	完全在自己手中

1.2 方案选择建议

flowchart TD A[开始] --> B{你的目标是什么?} B --> C[快速开始写技术文章] C --> D[选择平台托管] D --> E[博客园 / CSDN] B --> F[长期经营个人品牌] F --> G{愿意学习新技术?} G --> H[是] --> I[自建博客] G --> I2[否] --> D B --> J[需要完全控制和数据] J --> I

推荐路径：

起步阶段 → 博客园（简单、SEO 好、广告少）
有经验后 → 迁移到自建（Hexo + GitHub Pages）
最终形态 → 自建博客 + 自定义域名

2. 平台托管方案

2.1 博客园

优点：

界面简洁，专注于内容
SEO 效果好，百度/Google 收录快
广告少，用户体验好
支持 Markdown 编辑
免费且稳定

缺点：

分类不支持层级结构
界面定制有限
不支持自定义域名（付费版可以）

适用场景：技术文章分享、笔记整理

2.2 CSDN

优点：

流量大，曝光机会多
品牌知名度高
社区氛围活跃

缺点：

广告较多
界面较复杂
体验不如博客园

适用场景：追求流量曝光、新手入门

2.3 平台托管分类设计

由于平台分类大多是扁平结构，建议采用以下策略：

分类（按技术领域）        标签（按文章属性）
├── Linux               ├── 基础知识
├── Windows              ├── 教程
├── 数据库                ├── 实战
├── 编程语言              ├── 经验分享
└── 工具软件              └── 踩坑记录

命名建议：

避免歧义：Linux基础知识 vs Windows基础知识
使用标签补充维度：一篇文章可属于 Linux 分类，同时打上 Shell脚本 标签

3. 自建博客方案

3.1 整体架构

flowchart LR subgraph 开发环境 A[Markdown文件] B[Hexo/Hugo] C[本地预览] end subgraph 代码托管 D[GitHub/Gitee] end subgraph 托管平台 E[GitHub Pages<br/>Vercel<br/>Netlify] end subgraph 用户访问 F[浏览器] G[搜索引擎] end A --> B --> C B --> D D --> E E --> F E --> G

3.2 静态网站生成器对比

生成器	语言	速度	主题数量	学习曲线
Hexo	Node.js	快	丰富	简单
Hugo	Go	极快	丰富	中等
Jekyll	Ruby	较慢	丰富	简单
VuePress	Vue.js	快	一般	中等

3.3 托管平台对比

平台	免费额度	优势	劣势
GitHub Pages	无限存储/带宽	生态完善、Git 原生集成	国内访问稍慢
Vercel	无限存储/100GB月带宽	访问速度快、CDN 全球分布	需要FQ访问控制台
Netlify	无限存储/100GB月带宽	功能丰富、自动部署	偶尔被墙

推荐：GitHub Pages（最简单）或 Vercel（访问更快）

4. 成本分析

4.1 自建博客成本

方案	域名	服务器/托管	SSL证书	合计
极简方案	无（用平台二级域名）	GitHub Pages（免费）	免费	0元
基础方案	~50元/年	Vercel（免费）	免费	50元/年
完整方案	~50元/年	云服务器（~200元/年）	免费	250元/年

4.2 平台托管成本

平台	费用	说明
博客园	免费	基础功能足够
CSDN	免费	基础功能足够
博客园专业版	~150元/年	自定义域名、去广告
CSDN会员	按月/年付费	去广告、更大空间

4.3 存储容量

平台	存储限制	带宽限制
GitHub Pages	1GB（仓库）	无限
Vercel	无限	100GB/月
Netlify	无限	100GB/月

实际估算：100篇技术博客约 5-10MB，远低于任何限制。

5. 推荐方案详解

5.1 Hexo + GitHub Pages 搭建步骤

准备工作：

# 1. 安装 Node.js（推荐 LTS 版本）
# 2. 安装 Git
# 3. 注册 GitHub 账号

初始化博客：

# 全局安装 Hexo CLI
npm install -g hexo-cli

# 创建新博客
hexo init my-blog
cd my-blog

# 安装依赖
npm install

# 本地预览
hexo server
# 访问 http://localhost:4000

部署到 GitHub Pages：

# 1. 在 GitHub 创建仓库，命名为：username.github.io

# 2. 安装部署插件
npm install hexo-deployer-git --save

# 3. 修改 _config.yml
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: main

# 4. 部署
hexo deploy
# 访问 https://username.github.io

常用命令：

hexo new "文章标题"      # 创建新文章
hexo server              # 本地预览
hexo generate            # 生成静态文件
hexo deploy              # 部署到 GitHub
hexo clean               # 清理缓存

5.2 更换主题

# 以 Butterfly 主题为例
npm install hexo-theme-butterfly

# 或使用 git clone
git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

# 修改 _config.yml
theme: butterfly

5.3 常见插件

# Markdown 增强
npm install hexo-filter-mathjax   # 数学公式
npm install hexo-tag-aplayer       # 音乐播放器
npm install hexo-asset-link         # 资源链接

# SEO 优化
npm install hexo-generator-sitemap  # 网站地图
npm install hexo-generator-feed      # RSS 订阅

6. 博客分类设计

6.1 推荐分类结构

行业解决方案
├── 制造业（ERP、MES、WMS、PLM）
├── 政务数字化
├── 医疗信息化
├── 金融科技
├── 教育数字化
├── 物流运输
└── 软件与互联网行业
    ├── 研发效能（CI/CD、代码管理）
    ├── 运维监控（容器、K8s、监控）
    ├── 数据平台（ETL、数据仓库）
    ├── 低代码与协作
    └── 信息安全

工具与软件
├── 开发工具
├── 数据库
├── 操作系统
└── 效率工具

6.2 分类命名原则

原则	说明	示例
具体明确	避免太宽泛的名称	✅ Linux运维 / ❌ 杂项
层级清晰	大类包含小类	企业系统 → ERP、MES、WMS
避免重复	同级分类不重叠	运维监控 vs 开发工具
易于扩展	预留分类扩展空间	先按大领域分，再细分

6.3 标签使用策略

标签 vs 分类：

分类：文章的主要归属，一般只属于一个
标签：多维度标注，一篇文章可有多个

分类：Linux
标签：Shell脚本、CentOS7、自动化、基础知识

分类：数据库
标签：MySQL、主从复制、性能优化、实战

7. 域名配置

7.1 域名注册

推荐域名注册商：

阿里云（万网）
腾讯云
Namecheap（国际）

域名选择建议：

优先 .com、.cn
简短易记
与博客主题相关

7.2 GitHub Pages 自定义域名

1. 在域名服务商添加 DNS 记录
   - A 记录：185.199.108.153（指向 GitHub IP）
   - CNAME：username.github.io

2. 在仓库设置中添加自定义域名
   - Settings → Pages → Custom domain → 输入你的域名
   - 勾选 Enforce HTTPS

3. 等待 DNS 生效（一般 5-30 分钟）

flowchart LR A[用户输入<br/>blog.example.com] --> B[DNS 服务器] B --> C[GitHub Pages] C --> D[你的博客内容]

7.3 Vercel 自定义域名

1. 在 Vercel 项目中添加域名
   - 项目 Settings → Domains → 添加域名

2. 在域名服务商配置 DNS
   - 添加 CNAME 指向 cname.vercel-dns.com

3. Vercel 自动申请 SSL 证书

8. 数据迁移与备份

8.1 Hexo 博客迁移

# 1. 备份博客源码
# 将整个博客文件夹备份到 GitHub 私有仓库

# 2. 在新设备恢复
git clone <你的仓库地址>
cd <博客文件夹>
npm install

# 3. 重新部署
hexo clean
hexo generate
hexo deploy

8.2 博客园文章迁移

方法1：手动导出

博客园后台 → 管理 → 文章管理 → 导出

方法2：写脚本批量迁移

# 使用博客园 API 或 RSS 抓取
import feedparser

feed = feedparser.parse('https://your-blog.cnblogs.com/rss')
for entry in feed.entries:
    print(entry.title, entry.link, entry.content)

8.3 多平台同步发布

flowchart LR A[Markdown 源文件] --> B[本地 Hexo] B --> C[博客园] B --> D[CSDN] B --> E[GitHub Pages] B --> F[个人博客]

同步策略：

本地保留 Markdown 源文件
各平台手动或半自动发布
核心内容保持一致，平台适配格式

9. 常见问题

9.1 GitHub Pages 访问慢

解决方案：

使用 Vercel 或 Netlify 替代
使用国内托管平台（码云 Pages）
配置 CDN 加速

9.2 文章图片存储

方案	优点	缺点
本地存储	简单、不依赖外部	访问慢、占用仓库
图床（SM.MS/路过图床）	访问快	可能有外链限制
GitHub + JsDelivr	免费、CDN 加速	可能被墙
OSS/七牛云	稳定	需要付费

9.3 Hexo 部署失败

# 检查 _config.yml 配置
deploy:
  type: git
  repo: <正确的仓库地址>
  branch: <正确的分支>

# 检查 Git 权限
git remote -v
# 如果提示权限错误，需要配置 SSH Key
ssh-keygen -t rsa -C "your_email@example.com"
# 将公钥添加到 GitHub

9.4 如何提升 SEO

生成 sitemap

npm install hexo-generator-sitemap --save

提交到搜索引擎
- 百度搜索资源平台
- Google Search Console
持续更新优质内容
- 保持更新频率
- 注意文章标题和摘要

附录：推荐资源

博客主题推荐

主题	风格	适用场景
Butterfly	卡片式、美观	个人博客、技术分享
NexT	简洁、经典	文档、技术博客
Matery	卡片式、响应式	个人简历、博客
Fluid	简洁大方	技术博客

学习资源

Hexo 官方文档：https://hexo.io/zh-cn/docs/
Hugo 官方文档：https://gohugo.io/documentation/
GitHub Pages：https://pages.github.com/

整理自搭建博客的相关知识和经验，供学习和参考使用。

posted @ 2026-05-13 13:43 RK5123153 阅读(13) 评论(0) 收藏举报

刷新页面返回顶部

随心笔记