将酷壳网(coolshell.cn)整站镜像托管到Gitee Pages 经验分享

一、缘由

在我的职业生涯中,陈皓先生的技术博客------酷壳网(coolshell.cn)给予了我极大的帮助,该博客的一些技术文章,对我个人成长产生了深远的影响。2023年,我还在极客时间订阅了左耳听风专栏,系统地学习了耗子大神的知识。然而,天妒英才,耗子大神在2023年5月13日不幸离世,我们永远怀念他。

考虑到酷壳网(coolshell.cn)托管于外网,在国内访问速度较慢,用户体验不尽如人意。此外,我担心如果域名或主机未能及时续费,这个宝贵的博客资源可能会无法访问。因此,我决定爬取酷壳网的全部内容,并使用 Hexo 工具重新搭建了一个镜像站点,以保留这些珍贵的技术资料。

大家可以下先看看镜像站实现后的效果:jhlxge.gitee.io/coolshell-m...,感兴趣的话,再进一步了解我是怎么实现的。

二、实现

整体方案上我用到了如下工具:

  • magic-api:一款基于 Java 的快速开发框架,使用类 JS 语法实现业务开发,官网地址:www.ssssssss.org/magic-api/
  • jsoup:一款 Java 的 HTML 解析器,在 html 解析处理领域堪称 Java 界的 jQuery。官网地址:jsoup.org/
  • Hutool:一个小而全的 Java 工具类库。官网为:www.hutool.cn/
  • Hexo:基于 Node.js 的SSG(Static Site Generation)工具,有丰富的主题,可定制性强。官网地址:hexo.io/zh-cn/
  • Butterfly主题:一款开箱即用的漂亮的 Hexo 主题,官网为:butterfly.js.org/

2.1、整站数据爬取

该步骤主要做了如下事项:

  1. 爬取列表页,酷壳网首页按分页的方式展示了整站所有的内容,所以我们就根据分页规则将所有列表页的 HTML 都爬取过来即可。
  2. 获取所有的文章页,有了列表页 HTML 后,我们可以解析出所有内容页的 URL,然后根据 URL 获取每篇文章的 HTML
  3. 通过文章 HTML 解析出文章的元数据(标题、正文、浏览次数、发布时间、评论次数、作者、Tag词)。
  4. 解析正文中的图片并下载到本地,并替换文章内容 HTML 中的图片路径

相关事项在 magic-api 中,根据步骤分别定义了不同的接口来做相关的操作:

2.2、镜像站制作

由于本机已安装了Node.js,本处略过Node.js 的安装相关的说明。

2.2.1、初始化工程:根据 Hexo 官网的开始使用文档,我们主要用到了如下两条命令:

csharp 复制代码
# 安装依赖
npm install -g hexo-cli
# 初始化工程
hexo init coolshell-mirror

2.2.2、整合 hexo-theme-butterfly 主题:根据 Hexo 主题文档的说明,将 github.com/jerryc127/h... 的内容 clone 到工程的 themes 目录。

2.2.3、将爬取的内容,按 Hexo 博客的格式导出到指定目录。在执行该操作的时候,我先对 Hexo 的博客做了些了解及验证,Hexo 使用 Markdown 组织博客内容,将 Markdown 统一放到 source/_posts 目录即可。

然后我们依然使用 magic-api 导出我们需要的 Markdown。

2.3、镜像站发布到 Gitee Pages

有了博客内容后,我们可以使用 hexo generate 的生成静态化的整站内容,有了静态化的内容后,理论上我们可以部署到任意支持静态托管的服务器(如使用Github Pages 发布 或 Nginx 发布等),为了减少不必要的成本开支,也为了能满足国内快速访问的需求,我最终选择了将镜像站的内容托管到 Gitee Pages,这是 Gitee 自带的服务:

由于 Gitee Pages 直接支持Jekyll、Hugo、Hexo 等SSG工具,我们只用更新好博客内容,可以基于 Gitee Pages 自带的构建机制实现工程的打包部署。

后记

整个镜像站源码已上传到 Gitee 开源仓库:gitee.com/Jhlxge/cool...

本处主要讲解整体思路,对相关技术细节感兴趣的朋友可到我的个人博客做深入了解:

blog.zhuzhilong.cn/tag/酷壳/

第一次在掘金做技术分享,若有不同的想法,欢迎大家多多交流。

相关推荐
不会敲代码121 小时前
JavaScript 响应式布局的诞生历程:从后端渲染到前端响应式
全栈
全栈前端老曹1 天前
【MongoDB】Node.js 集成 —— Mongoose ORM、Schema 设计、Model 操作
前端·javascript·数据库·mongodb·node.js·nosql·全栈
沈二到不行2 天前
【22-26】蜉蝣一日、入樊笼尔
程序员·ai编程·全栈
chao_7896 天前
双设备全栈开发最佳实践[mac系统]
git·python·macos·docker·vue·全栈
一心赚狗粮的宇叔7 天前
mongosDb 安装及Mongosshell常见命令
数据库·mongodb·oracle·nosql·web·全栈
暴富的Tdy12 天前
【前端开发-循序渐进转向全栈开发】
vue2·web·全栈
重铸码农荣光25 天前
🤖 用 AI 写 Git Commit Message?我让新手秒变 Git 高手!
langchain·aigc·全栈
社恐的下水道蟑螂1 个月前
深入掌握 AI 全栈项目中的路由功能:从基础到进阶的全面解析
前端·react.js·全栈
JOEH601 个月前
🛡️ 微服务雪崩救星:Sentinel 限流熔断实战,3行代码搞定高可用!
后端·全栈
前端付豪1 个月前
必知 Express和 MVC
前端·node.js·全栈