HEXO为基于Node.js的快速、简洁且高效的博客框架，本文将讲述基于Github与Cloudflare Page部署HEXO博客框架

0x00准备阶段

  • 本地部署node.js环境与git环境
  • 拥有Github账户与Cloudflare账户
  • 在Cloudflare账户中添加自己的域名（可选）

0x01本地部署

  1. 在本地设备上安装HEXO程序包

    npm install hexo-cli -g

  2. 切换至将部署本地HEXO的父目录

  3. 指定即将安装的子目录并安装，此命令将创建子目录，因此需为不存在的目录，可指定子目录名至”sub Directory”参数

    hexo init <sub Directory>

  4. 切换至安装HEXO的子目录”sub Directory”

  5. 运行hexo g或hexo generate，生成静态文件

  6. 运行hexo s或hexo server，运行本地预览服务器。

    若显示INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.则表示web已运行，可访问http://localhost:4000预览

  7. 若可预览，可将此目录push至Github仓库，转至“Cloudflare Page部署”部分继续阅读

  8. 若页面报错，运行hexo clean清除缓存后再次运行5,6步重试，仍不可预览则重新执行部署

0x02 Cloudflare Page部署

  1. 登录Cloudflare，不要点入任何绑定的域名，在左侧列表进入”Pages”页面(可在右上角切换语言为中文便于接下来的操作)
  2. 选择Create a project-Connect to Git (若为中文，选择 创建项目-连接到 Git)
  3. 选中本地部署中push的仓库，若为初次连接Git，需要对Cloudflare Page授权仓库权限
  4. 选择 开始设置
  5. 设置 项目名称 与生产分支(默认为main)
  6. 构建设置中
    框架预设 None ,构建命令 hexo generate,构建输出目录 public
  7. 保存并部署，待部署完毕
  8. 部署成功后将会分配默认域名，可直接用此域名访问或通过”自定义域名(Custom domains)”添加自己的域名，若此域名已添加至Cloudflare可在域名验证时直接下一步
  9. 若可打开域名并显示正常，则至此已成功部署HEXO至Cloudflare Page

0x03 部署完成

不出意外的话，完成上述步骤后可实现本地配置与预览后PUSH至Github并自动部署于Cloudflare，此方法并非实时显示，PUSH后需等待Cloudflare部署