个人博客搭建hexo+github pages避坑

这是我尝试写的第一篇博客，因为刚刚搭建的博客，搭建过程也是遇到了一些问题，搭建流程网上基本都有，在这儿就分享一些我遇到的问题，及最终的解决办法。

一、域名DNS检查不通过

我用的是阿里云的域名，其中注意：

1.要进行域名持有者的实名认证

2.要进行域名过户邮箱的实名认证

3.添加 CNAME 记录时，

主机记录：填写www(eg.我填的blog 注意这里不要选@)

记录类型：选择 CNAME（别名的意思）

记录值：填写用户名.github.io（写用户名，注意不是仓库名）

二、本地和用户名.github.io加载没有问题，更改域名后css,js无法加载

原因：路径错误

更改域名之前使用用户名.github.io加载应为：

1 2	url: https://用户名.github.io root: /仓库名.github.io/

更改域名之后应为：

1 2	url: https://blog.brisrcu.cn root: / #这儿不要再写仓库名了

三、修改主题后网页没有变化

修改主题主要是通过修改主题里的_config.yml文件来完成的，像这个路径是没问题的(D:\app\Hexo\blog\themes\butterfly\ _config.yml)，正常修改是没问题的，没有变化主要是网络的原因，还有像新发一篇博客或修改内容，它加载上去都是需要一定时间的，我当时是以为我的这个文件放的位置的问题，但是得注意的是注意该文件编写时的缩进等的问题（缩进出错 hexo clean/g/d时也会报错）。

四、图片加载过慢

这个主要是图片较大造成的，可以考虑以下几个优化措施：（我当时是直接通过压缩图片和调格式优化的）

1. 压缩图片

使用图片压缩工具：可以使用工具如 TinyPNG 或 ImageOptim 来压缩图片文件大小，而不明显降低质量。
调整图片格式：使用合适的图片格式，比如 JPEG 对于照片，PNG 对于透明背景，WebP 对于高压缩比和质量（webp比较建议）。

2. 图片尺寸

调整图片尺寸：确保图片的实际尺寸与显示尺寸匹配。不要使用比实际显示需要的大图像。
使用响应式图片：根据设备屏幕的大小，使用不同尺寸的图片，以减少不必要的下载。

3. 图片加载方式

使用懒加载：通过懒加载技术，只在用户滚动到图片位置时才加载图片。可以使用 loading="lazy" 属性或 JavaScript 插件来实现。

懒加载设置过程：

（1）设置hexo-lazyload-image模块

1	npm install hexo-lazyload-image --save

（2）在站点配置文件_config.yml增加配置

lazyload:
  enable: true
  onlypost: false # 是否仅文章中的图片做懒加载, 如果为 false, 则主题中的其他图片, 也会做懒加载, 如头像, logo 等任何图片.
  loadingImg: /images/loading.png # 图片未加载时的代替图（不填写使用默认加载图片）

异步加载图片：考虑使用异步加载图片的方法，尤其是在较大的图片或图像库中。

4. 内容分发网络 (CDN)

使用 CDN：将图片和其他静态资源托管在 CDN 上，这样可以利用 CDN 的分发节点加速资源的加载速度。常见的 CDN 服务商有 Cloudflare、AWS CloudFront 和 Akamai。

以Cloudflare为例：

（1）注册 Cloudflare 账户并登录。

（2）添加站点，输入您的博客域名，并选择免费套餐。

（3）Cloudflare 会自动扫描现有的 DNS 记录，你可以手动检查或添加记录。关键是确保以下几条记录：
- CNAME 记录：如果你使用 GitHub Pages 的默认二级域名（如 username.github.io），确保 CNAME 记录正确指向 GitHub Pages。
- A 记录：如果你使用自定义域名，确保 A 记录指向 GitHub 提供的 IP 地址（185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153），并启用 Cloudflare 的 CDN（小云朵图标应该是橙色）。
（4）更改域名的 DNS 服务器：你需要前往你购买域名的注册商平台，更新域名的 DNS 服务器为Cloudflare 提供的 DNS

（5）启用 SSL/TLS 和 CDN 缓存：在 Cloudflare 仪表盘中，根据自身需求设置

（6）Cloudflare发送邮件给你后，not active将变成active