tsheep脚手架新功能-- t-tsheep custom 自定义github首页
前记
续接上集，上一篇文章写了如何去自定义自己的github主页，而看过我之前文章的朋友可能有看到过，我写过一篇关于自己的脚手架的一篇文章：《观Bun 1.0有感之实现前端检查器集成eslint配置+jest和mocha自动化测试》，这几天我就在想，我是不是可以在脚手架上新添加一个新的功能，当执行某条命令（t-tsheep custom）的时候，本地自动创建仓库代码，远程仓库自动创建自定义主页的仓库，同步本地与远程的仓库代码，只要在本地代码修改完直接push就能同步到远程的仓库，实现自定义GitHub首页。
实现效果
执行命令
执行过程
执行结果
- 本地创建
- GitHub 同步创建远程仓库
- 自动推送
展示效果
如何使用
在这个文件添加你想要的，然后push到main就能更新。
实现思路
自定义GitHub主页的原理
看过我上一篇文章的朋友大概了解过自定义GitHub首页的原理，只要在GitHub仓库中去创建一个与自己账户名称同名的仓库，里面的READEME.md文件就会自动映射到主页上，从而实现自定义主页。也就是说这样脚手架命令创建一个本地带有READEME.md的仓库，然后拿得到GitHub的用户名称作为创建远程仓库的仓库名，并把本地仓库和远程仓库进行链接同步，就能实现通过命令行自定义GitHub主页。
创建custom命令
- 创建lerna分包
lua
lerna create custom packages/- 注册命令
js
// @/packages/custom/lib/index.js
"use strict";
import path from "node:path";
import fs from "node:fs";
import Command from "@tsheep.com/command";
class CustomCommand extends Command {
get command() {
return "custom";
}
get description() {
return "custom git";
}
get options() {}
async action([name, opts]) {
console.log("custom");
}
}
function Custom(instance) {
return new CustomCommand(instance);
}
export default Custom;
// @/packages/cli/lib/index.js
import createInitCommand from "@tsheep.com/init";
import createInstallCommand from "@tsheep.com/install";
import createCLI from "./createCLI.js";
import createLintCommand from "@tsheep.com/lint";
import createCommitCommand from "@tsheep.com/commit";
import createCustomCommand from "@tsheep.com/custom";
import "./exception.js";
export default function (argv) {
const program = createCLI();
createInitCommand(program);
createInstallCommand(program);
createLintCommand(program);
createCommitCommand(program);
// 在这里进行挂载
createCustomCommand(program)
program.parse(process.argv);
}上面讲述了如何去创建一个命令，通过lerna分包管理每个命令形成的包，全部代码可以到我的GitHub上浏览，我会把地址放在最后面。
创建远程仓库
js
// @/packages/custom/lib/index.js
...
this.gitAPI = await initGitServer();
const user = await this.gitAPI.getUser();
this.name = user.login;
...
async createCustomRes() {
// 得到git用户信息
await initGitType(this.gitAPI);
// 创建远程仓库
await this.gitAPI.createCustomRepo(this.name);
}根据GitHub开源API，只要拿到GitHub上的token认证（这是可以在主页setting上生成的，还可以设置过期时间），然后通过GitHub上的接口拿到用户的名称，再把用户的名称作为仓库的名称传参过去从而远程创建出一个与自己用户名相同的仓库。详细请看：（里面有很多GitHub提供给我们用的api接口）
创建本地配置及文件
- 创建
README.md文件
js
// @/packages/custom/lib/index.js
...
async initLocal() {
// 此处省略本地与远程连接
...
// 创建README.md文件
const dir = process.cwd();
const gitREADME = path.resolve(dir, "README.md");
if (!fs.existsSync(gitREADME)) {
log.info("README.md 文件开始创建");
fs.writeFileSync(gitREADME, "test");
log.success("README.md 文件创建成功");
}
...
// 此处省略首次自动推送（代码同步）
}
...通过node创建README.md文件
- 本地与远程连接
js
// @/packages/custom/lib/index.js
...
async initLocal() {
//本地与远程连接
const remoteUrl = await this.gitAPI.getRepoUrl(
`${this.gitAPI.login}/${this.name}`
);
console.log(remoteUrl);
// 初始化git对象
this.git = SimpleGit(process.cwd());
const gitDir = path.resolve(process.cwd(), ".git");
console.log(gitDir);
if (!fs.existsSync(gitDir)) {
await this.git.init();
log.success("完成git初始化");
}
// 获取所有得remotes
const remotes = await this.git.getRemotes();
if (!remotes.find((remote) => remote.name === "origin")) {
this.git.addRemote("origin", remoteUrl);
log.success("添加git remote", remoteUrl);
}
// 创建README.md文件
...
...
// 此处省略首次自动推送（代码同步）
}
...通过GitHub API 得到之前创建的远程仓库的链接，通过插件simple-git进行git操作，首先生成.git文件进行git初始化，然后获取本地的远程仓库链接，如果没有远程仓库，则将刚刚获取到的远程仓库链接添加到本地，实现本地与远程的连接。
- 首次自动推送（实现代码同步） 可以看到，我们本地创建的
README.md文件里面有一个test文案的，而反观我们远程仓库上却是连文件都没有，这个时候就得实现一下自动代码同步。
js
// @/packages/custom/lib/index.js
...
async initLocal() {
//本地与远程连接
...
// 创建README.md文件
...
...
// 首次自动推送（代码同步）
await this.git.add("README.md");
await this.git.commit("test");
await this.git.branch(["-m", "master", "main"]);
setTimeout(() => {
this.git.push(remoteUrl, "main");
}, 1000);
}
...这边有几个小细节：第一，因为本地创建git仓库默认的分支是master分支，而GitHub上的默认分支是main，所以这里就需要把本地的master变成main；第二，因为远程的分支具有一定的延迟性，所以我这边用了计时函数，等一秒过后再进行push（因为是第一版的代码，后面应该有更好的解决办法）
最后
因为并不是一开始就说明这个脚手架的搭建的，这样看下来可能有点模棱两可，但是我的实现思路大致上是这个样子的，有兴趣的朋友可以看看代码仓库，欢迎大家来批评指正代码或者有其他想法都可以滴我，后续我会把这个项目重构成ts项目。