前言

拥有静态博客后台的前提是博客集成了自动部署，可以先查看 Akilar 的教程实现博客自动部署

有一晚睡前在床上“欣赏”自己博客的时候，发现了一两个错字，或者觉得哪个语句有语法错误，不通顺（老强迫症了），但是不想下床开电脑改，还好 Github 可以直接编辑文件（文章标题旁边的小羽毛），直接 Github 编辑文件然后 Github action 自动重新部署博客，挺方便的。后面就想着能不能像动态博客有个后台，可以更方便地编辑博客源码，甚至在线写文章。所以后面部署了Qexo，但是习惯了 VSCode 水文的我，最离不开的就是 User Sinppets 功能（写外挂标签，或者是一长段代码时非常有用）。要是还可以在线 hexo s 预览就再好不过了~

Github.dev

github.dev 是 Github 官方提供的在线使用 VSCode 编辑器编辑仓库并提交代码更改

  这是一种最简单无脑的博客后台，只需要在你的博客源码仓库，将网址中的 github.com 改成 github.dev 或者在仓库页面点一下>就可以使用 VSCode 在线编辑代码了，而且还可以登录 VSCode 的账号同步你的文件（比如 User Snippets），非常方便。缺点就是可能需要神奇的力量才能比较流畅使用。

Cloud Studio

Cloud Studio 是 coding 的一个云端开发工具，免费，而且有多种运行环境，兼容大多数 VSCode 插件

创建空间

首先创建一个 Node.js 的空间

生成 SSH 秘钥绑定 Github

  1. 终端选择bash，输入
1
2
3
git config --global user.name "yourname"
git config --global user.email "youremail"
ssh-keygen -t rsa -C "youremail"
  1. 在/root/里出现.ssh文件夹，里面有id_rsa和id_rsa.pub两个文件，复制 id_rsa.pub 的内容。

1
cat ~/.ssh/id_rsa.pub

  1. 打开Github，在头像下面点击Settings，再点击SSH and GPG keys，新建一个SSH key，名字随便取一个都可以，把刚刚复制id_rsa.pub的内容粘贴进去。

  2. 在Git Bash中输入ssh -T git@github.com，如果出现你的用户名，那就成功了，如下图所示：

调整 Node 版本

如果不将 Node 版本和你电脑上的 Node 对应，否则后面克隆博客源码 npm install 安装依赖时会报错

我这里使用 Node Binary 管理模块"n"，16.6.1是我自己的 Node 版本，改成你的即可

1
2
3
4
5
6
7
8
# 全局安装n
$ npm install -g n

# 下载和你电脑对应的 Node 版本
$ n v16.6.1

# 切换为你下载的 Node 版本
$ n 16.6.1

可以敲node -v检查确保没问题，如下图：

恢复博客

  1. 下载博客源码
    使用ssh链接下载你博客的源码，如下：
1
git@github.com:Gahotx/hexo-backup.git
  1. 安装 Hexo
1
npm install hexo-cli -g
  1. 安装依赖文件
1
npm install --save

小结

到这里就部署完了，不过 Cloud Studio 不能同步 VSCode 的文件，用户代码片段文件自己手动复制一下就好，通过 Github action 自动部署博客和本文介绍的“博客后台”搭配使用，是不是有动态博客内味了？

Cloud Studio 对比其他博客后台工具可能最有用的就是可以在线hexo s预览博客了，改 CSS 魔改博客的时候实时预览变动效果还是很有用的。Ps: 如果你博客的 cdn 设置了防盗链，要把hexo s的泛域名加进白名单哟~