Blog 技术贴： Hexo+Github+Cloudflare

在折腾过程中，虽已经有各种技术贴作参考，但各人有各人的环境和需求，实现的方法也不尽相同。以下是Blog成功上线的全过程，可分为几大步骤：

1. 环境准备 → 2. 本地调试 → 3. 上传Github → 4. 接入Cloudflare

1. 环境准备

申请帐号

环境准备对于不同人有所不同。需要用的帐号有：

• Namesilo: Namesilo就是个域名的知名大卖家，当然也可以换成其它卖家。Namesilo促销时常有1美刀的deal。
• Github: 码农的世界，1G免费空间可来托管Blog；Github上有太多新鲜、炫酷的东东了…
• CloudFlare: 托管DNS，并可以利用cloudflare强大的CDN加速功能，代理网站，网络安全及其它太多福利，江湖人送外号：大善人。部署在CF上还可解决在赵国访问不畅的问题。

进入上面的网站，分别申请帐号。前面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

可选的插件：

1. 阅读时长：npm install hexo-symbols-count-time

2. 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

3. 编辑数学公式：npm install hexo-renderer-kramed --save

4. 显示图片：npm install hexo-asset-img --save

安装Visual Studio Code

visual studio code是微软家的免费软件，可以写各种程序的代码。直接在Visual studio code官网下载回来安装。
这个是图形界面的，安装完成可在桌面生成Visual studio code图标。

至此，环境准备完成。

2. 本地调试

相对准备工作来说，这个就简单多了。

准备文件夹

在本地硬盘上生成一个文件夹用来放blog文件。比如, D:\blog
进入命令行： C:> → 输入命令：d: 回车 → 输入命令：md blog 回车 → cd d:\blog 回车
正常的话，命令行提示符变成了： d:\blog>
此时所有文件操作都变成在d:\blog这个文件夹下面了。

生成blog

命令行执行： d:\blog>hexo init
等待….
若无意外， 本地Blog已生成。

命令行： d:\blog> hexo s
得到：
INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

用浏览器访问上述网址，即可浏览本地Blog毛坯房。

修改主题

原配的landscape主题有点太过朴实，必须换掉。在 Hexo主题提供了407个主题供选择。看中那个就clone回来, 例如本Blog用的Fluid。

命令行： npm install --save hexo-theme-fluid
或者，找到Github连接后， Code中下载ZIP文件回来解压。

命令的后面的参数是保存的位置，自行修改。注意需要将下载回来的文件放在blog/themes文件夹中。
也可以放在其它地方，复制一份过来。万一玩坏了，还有个备份。

打开visual studio code, 将D:\blog拖到窗口里，即可修改里面的各个文件了。

文件：_config.yml → 文件最下部：将theme: landscape, 修改为： theme: fluid → 保存
回命令行：

hexo clean //清除缓存。有时明明修改了内容，浏览器看到的却是旧版，多数跟缓存有关，稍等一下刷新就好。
hexo server //可以省略为 hexo s

再次用浏览器打开 http://localhost:4000/ 即可看到修改的的主题。
多尝试几个，找到自己喜欢的。

插入图片

首先要安装说上面的图片插件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>

方法2：
![显示的名字](/images/image.jpg ) //此方法不可控制图片大小 。

Hexo 常用命令

Hexo init //在指定的文件夹初始化Hexo
Hexo clean //清除缓存
Hexo generate //可省略为Hexo g， 生成静态文件。
Hexo new post "post" // 创作一篇post
Hexo new draft "draft1" // 创作一篇草稿
Hexo publish "draft1" //发表草稿draft1
Hexo server //可省略为Hexo s， 在本地运行Hexo
Hexo s --draft // 本地预览草稿
Hexo deploy //Hexo d 上传到Github

3. 上传Github

创建新仓库repository

打开 Github官网。 用自己的帐号登录。
新建一个repository(仓库)，名称必须严格按照 username.github.io 的格式来命名。 直接创建，不需要修改内容。

创建密钥 Key

命令行： ssh-keygen -t ed25519 -C “email address”

其中，ed25519是选择的密钥算法。密钥算法有好多，rsa、ed25519等等，ed25519从速度和安全性都好过rsa; rsa的用的人多，兼容性更好。

按提示填写生成的文件路径和文件名，生成一个.pub文件。打开之后，复制全部内容。
回Github，选择刚刚创造的 repository（仓库） → Setting → Deploy Keys → Add deploy key，随便取个名字，将复制的内容粘贴在Key里面，保存。

部署上线

回到 visual studio code
打开 .config.yml 最下部 Deployment，修改为：

   deploy:
   type: 'git'
   repo: `https://github.com/username/username.github.io`    →  把username换成自己的帐户名
   branch: master

保存。

回到命令行，执行三步曲：

• hexo clean // 清除缴存
• hexo generate // 可省略为hexo g, 重新生成静态文件
• hexo deploy // 可省略为hexo d, 上传到Github， 之后每次有修改，或写了新blog都这样上传更新后的文件。

至此，blog已经可以在https://username.github.io正常访问了 → 记得把username换成自己的帐户名
Github也可以把域名改成自己的。如果不想用Cloudflare的福利，blog至此完工。

另外，若身处赵国，连接不了Github实属正常；如果得到这样的结果：
fatal: unable to access https://github.com/username/username.github.io/: Failed to connect to github.com port 443 after 21096 ms: Couldn’t connect to server

选个黄道吉日、多试几次或者科学上网都可以解决问题。

4. 接入Cloudflare

在此前须已经将新购域名托管在CF上。

登录CF → Workers and Pages → 创建 → Pages (不是创建Worker) → 连接到Git → Github → 选择刚刚在Github创建的 username.github.io → 开始设置

项目名称： 给取个名字；
生产分支： master
框架预设： none
构建命令： npx hexo generate
输出目录： 留空

→ 保存并部署 → 继续处理项目 → 自定义域 → 设置自定义域 → 写入自已的域名，比如： blog.XXXX.com → 稍等半小时，即可用刚填的地址访问Blog

走到这里，恭喜崭新的Blog主诞生了！！

后记

虽是纯文字版的记录，没有图文版的形象、易懂，在这个脑力宝贵的年代，人们更愿意读图文版的傻瓜书；不过，文字版的逻辑性更强，不仅能知其然，也能知其所以然，不会被图片打断思路。

图文版教程在参考网站中可以找到。

参考网站

感谢以下参考内容，排名不分先后。

1. Hexo 官网文档：指令
2. Hexo 官网主题：Themes
3. Hexo Fluid 用户手册：配置指南
4. 高正太的自留地：安装并部署Hexo NexT主题博客
5. 夜梦星尘の折腾日记：HEXO系列教程 | 使用GitHub部署静态博客HEXO | 小白向教程
6. LeeLurker ：Cloudflare Pages + Hexo 搭建个人博客
7. B站：小凡同学学AI：hexo + github + cloudflare，有手就行的个人博客免费部署
8. iconfont素材库：阿里家的免费素材库，图标、插画、字体等。
9. Github: 赵大宝：在Hexo博客中插入图片的各种方式
10. CSDN：小达不溜儿：Hexo博客插入本地图片、Markdown图片设置图片位置和大小