Blog技术贴2： CF Wrangler CLI + Hexo
对于偏向内容的Blog，技术仅仅是实现的手段，以简单、快捷为好。在Blog 技术贴：Hexo+Github+Cloudflare中讲了通过Github中生成Git项目,然后在Cloudflare Pages中调用的方法实现了Blog，网上许多教程也是这样做的。但实现上这是绕多了Github这一步，而在实现上传Blog贴子的时候，常常遇到Github网络被迫不稳定，连接不上的情况。下面的方法就是绕过Github建设Blog。
基本思路是，在本地生成Hexo Blog然后上传CF Worker and pages上线。 可分几步：
- 环境准备 → 2. 本地调试 ~~ → 上传Github~~ → 3. 上传CF Worker
1. 环境准备
申请帐号
环境准备对于不同人有所不同。需要用的帐号有namesilo和Cloudflare(简称CF)，删除的是现在不用的内容。
- Namesilo: Namesilo就是个域名的知名大卖家，当然也可以换成其它卖家。Namesilo促销时常有1美刀的deal。
Github: 码农的世界，1G免费空间可来托管Blog；Github上有太多新鲜、炫酷的东东了…→ 无须使用Github了。- CloudFlare: 托管DNS，并可以利用cloudflare强大的CDN加速功能，代理网站，网络安全及其它太多福利，江湖人送外号：大善人。部署在CF上还可解决在赵国访问不畅的问题。CF免费帐户有1GB免费空间，workers 10万次/每天访问，存储10万次/每天读取， 1000次/每天写入、删除操作；最多100个worker。对于个人小网站应该足够了。R2有10GB/月免费空间。
进入上面的网站，分别申请帐号。这2个帐号是必须用到的，CF是可选项 → 必须的了 。
购买域名 → 没有变化
在Namesilo上选择自己喜欢的域名，加入购物车，付账。 新帐号用优惠码freefornew 或 1bonus立省1美刀。
Namesilo最好把选择“Keep my information private”，保护个人信息。
虽然有好些网站提供免费的一级或者二级域名，但终究是人家的东西。随时可能被收回不说，自选DNS，自建邮箱这些都没法玩了。总之，这个域名钱还是不要省了。
购买域名的时候土豪们可以选择同时购买邮箱。如果不想付钱，也可以用Cloudflare的免费服务，效果没啥区别。
托管DNS → 没有变化
托管DNS是为了在CF上可以更方便地用它。登录Cloudflare后:
添加站点 → 输入购买的域名 → DNS记录 → Cloudflare名称服务器， 复制NS值 → 回Namesilo;
Namesilo: Manage My Domains → domain manager → 选择刚刚买的域名 → NameServer 1, 2 修改为 Cloudflare 的NS 1，2 剩余的NameServer全部删除 → 至此，DNS托管到Cloudflare了。
NameSilo每年来续下费就好，其它没它什么事了。DNS设置好，一般几个小时之内就可以正常使用了。
域名的其它用途 → 没有变化
- 如果自己有NAS，可以将域名解析到NAS的公网IP，从而在外网使用自己的数据。比起群晖的Quickconnect不知道要快到哪里去了。Blog也可以将NAS上的各种应用的Link放在上面，怕要爽到家了。
- 利用CF的邮箱功能，开设自己的邮箱服务。比如自己的域名是example.com; 设个user1@example.com的一次性邮箱，在注册各种网站时使用，可以避免后续无穷无尽的垃圾信息。
- 私有云随时备份手机照片，手机的内存再也不是问题了。
安装Node.js, Git, Hexo, Visual Studio Code → 没有变化
静态Blog可用不同的技术实现，比如Jekyll, Hugo, Hexo等。Hexo可以在本地PC上调试好，再上传到Github上，命令少，相对容易记，这次就选它了。
N年来用习惯了图形界面，鼠标操作，一下回到命令行，多少有点陌生。
按顺序安装： node.js → Git → Hexo → Visual Studio Code
安装Node.js → 没有变化
Node.js 是一个免费、开源、跨平台的 JavaScript 运行时环境，它让开发人员能够创建服务器、Web 应用、命令行工具和脚本。Hexo就是在Node.js上开发的，必须有它Hexo才能运行。直接在Node.js官网下载。
安装完成之后，进入命令行程度，比如Windows自带的cmd: windows搜索：“cmd”，选择“命令提示符”；或者 Win键+R直接打开：cmd。
出现命令提示符C:\后，输入：“npm -v” 查询npm版本号。
如果得到类似 “10.8.1” 这样的npm版本号，表明node.js安装成功。
安装Git → 没有变化
Git是个版本控制系统，每次提交更新或保存项目状态时，它就会对当时的全部文件创建一个快照，并保存这个快照的索引。如果只是为了搭建Blog，就当它是个必要的软件，在后台默默地工作。下载地址：Git官网/Download
安装完成后，同样进入命令行检查版本号， 输入： git -v
得到类似“git version 2.45.2.windows.1” 这样的结果，表明安装完成。
安装Hexo → 没有变化
在命令行执行：npm install hexo-cli -g
安装完成后，同样进入命令行检查版本号， 输入： hexo -v
得到类似“hexo: 7.3.0” 这样的结果，表明安装完成。
在这里顺便安装一个Hexo插件，将来上传Github时必须要用。
命令行执行： npm install hexo-deployer-git --save
可选的插件：
阅读时长：npm install hexo-symbols-count-time
emoji：原将 markdown 变成 html 的转换器叫做markdown渲染器，不支持插件，需要替换为markdown-it渲染器。
$ npm un hexo-renderer-marked --save
$ npm i hexo-renderer-markdown-it --save
npm install markdown-it-emoji --save编辑数学公式：npm install hexo-renderer-kramed --save
显示图片：npm install hexo-asset-img --save
安装CF Wrangler CLI → 新增
$ npm install wrangler --save-dev
安装完成后，检查版本，确认Wrangler正常工作。
$ npx wrangler --version
// or
$ npx wrangler version
// or
$ npx wrangler -v$ npx wrangler --version
更新Wrangler:
$ npm install wrangler@latest
这是常用Wrangler命令列表，Wrangler正更新命令，新旧版稍有不同。
通过clone Github项目回来的方式生成初始Wrangler project:
git clone --depth=1 --branch=wrangler2 https://github.com/cloudflare/worker-sites-template your_project
cd your_project
然后就可以在用这个文件夹中用hexo生成本地Blog了。
安装Visual Studio Code → 没有变化
visual studio code是微软家的免费软件，可以写各种程序的代码。直接在Visual studio code官网下载回来安装。
这个是图形界面的，安装完成可在桌面生成Visual studio code图标。
至此，环境准备完成。
2. 本地调试 → 没有变化
相对准备工作来说，这个就简单多了。
准备文件夹
在本地硬盘上生成一个文件夹用来放blog文件。比如, D:\your_project
进入命令行： C:> → 输入命令：d: 回车 → 输入命令：md your_project 回车 → cd d:\your_project 回车
正常的话，命令行提示符变成了： d:\your_project>
此时所有文件操作都变成在d:\your_project这个文件夹下面了。
生成blog
命令行执行： d:\your_project>hexo init “your_blog”
等待….
若无意外， 本地生成了”your_blog”文件夹，Blog已生成。
cd d:\your_project\your_blog
命令行： d:\your_project\your_blog> hexo s
得到：
INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
用浏览器访问上述网址，即可浏览本地Blog毛坯房。
修改主题
原配的landscape主题有点太过朴实，必须换掉。在 Hexo主题提供了407个主题供选择。看中那个就clone回来, 例如本Blog用的Fluid。
方法1：命令行： npm install --save hexo-theme-fluid
方法2：找到Github连接后， Code中下载ZIP文件回来解压。
命令的后面的参数是保存的位置，自行修改。注意需要将下载回来的文件放在blog/themes文件夹中。
也可以放在其它地方，复制一份过来。万一玩坏了，还有个备份。
打开visual studio code, 将D:\your_project_name拖到窗口里，即可修改里面的各个文件了。
文件：_config.yml → 文件最下部：将theme: landscape, 修改为： theme: fluid → 保存
回命令行：
hexo clean //清除缓存。有时明明修改了内容，浏览器看到的却是旧版，多数跟缓存有关，稍等一下刷新就好。
hexo server //可以省略为 hexo s
再次用浏览器打开 http://localhost:4000/ 即可看到修改的的主题。
多尝试几个，找到自己喜欢的。
将themes/_config.yml复制一份放在 your_project文件夹下，并改名字为: _config.fluid.yml有更高的优先级。 然后修改，可以对这个主题进行个性化设置。
插入图片
首先要安装说上面的图片插件hexo-asset-image, 然后修改：_config.yml → post_asset_folder: true，使每个Post均有独立文件夹，将需要的本地图片放在其中。post中引用图片的有4种方法，可参考Github赵大宝的网页。以下是其中2种：
方法1：
<div align=right> // 对齐方式： right, center, left
<img src="image.png" width="100%" height="100%" title="text" alt="alternative text."/> //文件名，比例,替代名
</div>
给图片增加链接： → 新增
<a href=https://www.example.com/><img src= example.jpg width=40% title="" align=right vspace=0 hspace=0> </a>
方法2：
 //此方法不可控制图片大小 。
Hexo 常用命令
Hexo init //在指定的文件夹初始化HexoHexo clean //清除缓存Hexo generate //可省略为Hexo g， 生成静态文件。Hexo new post "post" // 创作一篇postHexo new draft "draft1" // 创作一篇草稿draft1Hexo publish "draft1" //发表草稿draft1Hexo server //可省略为Hexo s， 在本地运行HexoHexo s --draft // 本地预览草稿Hexo deploy //Hexo d 上传到Github
## 3. 上传Github → 无须此步了
### 创建新仓库repository### 创建密钥 Key### 部署上线
3. 上传CF Worker and Pages
在此前须已经将新购域名托管在CF上。
在visual code中打开项目文件夹，找到wrangler.toml, 内容为：
name = "your_blog"
main = "src/index.js"
compatibility_date = "2022-05-06"
site = { bucket = "./public" }
修改项目的文件夹：
name = “your_blog” // 注意这里面的名字和workers的名字要一致；
site = { bucket = “./your_blog/public” }
// 其中 ./代表 d:/your_project_name; 相应可以写出自己Hexo/public文件夹的位置。public文件夹是生成的blog需要上传CF Pages的文件夹。
利用命令行上传：
1 | |
登录CF → Workers and Pages → 打开 your_blog：
自定义域 → 设置自定义域 → 写入自已的域名，比如： blog.example.com → 稍等半小时，即可用刚填的地址访问Blog
走到这里，恭喜崭新的Blog主诞生了！！ 比原来的方法简单了好多吧，最大的好处是不会受Github访问不稳定影响了。
后记
虽是纯文字版的记录，没有图文版的形象、易懂，在这个脑力宝贵的年代，人们更愿意读图文版的傻瓜书；不过，文字版的逻辑性更强，不仅能知其然，也能知其所以然，不会被图片打断思路。
图文版教程在参考网站中可以找到。