【经验分享】如何搭建不同的博客并择优

1.回顾
首先,如果没有查看往期博文【GitHub Pages + Hexo 搭建个人博客】,可以
点击此处
查看往期博文,了解后再来查看本文,完成挑选
2.局限性
由于本人学识浅薄,所以在一些专业技术时,讲解不深刻,或有些许错误,请各位多多担待
注意:我会讲解一些我比较熟悉的实现方式和注意事项,但一些我不了解的,不会讲解非常深入,但会指明专业博主
2.1主要分类
1.原生开发
示例:我的个人网站即为原生开发,即为本网页(https://yxblog.dpdns.org/)。开源代码如下: 点击这里2.Hexo框架
示例:我的个人博客为Hexo框架开发,即为点击这里。此网站已经闭源。感谢【安知鱼】大佬的开源精神
3.实际操作
3.1原生开发(HTML/CSS/JavaScript)
3.1.1简易实现方式
首先:如果你了解如何编写HTML/CSS/JavaScript这三者的代码,请跳转到下方查看部署到全球网络
1.利用AI工具完成代码编写。
示例:
Gemini 2.5 Flash -- Gemini 2.5 Pro
Claude 3.7 Sonnet -- Claude 4 Sonnet
效果最佳-Claude 4 Sonnet
1.1替换利用AI工具集成的代码编辑器完成代码编写。
示例:
效果最佳-Cursor
2.预览
将HTML/CSS/Javascript代码放入文本编辑器里,点击HTML代码进行本地预览
示例:HTML代码:主页代码命名为index.html
CSS代码:命名为style.css
Javascript代码:命名为script.js

3.推送
将HTML/CSS/Javascript代码推送到CloudFlare全球网络
示例:打开CloudFlare,网址
注册登录账号
点击计算(workers),点击创建,选择Pages,选择"使用直接上传"

为项目取好名字后,上传代码,使用所给pages.dev域名即可访问,有条件可配置自定义域,我以后会出一期关于讲解域名托管CloudFlare的博文,敬请期待!
3.1.2普通实现方式
代码生成及预览部分与【简易实现方式】一样
区别在于:需要在GitHub中创建一个存储库,将代码上传,再将库连接到CloudFlare
步骤跳转至连接到CloudFlare,选择"导入现有 Git 存储库",点击连接GitHub,授权即可,选择自己命名的存储库,部署即可,使用同样的pages.dev域名即可

3.1.3普通实现方式的优势
1.有助于代码开源,方便实现商用
2.在源码丢失时,方便找回
3.方便与大佬进行技术交流
3.2Hexo框架
3.2.1搭建
请务必阅读【GitHub Pages + Hexo 搭建个人博客】,本文会省略相关步骤
本文安装anzhiyu主题,但其他主题我也会进行选择讲解
网络环境问题请自行解决,本人不在该网页提供任何帮助
先来到安知鱼大佬的GitHub项目页,点击此处
根据安装文档进行安装Git,并拉取相关资源
打开代码编辑器
推荐:
修改 hexo 配置文件_config.yml,把主题改为anzhiyu
如果你没有 pug 以及 stylus 的渲染器,请下载安装: npm install hexo-renderer-pug hexo-renderer-stylus --save
覆盖配置可以使主题配置放置在 anzhiyu 目录之外,避免在更新主题时丢失自定义的配置。
通过 Npm 安装主题的用户可忽略,其他用户建议学习使用。
mac os/linux 在博客根目录运行
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml
windows 复制/themes/anzhiyu/_config.yml此文件到 hexo 根目录,并重命名为_config.anzhiyu.yml
以后如果修改任何主题配置,都只需修改 _config.anzhiyu.yml 的配置即可。
3.2.2推送
将GitHub链接到本地存储库,然后即可推送

注意:
在仓库命名时,只能以一下形式进行命名
【用户名.github.io】
respository命名:【用户名/用户名.github.io.git】 ,如图所示
其余修改可查看作者官方安装文档
预览与推送
本地预览
hexo cl 清空缓存
hexo g 生成静态文件
hexo s 开放端口
推送全网
hexo cl 清空缓存
hexo g 生成静态文件
hexo d 部署全网
4.结语
目前我对这两种搭建比较熟悉,如果后面继续学习,则会完善这篇博文