前言

拥有静态博客后台的前提是博客集成了自动部署,可以先查看 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_rsaid_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的泛域名加进白名单哟~