方案原理

个人博客本质上是一组静态资源，可以利用 CloudFlare 的 Pages 来实现编译部署，我们用前端的一些框架来开发个人博客（比如 next.js），最终会编译生成静态网页，然后部署在CloudFlare 上.利用 GitHub 来实现代码的管理，同时实现博客变更的自动化部署（Github的WebHook）.

利用这个方案搭建好博客之后，日常的更新流程就非常的方便：

1 本地新建更新博客网站，通过本地测试好样式展示等.
2 将代码推送到GitHub.
3 GitHub 自动通知 CloudFlare 拉取最新的代码，重新构建、部署.

下面我分步骤为大家详细说下怎么搭建.

搭建方法

我这里以 rishimohan 开源的一款博客模板(https://github.com/rishimohan/rishimohan.me)为例进行分步介绍:

配置GitHub

首先将博客模板folk到自己的仓库： 打开模版的Github页面，依次点击 Use this template → Create a new repository.

Untitled

输入新的仓库名，如果你不想被别人看到博客代码，选择 private. 然后 Create Repository.

Untitled

配置本地开发调试环境

Step1: 配置SSH

也就是将我们本地电脑的公钥配置在 Github上，这样后面我们推送代码就不需要输入账号密码了. 如果本地没有生成过公钥，通过 ssh-keygen 命令一路回车就可以了. 默认情况下，公钥在这里：~/.ssh/id_rsa.pub 可以在终端，使用这个命令来查看公钥：

cat ~/.ssh/id_rsa.pub

Untitled

然后复制公钥全部内容. 进入 GitHub, 点击你的头像 → Settings → SSH and GPG keys →New SSH Key:

  • Title: 自定义一个名字， 一般我用把电脑型号或者名字，以便区分不同的设备，比如：Home iMac.
  • Key: 填入刚刚复制的公钥

填好后，点击 Add SSH Key, 设置完成.

Step2: 本地运行博客

确保你的本地电脑已经安装好了 Git, Node, Yarn 如果没有的话，使用 brew (应用管理工具) 安装，如果没有 brew, 先安装 brew: 去到brew官网首页, 复制安装代码，直接粘贴到终端里回车. 如果这样安装失败，那建议下载 pkg 安装包 安装，

使用brew 依次安装 git, node, yarn:

brew install git
brew install node 
brew install yarn

接下来，克隆github上之前创建的博客仓库到本地： 进入到github页面，选择 code → ssh → 复制

Untitled

本地终端执行 git clone + 你刚刚拷贝的地址:

git clone [email protected]:jwkongkong/kkkkblog.git

等待代码拉取完成.

接下来，使用一个代码编辑工具打开刚刚拉取的代码，比如 VSCODE, WebStorm等. 以 VSCODE 为例： 打开上面拉取的工程的文件夹，然后在VSCODE 中打开终端窗口

Untitled

在终端窗口中，依次执行模板 README.md 中的这三行代码： (当然你也可以通过外部的终端CD到这个项目路径下，执行)

这里要特别注意第二条命令(…reset.js), 这条命令的目的是清空博客里已经填充了的数据， 也就是回到纯净版的状态，如果你想保留原来的数据，那么不要执行这条命令. 

yarn

node ./scripts/reset.js

yarn dev

最后一条命令执行完成，会有如下提示，这说明本地环境搭建好了，

Untitled

打开本地浏览器，地址输入 http://localhost:3000, 如果能顺利看到博客的首页，那Congratulations， 本地环境搞定.

为了下面一部分搭建 CloudFlare 的顺利执行，我们在这里需要先修改一行博客源代码，然后将修改后的代码推送到 Github：

我们需要将 package.json 的第7行，build 后面的内容，从原来的 next build 更改为：next build && next export

Untitled

修改完成后，我们点击VS编辑器左侧的Git图标，随便填入一个提交信息，点击Commit 按钮最右侧的下拉图标，选择 Commit & Push 进行提交. (此步骤尽量关闭科学上网)

Untitled

配置CloudFlare

注册 CloudFlare 账号并登录，进入Works & Pages → 创建应用程序 → 连接到Git.

Untitled

按照步骤，选择在【配置Github】部分创建的仓库（可能还需要根据提示，授权一下，这个就不展开讲了，比较简单）.

Untitled

接下来的配置很重要：

  • 构建命令输入：yarn build
  • 输出目录填入： out
  • 环境变量：YARN_VERSION = 1

Untitled

配置完成后，点击【保存并部署】.

看到下面这个提示，说明部署完成，可以用这个生成的URL 访问一下页面试试，如果顺利看到了博客页面，那么 Congratulations，博客搭建完成.

Untitled

最后，我们尝试一下本地编辑，推送Github，看博客页面会不会自动更新. 我们修改下 index.js 的 144行代码，然后保存， Commit & Push(上面有讲过怎么推送到Github).

Untitled

等待一会儿.

这个时候，也可以进入到 CloudFlare 管理页面，将会看到网站已经在自动部署了：

Untitled

大概2-3分钟后，我们再刷新一下之前的博客网页，会发现我们的修改已经自动生效了：

Untitled

至此，整套环境搭建完成，后面我会抽空整理一下，如果详细更改自定义这个模板，到时候再分享给大家.