使用cloudflare发布以github当博客仓库的hexo博客教程

大家好，今天带领大家一步一步使用github+hexo+github部署自己的完全免费blog（博客）。不是鼓励大家白嫖，而是可以先从简易的博客站创建去不断提升自己的能力，待到当前的博客已经无法满足自己的需求的时候再开始创建自己的收费站点。好了废话不多说。

一、准备工作

1.1github注册

github注册可以参考本站另外一篇博文：[github注册]

1.2node.js下载安装

国内直接登录node.js官网 https://nodejs.org/en 然后下载对应版本，windows下载win版，Mac下载Mac版本。linux下载linux版本。

使用 Node.js 官方安装程序时，请确保勾选 Add to PATH 选项（默认已勾选）。
node安装完毕后在“cmd shell”窗口使用 node -v 命令若返回node版本号则证明node安装成功。

1.3安装npm

一般情况下安装了node.js就同时安装了npm，如果没有的话，请使用以下代码：npm install -g npm 。
如果说国内npm下载比较慢可以使用以下命令使用国内源npm config set registry https://registry.npmmirror.com 。

1.4注册域名

参考站内另外一篇文章 [域名注册]。

二、安装工作

2.1vscode安装及配置

请看csdn上大佬总结的文章：另外一篇文章关于vscode的安装：

2.2安装git

（1）从git官网下载一个安装包，官网下载地址http://www.git-scm.com/download/
git下载安装包
（2）双击安装程序，进入欢迎界面点击【Next>】

（3）阅读协议，点击【Next>】

（4）选择安装位置，点击【Next >】，可根据自己情况选择安装位置。

（5）选择安装组件:这里可以使用默认选项，点击【Next>】
图标组件(Additional icons):选择是否创建桌面快捷方式
桌面浏览(Windows Explorer integration)
使用Git Bash方式，shell方式
受用桌面程序方式
关联配置文件:是否关联git配置文件，该配置文件主要显示文本编辑器样式
关联shell脚本文件:是否关联Bash命令执行脚本文件
使用TrueType编码:在命令行中是否使用TrueType编码，该编码是微软和苹果公司制定的通用编码

（6）是否创建开始菜单快捷方式目录，点击【Next>】

（7）设置环境，选择使用什么样的命令行工具，一般情况我们使用默认配置，使用Git Bash，点击【Next>】
Git自带:使用Git自带的Git Bash命令行工具
系统自带CMD:使用windows系统的命令行工具
二者都有:上面二者同时配置，但是注意，这样会将windows中的find.exe和sort.exe工具覆盖，如果不懂这些尽量不要选择

（8）设置HTTPS 传输加密方式，点击【Next>】
使用OpenSSL库
使用本机Windows安全通道库

（9）选择换行格式，点击【Next>】
让Git能够自动转换文件中的换行符:签出到本地时转换为Windows下的换行符，提交到服务器时转换为Unix下的换行符。让Git在签出到本地时不做转换，保留原始文件的换行符;提交到服务器时转换为Unix下的换行符。让Git在签出到本地时和提交到服务器时都不做转换

（10）配置Git bash终端仿真器，点击【Next >】
使用MinTTY终端
使用windows默认的命令行

（11）性能配置，是否启用文件系统缓存，点击【Next>】

（12）开始安装

（13）安装完成，点击【Finish】

（14）配置环境变量
安装成功后需要配置Git环境变量“注意该步骤为Git在windows cmd命令中配置，如果不配置，直接使用Git Bash即可”
在Path变量中增加:C:\Program FileslGitlcmd
验证是否配置成功，打开windows命令行，输入git version命令，出现下列信息表示配置成功。

2.3安装hexo

博主使用的是vscode
在电脑上新建博客文件夹，比如新建 “sxbj”文件夹,打开文件夹后输入在vscode里终端输入 npm install -g hexo-cli ，安装完成之- 后可以通过输入命令 hexo -v 查看hexo 版本号，当返回版本号说明安装完成。
安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3

$ hexo init <folder>
 $ cd <folder>
 $ npm install

初始化后，您的项目文件夹将如下所示：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

网站的配置文件。您可以在此配置大部分的参数。 _config.yml

2.4本地预览

使用命令hexo clean清除已生成的博客文件或者缓存
使用命令hexo generate生成博客页面
使用命令hexo server生成本地博客站，通过访问 http://localhost:4000/可查看当前已撰写的博客文章。

github新建博客仓库

登录github点击右上角“+”号，选择“new repository”。创建新仓库。
github创建新仓库
依次填写相关内容，比如仓库名称等信息。

修改branch为“main”分支：在setting→pages→branch→选择main。

2.4安装主题

hexo-theme-butterfly 是基于 hexo-theme-melody 的基础上进行开发的主题。

1 2	powershell: git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

或者使用比较新的dev主题

1 2	powershell: git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

2.5应用主题

修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

2.6安装插件

如果你没有pug及stylus 的渲染器请下载：

1 2	powershell: npm install hexo-renderer-pug hexo-renderer-stylus --save

三、使用hexo自动部署至github

3.1申请deploy key

想要实现hexo一键部署至github需要在对应仓库下申请github仓库的deploy key，而获取deploy key需要先获取ssh-rsa加密密钥
使用ssh-keygen -t ed25519 -C "your_email@example.com"命令获取密钥
然后在github对应仓库下“setting→deploy key”下输入密钥，获取部署密钥。

3.2修改config文件

修改主题下的config文件，加入以下代码实现自动部署,deploy key 是你生成的部署密钥。

deploy:
  type: git
  repo: https://<deploy key>@github.com/<github账号名>/<github博客仓库名>   ///
  branch: main

每次部署前都要在shell窗口输入以下命令禁用全球验证git config --global http.sslVerify false

四、实现cloudflare cdn加速

通过以上操作你就可以在梯子环境下进行你的博客站访问啦，如果你想实现无障碍国内访问还需要将域名进行cloudfaler托管。通过cloudflare部署访问。

4.1cloudflare注册

cloudflare注册请参照本章另外一篇文章：[cloudflare注册]

4.2cloudflare添加自定义域名

域名需要提前注册，如果没有的话请参照本站另外一篇博客：[域名注册]
登录cloudflare后点击“添加域”把自己注册的域名填写上。

填写完毕后，点击“继续”。

选择免费计划就可以了，当网站访问量上去了再考虑收费计划。

系统会自动验证dns记录，没有的话，可以配置新的。这一步不管，点击“继续前往激活”。

这一步很重要，将cloudflare的名称服务器复制下来。

到你的域名服务商处配置dns服务器。比如我用的阿里云的域名，登录阿里云网站，在控制台里找到域名，单击域名进入管理页面。
在“dns修改→修改dns服务器”里将上面复制的两个名称服务器地址填入。

填完返回到cloudflare域名管理页面查看是否活动，活动了就代表配置成功啦。