No.1 搭建同款Hexo博客，零成本无需服务器：Cloudflare Pages+Github Pages+安知鱼主题美化

总览

  1. 下载安装Node.js和Git，准备环境；
  2. 连接至Github，方便部署；
  3. 初始化Hexo博客项目,创建自己的博客；
  4. 分别推送到Github Pages和Cloudflare Pages，全球加速访问；
  5. 一些Hexo博客的基本使用方法和一些常见问题。

写在前面

首先感谢你能来访问我的博客，这是我搭建的第一个博客，用的是Github Pages+Cloudflare Pages的搭建方法，大概几分钟就能搭建完成了(当然美化花的时间比较久)，现在把它记录下来，将来回头看看也是一种怀念。

1.准备工作

搭建本博客需要用到以下软件：

  1. Node.js和Git（必须）
  2. VSCode (推荐) 代码编辑器，你也可以使用市面上其他常见的，如IDEA

服务支持：

  1. Github：必须 ，用于储存我们的博客，没有的可以去注册一个；
  2. Cloudflare：必须 ，用于将我们的博客部署到全球网络，没有的可以去注册一个；
  3. 域名：可选 ，有当然是最好的，毕竟Cloudflare和Github分配的免费域名在国内比较难访问。

1.1 安装Node.js

  1. 打开Node.js的下载界面，选择自己合适的系统版本下载；
    alt text
    我的是Windows 64位系统，所以就选这个。
  2. 下载后安装，一路直接下一步，安装目录建议保持不动；
  3. 安装完成后，检查是否安装成功。在键盘按下Win+R键，输入CMD，然后回车；打开CMD窗口，执行node -v 命令，看到版本信息，则说明安装成功。
    alt text
  4. 修改npm源。npm用来下载各种模块，默认是从国外服务器下载，速度较慢，建议配置成淘宝镜像源。
    打开CMD窗口，运行如下命令:
npm config set registry https://registry.npmmirror.com/

1.2 安装Git

  1. 打开Git的下载界面，选择自己合适的系统版本下载；
    alt text
  2. 下载后安装，一路直接下一步，安装目录建议保持不动；
  3. 安装完成后应该会在开始菜单栏里面看到Git Bash 、Git CMD 、Git GUI 。Git Bash 才是我们要用到的。

2. 配置Git密钥并连接至Github

2.1 配置用户名和邮箱

打开Git Bash，分别输入以下命令：

git config --global user.name "your account name"
git config --global user.email "your email"
git config -l
your account name :你的用户名，和Github用户名一样
your email :你的邮箱，和在Github公开的邮箱一样

alt text

2.2 配置公钥连接至Github

  1. 执行以下命令:
ssh-keygen -t rsa -C "your email"

提示 Enter file in which to save the key 直接一路回车即可，新手不推荐设置密钥

之后打开C盘下用户文件夹下的.ssh的文件夹，会看到以下文件:

id_rsa :私钥
id_rsa.pub :公钥

alt text
用记事本打开上述的公钥id_rsa.pub ，复制里面的内容，然后在Github中配置SSH密钥

  1. 将SSH KEY配置到GitHub
    进入Github，点击右上角头像 选择Settings，进入设置页后选择SSH and GPG keys，名字随便起一个，公钥填到Key那一栏。
    alt text
    alt text

  2. 测试连接，输入以下命令

ssh -T git@github.com

第一次连接会提示Are you sure you want to continue connecting (yes/no/[fingerprint])? ，输入yes 即可。
alt text

3. 创建GitHub.io仓库

  1. 点击右上角的+按钮，选择New repository，创建一个<用户名>.github.io 的仓库;
  2. 仓库名字的格式必须为：<用户名>.github.io (注意：前缀必须为用户名，此为预览博客需要，后期可修改仓库名);
  3. 可见性必须选择Public方便第一次部署检查问题，点击Create repository创建即可。
    alt text

4. 初始化Hexo

  1. 创建一个文件夹来保存源码（我的路径为D:/blog，之前已经弄过了），在文件夹内右键，选择Open Git Bash here
    alt text
  2. 在Git BASH输入以下命令安装Hexo
npm install -g hexo-cli

安装完成后输入hexo -v 验证是否安装成功
alt text
3. 初始化Hexo并安装相关依赖
键入以下命令：

hexo init
npm i

初始化后，博客目录有以下内容：
alt text
有一些文件你可能没有因为我提前装好了

  • node_modules：依赖包
  • scaffolds：生成文章的一些模板
  • source：你写的文章和源码都在这里
  • themes：主题，安装的主题在这里
  • _config.landscape.yml：主题的配置文件
  • config.yml：博客的配置文件
  • package.json：项目名称、描述、版本等信息

先行预览一下

输入hexo cl&&hexo s 启动项目
alt text
(因为我的已经更换了主题，无法给大家展示原始的博客界面，所以我引用一下安知鱼博客中关于此部分的教程图片)

5. 将博客挂载到GitHub Pages上

  1. 在博客根目录下执行命令：
npm install hexo-deployer-git --save
  1. 修改config.yml
    在博客根目录下找到config.yml ，这个是博客的配置文件，大部分配置可以在里面修改，详见官方的描述

登录Github，找到你刚才创建的博客，复制一下SSH地址
alt text

修改最后一行的配置，将repository修改为你刚才复制的地址即可。

deploy:
  type: git
  repository: 你刚才复制的地址
  branch: main

分支要改为main代表主分支，注意缩进。(分支一般为main)

  1. 部署到Github
    修改好配置后，运行以下命令，将博客部署到GitHub（一键三连）。
hexo clean 
hexo generate 
hexo deploy

//或者

hexo cl&&hexo g&&hexo d
  • hexo clean：清理缓存，可以用hexo cl 缩写。
  • hexo generate：生成静态文章，可以用hexo g 缩写
  • hexo deploy：部署，可以用hexo d 缩写

注意:deploy时可能要你输入用户名和密码。

如果出现Deploy done ，则说明部署成功了。

稍微等待一会儿，在浏览器中输入<你的用户名>.github.io 访问，这时我们就能看到博客内容了。

6. 将博客部署到Cloudflare Pages上

  1. 登录到Cloudflare Dashboard

在注册CF账号的时候，选择免费的计划就够了

  1. 打开侧边栏的计算(Workers) ，选择创建 ，点击连接到Git存储库
    alt text
    alt text
  2. 登录到你对应的Github账号，并选择你创建的博客仓库
    alt text
  3. 点击保存并部署，稍等一会
  4. 当提示成功！您的项目已部署到以下区域：全球 后，浏览器访问上面给出的地址 ，这时候我们就可以看到博客内容了。

如果有自己的域名，可以将免费分配的域名给更换掉。
alt text

7. 使用方法

7.1 新建一篇文章

hexo new 文章名字

然后就可以用你喜欢的方法编辑文章了，注意要使用Markdown 格式书写.

可以去学习一下Markdown的书写

编辑完文章保存后键入以下命令，生成本地页面,进行预览：

hexo cl&&hexo s

确认后使用以下命令，推送到Github：

hexo cl&&hexo g&&hexo d

8. 一些错误

8.1 VSCODE终端首次执行报错

用管理员身份打开PowerShell，键入以下命令：

Set-ExecutionPolicy RemoteSigned

8.2 提示无法连接至Github

有两种原因：

  1. 你的Github账号的邮箱地址设置为了私密，未对外公开，具体在Github首页-头像-设置-电子邮箱-保持我的电子邮箱地址的私密性，将它关闭即可
    alt text
  2. 报错：ERROR Deployer not found: git
    需要重新安装hexo-deployer
npm install hexo-deployer-git --save

8.3 在安装Hexo的时候就频繁报错

我就遇到过，可能有些人就不会。解决方法很简单：
换用Yarn

Yarn 是由 Facebook（Meta）开发的 JavaScript 包管理工具，用于替代 npm，解决它在早期版本中存在的一些问题。

corepack enable 

//启用Yarn

yarn set version stable

//将Yarn更新到最新版本

有时候可能报错不一定就代表Hexo没有安装成功，可以先跳开不管。

用上Yarn后，原来的npm install 就会变成yarn add ,后面的--save 可以删了。

Yarn的命令行与npm略有不同，可以参考这里

8.4 博客无法访问

如果你使用的是Github Pages，没有使用Cloudflare Pages，那有可能是因为你的仓库设置为了私库而不是公开库。只有公开库才能使用Github Pages。

暂时没有其他的了…

如果还有哪里有疑惑，或者本文有错误的地方，欢迎在评论区或者邮件提Issue！

预告

下一期会详细讲讲怎么美化主题，可能要下周了，因为我自己美化搞得有点累了。

参考资料

  1. 安知鱼的博客
  2. 安知鱼主题
  3. CMLiussss的博客