LOADING

加载过慢请开启缓存 浏览器默认开启

我是如何搭建个人博客的

这里大致介绍了我搭建此个人博客的思路,以供各位参考。

1.大致思路

本地书写好静态html文件→托管到GitHub仓库→绑定到域名(通过服务器,本质是把服务器的IP绑定到域名上)→借助一些云服务的CDN加速

2.名词解释

(1)DNS解析

将你输入的网址(域名)转换成服务器真实 IP 地址 的过程。

👨‍💻 用户输入:www.example.com

📤 DNS 查询,查询出ip地址(例如 114.114.114.114)

(2)CDN加速

CDN(Content Delivery Network,内容分发网络)是一种将网站的静态资源(如图片、CSS、JS、HTML、视频等)缓存到全球多个节点服务器上,让用户从离自己最近的节点加载资源的技术。

(3)服务器

本质也是计算机的一种

服务器

(4)具体流程

用户输入域名

本地缓存是否命中?

DNS 查询(本地 DNS → 权威 DNS → CDN 接管)

CDN(Cloudflare)返回最近节点 IP

浏览器访问 CDN 边缘节点

边缘节点是否缓存资源?
├──✅ 命中缓存:直接返回页面
└──❌ 未命中:从源站拉取(GitHub Pages),缓存后返回

(5)除了加速外,CDN的作用

因使用CDN加速后,返回的时CDN节点的IP,故而还可以一定程度上实现隐藏真实服务器的作用。

以本人的搭建为例,即cloudflare是代理服务器,vercel是真实服务器,用户访问个人博客时,只会拿到CDN后最近节点的IP而拿不到我真实服务器的IP。

3.参考教程

(1)阿里云购买自己的域名(❗注:不是买ip )

(2)hexo写静态网页,托管到GitHub:https://www.bilibili.com/video/BV1Hi421a7K4?vd_source=583e245d8da604fa277cac2494d534c1

(3)把GitHub托管的代码部署到vercel,再借助cloudflare的加速:https://www.bilibili.com/video/BV1mu4y1t7Vm?vd_source=583e245d8da604fa277cac2494d534c1

(4)借助ai辅助理解代码,修改样式。

(5)本地书写md文件,向上post即可。

4.注意事项

(1)需要修改/配置文件

①hexo-generator-category/generaor.js

需要参考tags的generator.js增加自动生成分类首页 /categories/index.html的代码,否则在首页”分类”功能无法打开(现在修改后仍有bug,待修复)

②hexo-asset-image/index.js

先理解修改(https://blog.csdn.net/weixin_43694227/article/details/135735519)

再把**$(this).attr(‘src’, src);修改成$(this).attr(‘src’, src.replace(/^/+/, ‘’));** // 去除开头的斜杠

否则如果我image的路径写的是(image.png)会解析成scr=“/image.png” 而导致无法识别