【2026最新】从零搭建自己的技术博客Hexo / Hugo / Astro 全栈指南白嫖部署一小时上线含完整代码一句话定位CSDN 是别人的地盘自己的博客才是你的数字资产。本文带你从选型到上线Hexo / Hugo / Astro 三条路线完整代码全覆盖GitHub Pages Vercel 双线部署全程 $0 成本一小时搞定。 目录 一、为什么要有自己的博客️ 二、静态博客 vs WordPress2026 年该怎么选 三、选型决策Hexo / Hugo / Astro 怎么选 四、方案一Hexo GitHub Pages最适合中文博主⚡ 五、方案二Hugo Cloudflare Pages极速构建 六、方案三Astro Vercel2026最强性能 七、自定义域名花 ¥50 让博客更专业✍️ 八、写作工作流让发文变成习惯 九、SEO 流量让文章被搜到 十、避坑指南建博客 8 个高频踩坑 一、为什么要有自己的博客先说三个让我彻底想清楚的理由1.1 你在 CSDN 写的每一篇文章都是平台的资产CSDN 可以 ❌ 任意调整你的文章排名 ❌ 在你的文章里插广告你无法控制 ❌ 关闭你的账号历史有先例 ❌ 改变平台规则让你的内容变得难以访问 你自己的博客 ✅ 完全掌控内容 ✅ URL 永久不变对 SEO 极重要 ✅ 无广告体验纯净 ✅ 可以放置你的联系方式、项目展示1.2 自建博客是最强的技术名片简历上写https://yourdomain.com 访问者看到 - 你的技术文章证明你真的懂技术 - 你的项目展示 - 你的开源贡献 - 你的思考与成长轨迹 这比任何文字描述都有说服力1.3 2026 年建博客的成本极低成本项价格博客框架完全免费开源托管GitHub Pages$0/年托管Vercel 免费版$0/年托管Cloudflare Pages$0/年域名可选¥50-80/年总计¥0-80/年️ 二、静态博客 vs WordPress2026 年该怎么选图2静态博客 vs WordPress 全面对比——速度、成本、安全性三维评测2.1 核心区别WordPress动态 静态博客SSG 用户访问 用户访问 ↓ ↓ 服务器收到请求 CDN 节点直接返回 ↓ 预生成好的 HTML 查询数据库 ↓ PHP 拼接 HTML ↓ 返回给用户 像现做→ 慢 像预制品→ 极快2.2 全面对比维度静态博客SSGWordPress加载速度⭐⭐⭐⭐⭐ 极快CDN 直出⭐⭐⭐ 需要优化托管成本$0GitHub/Vercel 免费$3-20/月需要服务器安全性极高无数据库无后端需要频繁更新插件防漏洞维护成本极低较高插件兼容、更新写作体验Markdown对开发者友好可视化编辑器定制能力高懂前端则无限制高插件生态成熟迁移难度简单都是 Markdown 文件较麻烦数据库导出SEO优秀纯 HTMLLighthouse 95需要 Yoast 等插件辅助适合人群开发者 / 技术博主非技术用户 / 内容团队2026 年结论作为开发者静态博客成本 $0、Lighthouse 95而 WordPress 需要每月付费服务器且静态博客轻松超越其性能得分——没有理由不选静态博客。 三、选型决策Hexo / Hugo / Astro 怎么选图3三大主流静态博客框架对比——Hexo / Hugo / Astro 优劣速查3.1 三句话定位HexoNode.js 驱动中文生态最完善入门最友好最适合中文博主HugoGo 编写构建速度最快1000 页面 2 秒出结果适合内容量大的博主Astro2026 年综合最强推荐零 JS 默认输出Lighthouse 评分极高现代开发体验3.2 详细对比表维度HexoHugoAstro语言Node.jsGoNode.js构建速度⭐⭐⭐ 中等⭐⭐⭐⭐⭐ 极快⭐⭐⭐⭐ 快学习曲线⭐⭐⭐⭐⭐ 最易⭐⭐⭐ 中等⭐⭐⭐⭐ 较易中文资源⭐⭐⭐⭐⭐ 最丰富⭐⭐⭐⭐ 丰富⭐⭐⭐ 较少主题数量400300200Lighthouse90-959595-100插件生态丰富内置居多快速增长React/Vue 支持❌❌✅ 原生支持适合场景中文技术博客大型内容站现代化个人站3.3 一张图选型决策树你是谁 │ ├─ 第一次建博客 / 想快速上线 │ └─→ ✅ Hexo中文教程最多踩坑最少 │ ├─ 文章很多500篇/ 追求极速构建 │ └─→ ✅ Hugo千篇文章 2 秒构建无可匹敌 │ ├─ 熟悉 React/Vue / 想要现代开发体验 │ └─→ ✅ Astro2026 综合最佳零 JS 默认SEO 极优 │ └─ 不想折腾任何代码 └─→ Ghost / Notion Super.so不在本文讨论范围 四、方案一Hexo GitHub Pages最适合中文博主4.1 环境准备# 安装 Node.js需要 18# 访问 https://nodejs.org 下载 LTS 版本# 验证安装node-v# v20.x.xnpm-v# 10.x.x# 安装 Hexo CLInpminstall-ghexo-cli# 验证hexo-v4.2 初始化博客# 创建博客hexo init my-blogcdmy-blognpminstall# 目录结构my-blog/ ├── _config.yml# 全局配置├── source/ │ └── _posts/# 你的文章放这里├── themes/# 主题目录├── public/# 生成的静态文件勿手动编辑└── package.json4.3 安装主流推荐主题Butterfly# Butterfly 是 2026 年中文博客圈最流行的 Hexo 主题npminstallhexo-theme-butterfly# 复制配置文件避免主题更新覆盖你的配置cpnode_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml修改_config.yml# _config.yml 核心配置title:你的博客名subtitle:副标题description:博客描述用于 SEOauthor:你的名字language:zh-CNtimezone:Asia/Shanghai# URL 配置非常重要影响 SEOurl:https://yourusername.github.io# 或你的自定义域名root:/# 主题theme:butterfly# 部署配置后面会用到deploy:type:gitrepo:https://github.com/yourusername/yourusername.github.io.gitbranch:main4.4 写第一篇文章# 创建新文章hexo new post我的第一篇博客# 自动生成source/_posts/我的第一篇博客.md文章头部Front Matter--- title: 我的第一篇博客 date: 2026-05-11 10:00:00 updated: 2026-05-11 10:00:00 tags: - 随笔 - 技术 categories: - 生活 cover: /img/cover.jpg # 封面图 description: 文章描述显示在列表页和 SEO --- ## 正文开始 这里写你的 Markdown 内容... !-- more -- ← 这行以上显示在列表页摘要 这行以下只在文章详情页显示4.5 本地预览hexo cleanhexo server# 访问 http://localhost:4000# 修改文件后自动刷新热重载4.6 部署到 GitHub Pages完全免费Step 1创建 GitHub 仓库仓库名必须是yourusername.github.io 例如zhangsan.github.io 这个仓库会自动映射到 https://yourusername.github.ioStep 2安装一键部署插件npminstallhexo-deployer-git--saveStep 3部署hexo cleanhexo generatehexo deploy# 或简写hexo clhexo ghexo dStep 4GitHub Actions 自动部署推荐每次 push 代码自动构建部署不用手动执行命令# .github/workflows/deploy.ymlname:Deploy Hexo Blogon:push:branches:[main]jobs:deploy:runs-on:ubuntu-lateststeps:-uses:actions/checkoutv4with:submodules:true-name:Setup Node.jsuses:actions/setup-nodev4with:node-version:20-name:Install Dependenciesrun:npm ci-name:Buildrun:npx hexo generate-name:Deploy to GitHub Pagesuses:peaceiris/actions-gh-pagesv3with:github_token:${{secrets.GITHUB_TOKEN}}publish_dir:./public⚡ 五、方案二Hugo Cloudflare Pages极速构建Hugo 构建 1000 篇文章只需 2 秒是大型内容站的首选。5.1 安装 Hugo# macOSbrewinstallhugo# Windows使用 WingetwingetinstallHugo.Hugo.Extended# Linuxsudoaptinstallhugo# 验证hugo version# hugo v0.147.xextended5.2 创建博客hugo new site my-hugo-blogcdmy-hugo-blog# 安装主流主题 PaperMod简洁高性能gitinitgitsubmoduleaddhttps://github.com/adityatelange/hugo-PaperMod themes/PaperMod5.3 核心配置# hugo.toml baseURL https://yourdomain.com languageCode zh-cn title 我的技术博客 theme PaperMod paginate 10 [params] env production title 我的技术博客 description 记录技术与思考 author 你的名字 defaultTheme auto # 自动深色/浅色模式 ShowReadingTime true # 显示阅读时长 ShowShareButtons true # 显示分享按钮 ShowPostNavLinks true # 上下篇导航 ShowBreadCrumbs true # 面包屑导航 ShowCodeCopyButtons true # 代码复制按钮 ← 技术博客必开 [params.homeInfoParams] Title Hi我是 XXX Content 这里记录我的技术探索与思考 [[params.socialIcons]] name github url https://github.com/yourusername [[params.socialIcons]] name twitter url https://x.com/yourusername [menu] [[menu.main]] identifier posts name 文章 url /posts/ weight 10 [[menu.main]] identifier tags name 标签 url /tags/ weight 20 [[menu.main]] identifier about name 关于 url /about/ weight 305.4 写文章hugo new posts/my-first-post.md--- title: 我的第一篇 Hugo 文章 date: 2026-05-11T10:00:0008:00 draft: false tags: [技术, Hugo] categories: [博客] description: 这是文章的 SEO 描述 cover: image: /images/cover.jpg alt: 封面图描述 relative: true --- ## 正文 在这里写 Markdown 内容...5.5 本地预览hugo server-D# -D 包含草稿文章# 访问 http://localhost:1313# 支持热重载5.6 部署到 Cloudflare PagesCloudflare Pages 提供最快的全球 CDN免费额度极其慷慨# 1. 推送到 GitHubgitadd.gitcommit-mInitial blog setupgitpush# 2. 登录 Cloudflare Dashboard# 3. Pages → Create a project → Connect to Git# 4. 选择你的仓库# 5. 构建配置# Framework preset: Hugo# Build command: hugo --minify# Build output directory: public# Environment variable: HUGO_VERSION 0.147.0# 6. 点击 Save and Deploy# 完成Cloudflare 自动分配 yourproject.pages.dev 域名 六、方案三Astro Vercel2026最强性能2026 年 Astro 是大多数新建内容站的默认推荐零 JS 默认输出Lighthouse 评分接近满分。6.1 创建 Astro 博客# 使用官方博客模板npmcreate astrolatest my-astro-blog ----templateblogcdmy-astro-blognpminstall目录结构my-astro-blog/ ├── src/ │ ├── content/ │ │ └── blog/ # 文章目录Markdown 文件 │ ├── layouts/ │ │ └── BlogPost.astro │ ├── pages/ │ │ ├── index.astro │ │ └── blog/ │ │ └── [...slug].astro │ └── components/ ├── public/ # 静态资源 ├── astro.config.mjs └── package.json6.2 Astro 配置// astro.config.mjsimport{defineConfig}fromastro/config;importmdxfromastrojs/mdx;importsitemapfromastrojs/sitemap;importtailwindfromastrojs/tailwind;exportdefaultdefineConfig({site:https://yourdomain.com,integrations:[mdx(),// 支持 MDXMarkdown React 组件sitemap(),// 自动生成站点地图tailwind(),// Tailwind CSS 样式],markdown:{shikiConfig:{// 代码高亮主题theme:github-dark,langs:[],},},});6.3 写文章Markdown / MDX--- # src/content/blog/my-first-post.md title: 我的第一篇 Astro 博客 description: 用 Astro 构建的现代化技术博客 pubDate: 2026-05-11 updatedDate: 2026-05-11 heroImage: /blog-placeholder-1.jpg tags: [Astro, 博客, 技术] --- ## 正文 Astro 博客支持标准 Markdown以及 MDX在 Markdown 中使用 React 组件。MDX 的独特优势在文章中嵌入交互组件--- title: 一篇有交互图表的技术文章 --- import LineChart from ../../components/LineChart.jsx; ## 性能数据对比 下面这个图表是实时交互的 LineChart data{[ { name: Hugo, value: 98 }, { name: Astro, value: 97 }, { name: Hexo, value: 92 }, ]} /6.4 部署到 Vercel一键# 方式一Vercel CLInpmi-gvercel vercel# 方式二GitHub 连接更推荐# 1. push 到 GitHub# 2. 访问 vercel.com → New Project → 选择仓库# 3. 框架自动识别为 Astro# 4. 点击 Deploy# 每次 push 自动重新部署有预览 URL极其方便 七、自定义域名花 ¥50 让博客更专业yourusername.github.io ← 免费但不够专业 yourdomain.com ← 花 ¥50/年大幅提升可信度7.1 购买域名推荐平台腾讯云 / 阿里云中文界面友好备案方便Namecheap价格低支持支付宝Cloudflare Registrar无溢价最实惠域名选择建议✅ yourname.dev 开发者首选后缀 ✅ yourname.me 个人博客常见 ✅ yourname.com 最通用 ❌ 避免过长或带连字符的域名7.2 配置 DNS以 GitHub Pages 为例Step 1在 GitHub 仓库 Settings → Pages 里填写自定义域名Step 2在域名服务商添加 DNS 记录# A 记录指向 GitHub Pages 服务器 类型 主机记录 记录值 A 185.199.108.153 A 185.199.109.153 A 185.199.110.153 A 185.199.111.153 # CNAME 记录www 子域名 CNAME www yourusername.github.ioStep 3等待 DNS 生效通常 10 分钟 ~ 24 小时Step 4在 GitHub Pages 开启 HTTPS自动通过 Let’s Encrypt 颁发证书✍️ 八、写作工作流让发文变成习惯8.1 本地写作工具推荐工具特点适用场景Typora所见即所得 Markdown颜值高专注写作VS Code代码和文章同一工具插件丰富技术文章Obsidian双链笔记知识管理强大长期积累iA Writer极简专注模式长文写作8.2 图床方案解决图片上传问题# 推荐PicGo GitHub 图床完全免费# 1. 安装 PicGohttps://picgo.github.io# 2. 配置 GitHub 图床# 仓库名: yourusername/blog-images# 分支: main# Token: GitHub Settings → Developer Settings → Personal Access Token# 自定义域名: https://cdn.jsdelivr.net/gh/yourusername/blog-imagesmain# 效果截图 → 拖入 PicGo → 自动上传 → 复制 Markdown 链接8.3 完整发文流程Hexo 为例# 1. 创建新文章hexo new文章标题# 2. 用 Typora/VS Code 写作# source/_posts/文章标题.md# 3. 本地预览hexo server# 4. 提交并部署配置 GitHub Actions 后只需这一步gitadd.gitcommit-m新文章文章标题gitpush# GitHub Actions 自动构建和部署# 约 1-2 分钟后线上生效 九、SEO 流量让文章被搜到9.1 基础 SEO 配置Hexo SEO 插件安装npminstallhexo-generator-sitemap--savenpminstallhexo-generator-baidu-sitemap--savenpminstallhexo-abbrlink--save# 永久链接避免中文 URL# _config.yml 追加# 永久链接非常重要中文 URL 对 SEO 不友好abbrlink:alg:crc32# 算法crc16(default) and crc32rep:hex# 进制dec(default) and hexdrafts:false# URL 格式从 /年/月/日/标题 改为更简洁的格式permalink:/posts/:abbrlink/# 站点地图sitemap:path:sitemap.xmlbaidusitemap:path:baidusitemap.xml9.2 文章 SEO 清单每篇文章发布前检查 □ title包含核心关键词50-60 字符以内 □ description100-160 字符自然包含关键词 □ 正文 H2/H3 标题包含相关关键词 □ 图片有 alt 描述 □ 有内链链接到自己博客的其他文章 □ 文章不少于 800 字Google 偏好长文 □ 代码块有语言标注改善代码高亮和可读性9.3 提交到搜索引擎# Google Search Console# 1. 访问 https://search.google.com/search-console# 2. 添加你的域名# 3. 提交 sitemaphttps://yourdomain.com/sitemap.xml# 百度站长工具国内必做# 1. 访问 https://ziyuan.baidu.com# 2. 添加并验证网站# 3. 提交 baidusitemap.xml# 4. 开启自动推送在主题配置中添加百度推送代码9.4 流量增长策略短期1-3个月 - 坚持每周至少发 2 篇建立内容基础 - 每篇文章同步到 CSDN / 掘金注明原文链接 - 在相关技术群/论坛分享 中期3-12个月 - 针对搜索量大的关键词写系列文章 - 建立内链网络文章相互引用 - 参与社区增加外链 长期1年 - 域名权重积累 - 品牌化固定风格、固定更新频率 - 邮件订阅 / RSS 建立忠实读者群 十、避坑指南建博客 8 个高频踩坑⚠️这些坑我都替你踩过了#坑现象解决方案1主题选太复杂折腾主题一周一篇文章没写先用默认主题内容第一2中文文章名URL 出现%E6%8A%80%E6%9C%AFSEO 差安装hexo-abbrlink用哈希 URL3图片用本地路径换电脑/换主机后图片全挂用 PicGo 上传到图床只存 URL4忘记提交源码只部署了public源码丢了源码和部署分两个分支maingh-pages5permalink 频繁改动旧 URL 全部 404外链失效一开始就定好 URL 格式永不改变6没有配置 description搜索结果显示乱码/截断的正文每篇文章必须填description7草稿 draft: true 忘改文章本地有上线没有发布前检查draft: false8选了停更的主题六个月后依赖冲突整站崩掉选 GitHub Stars 1000 且近期有提交的主题完整博客搭建检查清单□ 框架选型Hexo/Hugo/Astro □ 主题安装并基本配置完成 □ _config.yml 填写 URL、标题、作者 □ 安装 SEO 相关插件sitemap、abbrlink □ GitHub 仓库创建并推送 □ 部署成功能在线访问 □ 自定义域名可选 □ DNS 配置 HTTPS 开启 □ Google Search Console 提交 □ 百度站长工具提交 □ 写第一篇文章并发布 最后开始比完美更重要你可能现在还在纠结Hexo 还是 Hugo哪个主题更好看要不要先买域名不要想了就从 Hexo 开始今晚把博客上线。中文博客圈的实践告诉我们Hexo 是初学者的最优选择中文教程最多踩坑最少。先上线再迭代。技术博客的价值在于内容的积累不在于框架的精挑细选。一个有 100 篇干货文章的简单博客远比一个有精美主题却空无一物的博客更有价值。你用什么框架建的博客或者你在纠结哪个方案欢迎评论区交流如果这篇帮到你一键三连点赞 收藏⭐ 关注后续会出博客进阶系列自动化发布 / SEO 精进 / 博客变现。 参考资料Hexo 官方文档https://hexo.io/zh-cn/docs/Hugo 官方文档https://gohugo.io/documentation/Astro 官方文档https://docs.astro.build/zh-cn/GitHub Pages 文档https://docs.github.com/pagesVercel 文档https://vercel.com/docs本文为原创技术分享持续更新。转载请注明出处。最后更新2026-05-11