前言

个人博客需满足以下要求：

  1. 免费：无需购买云服务器
  2. 易维护：专注内容发布，功能简洁
  3. 访问流畅：国内外用户均可稳定访问
最终方案：Cloudflare + GitHub + Hexo + Fluid

参考资源

Hexo 环境配置

Hexo 是一个基于 Node.js 的静态博客框架，支持 Markdown 编写并生成 HTML 页面。

1. 安装 Node.js

前往 Node.js 官网 下载并安装。

2. 配置 Hexo

更换 npm 镜像源（国内加速）

1
npm config set registry https://registry.npmmirror.com

安装 Hexo 客户端

1
npm install -g hexo-cli

初始化博客项目

1
2
hexo init blog && cd blog
npm install

到这里我们的 hexo 环境配置就基本完成了，下面就可以使用它来写文章和发布文章了！👍👍👍

使用 Hexo 管理博客

为了方便编辑，我们使用 vscode 打开 blog 文件夹。下面来看一下 blog 里面的主要组成部分：

1
2
3
4
blog/
├── _config.yml       # 全局配置（站点名称、作者等）
├── source/_posts     # 存放 Markdown 文章，而且 hexo 自带了一篇 demo 文章 hello-world
└── themes            # 主题文件夹，hexo 有一个默认主题，但不太好看，后面可以改成漂亮一些的主题

接着我们执行命令，在本地把 hexo 服务跑起来。这样我们就可以，在本地网址的4000端口，预览文章效果。

1
2
# windows执行
hexo clean ; hexo g ; hexo s
1
2
# linux执行
hexo clean && hexo g && hexo s

打开 http://localhost:4000/ 这个本地网址，已经可以正常访问了，这里就是博客网页的布局。

将博客托管到 GitHub Pages

现在我们这个博客，还只能在本地网址预览。下面我们把博客项目托管到 GitHub 仓库，并且使用 GitHub Pages 来部署博客，让其他人也能访问我们的博客网站

博客项目托管到GitHub

为了方便管理 blog 博客项目，我们下一步把这个项目托管到 GitHub 上。首先在 GitHub 上创建一个项目，项目名可以设置为 我们的GitHub用户名.github.io。

使用 GitHub Pages 部署博客

执行完配置命令以后，我们就可以使用 git 来管理博客项目了。接下来我们把 my-blog 项目，部署到 GitHub Pages 上。 这样我们的博客，就不再只是一个本地网站了。其他人也可以通过网络，来访问我们的博客。

首先在 my-blog 项目的 _config.yml 配置文件中，把 git 服务部署的配置加进去。在 type 配置项这里填上 git，然后分别添加一个 repository 和一个 branch 配置，指定部署博客网站时，所使用的 GitHub 项目和对应的分支。repository 这里填 git@github.com:GitHub用户名/GitHub仓库名，branch 这里指定 main 分支，然后保存配置。

最后我们执行 npm install hexo-deployer-git –save 命令，安装 hexo-deployer-git 这个插件，来简化部署到 GitHub Pages 的流程。

1
npm install hexo-deployer-git --save

这样配置完以后，我们就可以在本地写文章，写完以后通过 http://localhost:4000/ 预览文章效果并进行修改。修改满意后，就可以部署到 GitHub Pages 这样其他人就能访问我们的博客了。我们来看一下使用流程：

首先我们使用 hexo new post 文章标题，来创建一篇新文章。这样操作后，hexo 就会在 source/_post 下面，给我们生成一个新文件来编辑这篇文章。我们使用上一篇文章，搭建的 免费图床 来简单编辑一下这篇新文章。MarkDown 本地渲染一下，显示正常。然后执行这个三合一命令，把文章发布到 GitHub Pages。

1
hexo clean && hexo generate && hexo deploy

常用命令速查

命令 功能 简写
hexo clean 清除缓存 hexo -c
hexo generate 生成静态文件 hexo -g
hexo deploy 部署到 GitHub hexo -d
hexo server 启动本地服务器 hexo -s

发布完成后，打开 https://github用户名.github.io/ 这个网址，就可以访问我们的在线博客了！👌