news 2026/10/19 8:19:20

如何搭建并发布个人技术博客:从Hexo到Vercel的完整指南

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
如何搭建并发布个人技术博客:从Hexo到Vercel的完整指南

说实话,现在回头看我自己写的“第一篇博客”,排版凌乱、思路跳跃、连代码块高亮都没配,但就是那篇粗糙得不行的小文章,让我把“写博客”这个念头真正变成了习惯,也让我接下来一年的学习路径清晰了很多。很多人卡在第一步:想写又不知道写什么,担心没人看,纠结技术选型,最后干脆放弃。这篇内容就是帮你迈过这道坎的完整指南,从“为什么值得写”到“用什么搭、怎么发布、写什么内容”,再到“如何避坑、怎样坚持”,我把我踩过的和不希望你再踩的坑都拆开讲清楚,不管你是前端后端测试,还是刚入门的小白,照着这套思路走,今晚就能把第一篇博客挂到公网。

1. 为什么劝你尽早写下第一篇博客

1.1 写博客最容易被忽略的价值

很多人以为写技术博客是“输出”,其实它最值钱的部分恰恰是“倒逼输入”。当你决定写一篇《用Python写一个爬虫》的文章时,你强迫自己把模糊的“大概能跑”变成“每一步为什么这么写”。我见过很多同学平时能熟练解决bug,但被问到“你具体怎么定位到这个原因的”就卡住了,这就是典型的隐性知识没有显性化。写博客,就是逼你把这些隐性知识摊开在桌面上,整理成别人也能读懂的逻辑。

另一个价值容易被低估:这是一份可以回溯的成长记录。三个月后回看你第一篇博客里“学了三天终于搞定”的某个配置,你会明显感受到自己对概念理解的加深,这种正反馈比任何打卡软件都有效。很多人去背八股文、刷题,却忽略了写作本身就是最好的复盘。

1.2 想清楚谁在看、解决什么问题

写博客前先想清楚两个问题:你写给谁看,你想解决什么问题。这不是空话。如果你写给自己,那内容可以是笔记体,记录踩坑过程和结论;如果你是写给和你一样的初学者,那就要把术语拆开,每一步说清楚为什么。我见过太多第一篇博客挂在嘴上,其实就是因为选定了一个“没有人真的需要读”的题目,比如泛泛的“某某技术介绍”,这种文章搜索引擎不会喜欢,你自己也没有动力写完。

我的建议很直接:第一篇博客不要追求“全面”,就写你昨天刚解决的一个痛点。比如“配置默认路由时遇到的三种报错及处理”,这类题目非常具体,受众明确,你写起来有素材,读者搜到也觉得有用。解决了具体问题,你的第一篇博客就已经成功了一大半。

2. 博客搭建技术选型,选错不如选熟

2.1 静态站点生成器对比:Hugo、Hexo、VuePress

搭建博客的首选方案,我始终推荐静态站点生成器,而不是带数据库的WordPress或自建服务器。静态站点的优势天然适合个人博客:无需维护数据库和防攻击,生成的是纯HTML页面,加载快,托管成本低,甚至可以是零成本。

现阶段最常用的三个生成器,我列表对比一下:

生成器语言核心优势上手门槛适合人群
HugoGo构建速度快,数千篇文章也能秒级构建,单二进制部署模板语法稍复杂追求性能、熟悉命令行的人
HexoNode.js主题丰富,中文文档和社区活跃,插件生态成熟npm安装即可启动绝大多数前端/全栈初学者
VuePressVue默认支持左侧导航与文档结构,组件化灵活需要对Vue有一定了解喜欢Vue生态,常写文档类内容的人

如果完全没有偏好,我会让你选Hexo。它最大的优势不是性能,而是“踩坑答案多”。你在安装、部署时遇到的所有问题,几乎都能直接搜到现成的解决方案,这对第一篇博客太重要了。Hugo虽然快,但很多主题的文档写得不友好,配置结构够你折腾半个晚上。记住一句话:第一篇博客要确保最快上线,不要为了追求“高级感”选择一个需要额外学习成本的工具。

2.2 托管与发布:GitHub Pages、Netlify、Vercel

站点代码写好了,还要放到公网。这步很多人会栽在“服务器”上:去买一台云服务器,装面板、配nginx、绑域名,折腾两天还没看到自己的博客页面。实际上个人博客根本不用走这条老路,用静态托管平台把生成好的HTML扔上去就完事了。

我主要用这三个:

  • GitHub Pages:如果你代码已经放在GitHub,直接在仓库设置里一键开启Pages,适合完全不想花一分钱的人。缺点是国内访问偶尔不稳定,但好用、省心。
  • Netlify:支持从Git仓库自动拉取构建,自动分配HTTPS证书,还自带表单功能和分线部署预览。我第一篇博客就是挂在Netlify上的,体验非常顺滑。
  • Vercel:同样支持一键导入仓库,全球CDN节点多,访问速度快,部署无脑,适合前端项目,和Next.js等框架衔接尤其流畅。

我的建议是:如果只是写博客,首选GitHub Pages零成本;如果想要自动部署和国内访问更流畅,选Vercel或Netlify直接连仓库,push代码后自动发布,完全不沾服务器。

2.3 为什么我推荐这套组合

我个人至今常用的一套组合是Hexo + GitHub仓库 + Vercel部署,整个流程抽象成三层:本地写作与生成、代码托管、自动构建发布。这三个环节各司其职,互不干扰,好处非常多。

第一,本地专注写Markdown,不关心任何发布逻辑;第二,GitHub负责版本管理,写坏了随时回滚,改起来有底气;第三,Vercel监听到仓库更新后自动执行构建,连“点按钮发布”的动作都省了。前端这行有一句话叫“约定优于配置”,这套组合就是典型的约定式工作流,入口固定、行为固定、结果固定。哪怕你以后想换主题、换生成器,只要Markdown源文件还在,内容永远迁移得走。我见过太多把文章直接写在平台后台的人,平台一改版内容就找不到了,这就是没想清楚“内容本体”和“展示形式”的关系。

3. 一步步搭出并发布你的第一篇博客

3.1 本地环境准备

以我最推荐的Hexo为例,动手前需要三样东西:Node.js环境、Git、以及一个代码编辑器(VS Code即可)。Node.js去官网下载LTS版本就行,安装一路Next,装好可以在终端跑node -v验证。Git同理,装好后配置一下用户名和邮箱,这两个信息会记录在你每次提交里:

git config --global user.name "你的用户名" git config --global user.email "你的邮箱"

这里有一个我当年忽略的点:Node.js版本不要太新。如果你下载的是官网首页的Current版本(不是LTS),一些旧的Hexo插件可能编译不过。例如node-sass这类依赖经常变成“版本地狱”。所以请务必选LTS标记的版本,报错率会直线下降。

装好Node后,全局安装Hexo脚手架:

npm install -g hexo-cli

装完跑hexo -v,有版本号输出就说明环境没问题。如果你发现安装过程慢得像蜗牛,可以把npm镜像切到国内源,实测速度能提升一个量级:

npm config set registry https://registry.npmmirror.com

3.2 初始化站点与写第一篇文章

在你想存放博客的目录下,执行初始化命令。目录名最好和你的博客主题相关,比如my-blog,不要用中文和空格。

hexo init my-blog cd my-blog npm install

跑完上面的命令,你会看到Hexo生成了一套标准目录。.md文件在source/_posts/目录下,主题在themes/目录下,站点配置在根目录的_config.yml里。第二句话比第一句话重要:所有关键配置都在这个_config.yml,它不是摆设。

立刻打开_config.yml,把几个基础项改掉:

  • title:博客名称
  • author:你的名字或昵称
  • language:zh-CN
  • url:未来你的访问地址

我建议你现在就把url填成最终想用的域名,哪怕还没有解析,也要先把格式写对。因为有不少主题和插件会依赖这个字段生成绝对链接,后面再改有可能影响已发布文章的链接结构,越早定越好。默认的主题是landscape,个人觉得它不够好看,但你要记住:第一版绝对不要花大量时间折腾主题,先把默认主题跑通流程,能写能发,再考虑美化。换主题这种事,我后面单独说。

创建一个新页面跑一下生成流程:

hexo new post "Hello World"

这个命令会生成source/_posts/Hello-World.md,你可以在里面随意加点内容,保存即可。接着启动本地预览:

hexo clean && hexo generate && hexo server

浏览器打开http://localhost:4000,看到你自己的博客页面,第一篇雏形已经出现了。这里有一个常见误区:hexo server只是本地预览,关掉终端或退出命令你的博客就没了,所以别以为大功告成,下一步才是真正公开到公网。

3.3 构建、预览与发布上线

在本地确认内容没问题后,要做两件事:先构建,再托管。

第一步,构建静态文件:

hexo clean hexo generate

hexo clean删除之前生成的缓存,hexo generate生成新的静态文件。详细地址在public/目录下,这个目录就是将来要被托管平台读取的东西。

第二步,把站点源代码推送到GitHub。先在GitHub上创建一个新的仓库,不要勾选任何初始化文件。然后在本地初始化仓库、关联远程地址并推送:

git init git add . git commit -m "first blog" git branch -M main git remote add origin https://github.com/你的用户名/你的仓库名.git git push -u origin main

第三步,进入Vercel或Netlify官网,用GitHub账号登录,选择导入刚才的仓库。平台会自动识别出这是一个Hexo项目,自动执行hexo generate并把public/目录作为发布目录。这里我想特别提醒:不要在该平台生成的默认项目设置里写死构建命令,先用默认的。如果默认识别失败,再手动设置构建命令为hexo generate,发布目录为public。

等到平台显示“Production Deployment”状态为Ready,点开分配给你的域名,看到博客的一瞬间,那种“我自己亲手搭了一个网站”的感觉,确实很有成就感。

4. 第一篇文章到底写什么、怎么写

4.1 选题思路:从解决过的一个小问题开始

很多人第一篇博客死在内耗上:觉得自己要憋一篇“很有深度”的技术分享,结果写了一周还没写完。我的建议永远是把门槛降到最低,题目越小越好。比如:

  • 记录某次环境配置问题:从报错到解决,中间试了哪几种方法。
  • 写一个30行的小脚本,解决工作中一个重复劳动。
  • 分析你最近看的源码里一个函数的设计亮点。

“从解决过的一个小问题开始”这句话的关键在于,你踩过的每一个坑,对别人来说都是潜在的信息差工具。比如“Ubuntu下给容器添加代理参数后访问不了数据库”这种问题,在外行眼里是小事,在遇到同样问题的人眼里是救命稻草。篇幅控制在1000到2000字之间就非常合适,完全没必要一上来写“万字长文”。

4.2 一篇技术文章的最简结构

这么多年看了无数篇博客,我的结论是:技术文章不需要华丽的文笔,只需要清爽的逻辑。我写文章一般就三段式:背景与目标、操作步骤、总结验证。

背景部分,用三四句话说明你当时在做什么,遇到什么问题,理想的最终结果是什么。不要假装读者知道所有上下文,把环境版本说清楚就足够了。操作步骤部分,按顺序写你实际上做了哪些动作,代码和命令完整给出,配上一句“这样做的目的是什么”。我知道新手写文章时最爱犯的错误,是贴了一堆代码但完全不解说,读者复制了跑不通,体验很差。所以每段代码之后,请至少写一句执行后应有的输出或现象。

总结验证部分,说明你怎么确定问题解决了,比如“再次运行build命令不再报错,产物正常生成”,或者“页面在移动端表现和桌面端一致”。最后列一个本节的核心收获,给读者一个明确的记忆锚点。

这里有一个我自己的写作习惯:任何需要写sudo命令的地方,我都会多解释一句“哪些情况下你需要管理员权限”。因为初学者经常人云亦云地在不需要的时候加sudo,一旦权限模型搞混,后续排查反而更乱。

4.3 发布前的自我检查清单

发布前花五分钟做一次自我检查,能避免大多数尴尬。我把自己检查一项项列出来:

  • 标题是否具体?不合格的例子是“关于Python的一些心得”,合格的是“用Python的pathlib替代os.path来处理路径的三种场景”。
  • 开篇是否把背景说清了?如果你自己都说不清在解决什么问题,读者更看不懂。
  • 代码是否可运行?每个代码块里的内容可以没有运行环境,但至少逻辑完整、缩进正确。
  • 是否存在未替换的临时信息?比如本地路径、token、个人信息等,这些一旦放出去等于裸奔。
  • 配图是否带了解释?无论引用了什么图,下面最好有一句话说明它显示了什么。

我见过最坑的一种情况,是把调试时打印出来的堆栈信息原封不动贴上去,里面带着私人邮件地址。这属于发布事故,不只是质量问题。发布之前逐项过一遍这个清单,花不了几分钟,但能让你少挨很多评论区的批评。

5. 从第一篇到第N篇:常见问题与坚持心得

5.1 新手最常踩的5个坑

我用一张表把新手提问频率最高的几个问题整理出来,每个问题后面直接给结论:

问题典型表现解决思路
本地能预览,部署后空白没有执行hexo generate或发布目录配置错误确认平台构建命令是hexo generate,发布目录是public
图片显示不出来图片放在了本地绝对路径把图片放到source/images/,用相对路径引用,或者使用图床
修改了主题却不生效只改了文件没执行hexo clean修改主题后先hexo clean再hexo generate,缓存经常是罪魁祸首
更新文章后网站不更新没有触发重新构建用Vercel/Netlify时确认远端仓库是否真的接收到了push,以及日志里构建是否成功
代码块内高亮丢失主题没有对语言类型识别确认代码围栏标注了语言类型,如\\\\`python,而不是没有任何标注

这些坑我一个人就全踩过一遍,现在写给你们,本质上就是让后来者少走弯路。另外,如果是第一次用Git推代码,不要忽略换行符警告,Windows下容易出现CRLF和LF混用问题,建议给仓库加一个.gitattributes文件锁定行为。这个话题展开写又是一篇博文,你只要知道这是很多协作冲突的根源就行。

5.2 更新频率和心态管理

我遇到最多的私信问题就是“怎么坚持下去”。我的答案很笨:把标准降到最低,每周一篇,周末花半小时整理这一周遇到的问题。不要给自己定“日更”这种不可能完成的任务。博客是马拉松,不是百米冲刺。你一年写52篇,每一篇500字,比一天写一万字然后断更三个月强得多。

心态上还要接受一个事实:绝大部分文章根本不会有什么点击量。我自己第一篇文章发布后的一周里,访问量不到十位数。可那不重要。重要的是你养成了一种习惯,让自己对任何一次踩坑都会下意识多问一句“这个能不能写下来”。这种内化了的学习方式,才是博客带给你最长久的东西。

刚开始可以不用管SEO,也不用管“发布时间频率算法”,先把内容本身坚持下去。后面你自然会去研究关键词布局、内链结构,但起步阶段别被这些外部因素带着走。

5.3 一个小技巧:用“碎片笔记”攒素材

最后分享一个我一直在用的素材管理方法。平时遇到难题或灵光一现的瞬间,不要指望靠记忆力,不要关掉终端就去聊微信,腾出10秒钟把这些碎片记下来。我会在本地维护一个draft/文件夹,里面放着几个按日期命名的md文件,压扁所有排版,只保留要点、命令片段、报错截图,甚至就是一个未完成的句子。到了周末,挑一条最有共鸣的碎片,扩展成一篇完整文章,这就是我稳定产出更新的节奏。

这个方法源自一个很简单的道理:写博客最难的永远是“从空白开始”,而碎片笔记相当于把这些空白提前填了几行字。你坐下来时面对的是一份半成品,阻力小很多,进入心流也快很多。我现在写每一篇文章,几乎都是从一个多月前的一条碎片笔记延展出来的,效率比凭空想选题高太多。这一招也推荐给所有觉得“每次都从零开始很痛苦”的人。

第一篇博客真正难的地方从来不是技术,是你愿不愿意把那些犯错和摸索的经历如实记录下来。我能说的就这么多,剩下的,从今晚建第一个仓库开始。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/19 8:17:27

Context Pruning实战:语义相似度驱动的上下文精简与Token成本优化

如果你在一个知识库问答系统上跑过几轮真实对话,大概会懂那种憋屈感:用户问了一个看似简单的问题,你的程序却把过去几轮里塞进来的旧文档、无关日志、重复列表一股脑全带上了。结果Prompt越长,模型回答越慢,Token账单越…

作者头像 李华
网站建设 2026/10/19 8:17:27

Kafka消费组Rebalance:积压、重复、丢失的共同根源与治理

1. 半夜的连环告警:积压、重复、丢数据,全指向了同一个“惯犯”半夜两点被电话叫醒,线上 Kafka 消费延迟从几百条飙到几十万条,重启消费者之后更离谱——同一个订单被处理了三次,还有几个订单在日志里彻底没了下文。第…

作者头像 李华
网站建设 2026/10/19 8:16:58

LangChain 1.0架构瘦身:从全家桶到按需取用,迁移实操指南

LangChain 1.0 发布的消息一出来,做 AI 应用的朋友们分成了两派:一派兴奋地表示终于等到了 API 稳定,另一派则吐槽那些年被架构折腾掉的头发。作为从 0.8 时代一路用过来的开发者,我第一反应是赶紧把线上一个基于 LangChain 的文档…

作者头像 李华
网站建设 2026/10/19 8:16:27

大彩串口屏与STM32F103 UART通信实战:协议解析、帧校验与状态机设计

简介:本资源是一套面向嵌入式初学者与STM32开发者的「大彩串口屏STM32F103」通信实战模板,聚焦解决串口屏快速接入、协议适配与显示控制等典型工程问题,特别适配野火/正点原子系开发板用户。压缩包共262个文件,含36个C源码、38个头…

作者头像 李华
网站建设 2026/10/19 8:16:25

OPC DA转MQTT实战:搞定DCOM权限与数据桥接

做了十几年工业数据集成,这类需求几乎成了我的家常便饭:车间里那套十多年前上线的上位机系统还在用 OPC DA 老协议,集团层面却要求数据尽快接入统一的工业物联网平台,而平台那边只认 MQTT。设备不能停,旧系统不能拆&am…

作者头像 李华
网站建设 2026/10/19 8:16:16

编译原理复习提纲:从词法分析到代码生成的完整手算路线

1. 为什么“编译原理”值得你花时间啃下来如果你正在准备期末、考研复试,或者单纯想补一补计算机基础里最硬的那块骨头,那“编译原理复习提纲”这个标题背后要解决的事情就很明确了:把一门公认难啃的课,拆成能理解、能背、能做题、…

作者头像 李华