个人博客调研和开发指南

1、调研背景与目的

1.1 背景

无

1.2 目的

丰富简历，也便于自己后续的学习生活，总结技术

2、前置学习知识点

Markdown语法(后缀名.md)支持网站有GitHub,简书,StackOverflow,有道云笔记等等。撰写博客文章（通过 Markdown 编辑器转换为 HTML 发布到网站）

Typora Markdown编辑器，使用方便，可以看到效果

Visual Studio (辅助，但我觉得还是挺重要的，也可以选择
其他的IDE）的相关配置（看视频教程走就行），终端的使用

HTML(对比Markdown相对复杂，也是前端相关）

Javascipt（前端）

3、搭建方案对比分析

3.1 方案选型对比

• 列举了多种方案，分析了下优劣（上手成本、开发成本、后期维护成本等角度）

  方案	代表平台/技术	定位	上手/时间成本	优/劣	后续维护方案/成本	方案参考地址
  方案1	wordpress	动态内容管理系统（CMS），通用型博客	一周	复杂但资源丰富，如果要深入打造一个严格意义上自己的网站，还得是它。而且后期想要往更远的方向发展（收费），Wordpress是首选。但就是起步比较耗费时间	主流是自己购买服务器和域名，后期需要续费（费用要看你选的配置）	https://www.bilibili.com/video/BV1JBUVYNEgy?spm_id_from=333.788.videopod.episodes&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34&p=4
  方案2	vuepress+GitHub	静态文档生成工具，侧重技术文档与博客	一周不到	零成本（因为服务器和域名用的都是GitHub的），但需要掌握Vue生态知识，不像Wordpress可以直接选择主题模板，后期开发成本较高而且较复杂	未知	https://www.bilibili.com/video/BV16Z4heUEgi/?spm_id_from=333.337.search-card.all.click&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34
  方案3	Github Pages	静态页面托管服务，依附于代码仓库	一周不到	零成本，跟方案2大差不差	未知	https://www.bilibili.com/video/BV12H4y1N7Q4/?spm_id_from=333.788.videopod.sections&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34
  方案4	Hexo	基于 Node.js 的静态博客框架，主打「快速、简洁、高效」，适合技术爱好者或需要轻量化博客的用户。	一周左右	劣势：技术门槛较高，需掌握 Node.js、Git、命令行操作，主题定制需了解HTML/CSS/JavaScript；相比 WordPress，缺乏动态交互功能（如评论系统需集成第三方，如 Disqus,第三方API）优势：纯静态文件，无需数据库，加载速度快，抗攻击能力强；支持 Markdown、代码高亮、SEO 优化等插件，可通过 Hexo 插件扩展功能；社区有大量高质量主题	定期更新 Node.js 版本、Hexo 插件，主题兼容性维护（如 CSS 适配新浏览器）。维修成本较低，每周抽两三个小时看看就行。	https://www.bilibili.com/video/BV1URwNetEQ8/?spm_id_from=333.337.search-card.all.click&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34
  方案5	Hugo	基于 Go 语言开发的静态网站生成器，主打快速构建静态网站，适合个人博客、技术文档、企业展示型网站等对加载速度和性能要求较高的场景。	一周左右	优势：速度极快，生成静态页面效率高；Go 语言编写，跨平台性好，资源占用少；主题丰富且质量高，配置相对简单。 劣势：生态系统相对 WordPress 来说不够丰富，对于一些复杂的动态交互功能支持有限；文档的详细程度和社区活跃度在某些方面略逊于 Hexo 等。	只需定期更新 Hugo 版本和主题，遇到问题可在社区寻求帮助，维护成本较低，每月花费 1 - 2 小时左右。	https://www.bilibili.com/video/BV1mYkcYtEY3/?spm_id_from=333.337.search-card.all.click&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34（Hugo+Cpolar）https://www.bilibili.com/video/BV1bovfeaEtQ/?spm_id_from=333.337.search-card.all.click&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34(Hugo+GitHub,其实跟Hexo+GitHub很类似）

---

3.2 方案流程

---

3.3 最终方案：Hexo

---

3.4 Hexo方案流程图

4、示例文档

好的个人文档示例，网上好的个人博客等等

• https://yuc.wiki/202507/（番剧推荐）
• https://blog.codingnow.com/
• https://www.fomal.cc（Fomalhaut）

5、博客地址

• 最终的线上个人博客地址：heciblog.cn

6、参考资料

• https://www.aliyun.com/product/ecs?spm=5176.29597918.nav-v2-dropdown-menu-1.d_main_1_0_0.45cc7b08UWrGSK&scm=20140722.X_data-63d2555265b7c08b8928._.V_1（阿里云）

• https://cloud.tencent.com/product/cvm?from=13950（腾讯云）

• https://www.bilibili.com/video/BV1Ke4y1v7Qr/?spm_id_from=333.1387.favlist.content.click&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34(Fomalhaut的更具体)

• https://hexo.io/zh-cn/（Hexo脚手架安装）

• https://www.bilibili.com/video/BV1tyAtetEd1/?spm_id_from=333.1387.favlist.content.click(VsCode安装教程)

• https://www.bilibili.com/video/BV1URwNetEQ8/?spm_id_from=333.1387.favlist.content.click（该博主的视频适合快速理解搭建Hexo博客的流程，具体安装主题方面讲的不是很清楚，详细的可以看下Fomalhuat的）

• https://www.bilibili.com/video/BV1GM4m1m7ZD/?spm_id_from=333.337.search-card.all.click&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34（GitHub博客的搭建，up主教的是借助别人博客的框架快速搭建的方法，可以借此熟悉下GitHub仓库的搭建流程和绑定域名，文档上面也有介绍过）

• https://vercel.com（Vercel的官网，一个免费的服务器，借助它与GitHub关联就可以只购买域名就行了，因为Vercel提供的网站二级域名国内需要翻墙才能访问）

• https://butterfly.js.org/（这是基于Hexo框架下的主题官网之一，如若要使用它为主题，详细配置可以直接去官网查，建议一开始按着Fomalhaut的走，后面有一些地方不理解再去butterfly官网查询，一开始直接看官网可能会看不懂，Fomalhaut的操作也是基于官网的教程走的）

• https://www.bilibili.com/video/BV1GM4m1m7ZD/?spm_id_from=333.337.search-card.all.click&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34(GitHub博客搭建的视频)

• https://github.com/Meekdai/Gmeek(GitHub博客搭建的本地框架)