博客抽风了，为了这又浪费了我宝贵的一天！-阿里云开发者社区

博客

这样的话还有点想象空间，以后可以省去一大部分同步文章的工作，都可以出发回调去通过 API 同步，不过暂时还没有调研这些平台是否能支持，不过应该问题不大。

试试解决方案可不可行吧，我觉得很 nice。

docsify 搭建安装

首先安装 docsify-cli 工具

npm i docsify-cli -g

然后进入自己的目录，初始化

docsify init ./

这样就差不多了，多了几个文件，简单修改一下 index.html，配置下名字和代码仓库的信息，开启下左边的侧边栏。

同时补充一点插件，都从网上搂的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '艾小仙',
      repo: 'https://github.com/irwinai/JavaInterview.git',
      loadSidebar: true,
      autoHeader: true,
      subMaxLevel: 3,
      sidebarDisplayLevel: 1, // set sidebar display level
      count:{
        countable:true,
        fontsize:'0.9em',
        color:'rgb(90,90,90)',
        language:'chinese'
      },
      search: {
        maxAge: 86400000, // Expiration time, the default one day
        paths: [], // or 'auto'
        placeholder: '开始搜索',
        noData: '啥也没有!'
      },
      copyCode: {
        buttonText : '点击复制',
        errorText  : '错误',
        successText: '复制成功'
      },
      footer: {
        copy: '<span>艾小仙 &copy; 2022</span>',
        auth: '赣ICP备2021008029号-1',
        pre: '<hr/>',
        style: 'text-align: right;',
        class: 'className'
      }
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  <!-- 搜索 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  <!-- 图片放大缩小支持 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
  <!-- 拷贝文字内容 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
  <!-- 字数插件 -->
  <script src="https://cdn.jsdelivr.net/npm/docsify-count@latest/dist/countable.min.js"></script>
  <!-- 分页导航 -->
  <script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
  <!-- 侧边栏扩展与折叠 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
  <!-- 页脚信息 -->
  <script src="//unpkg.com/docsify-footer-enh/dist/docsify-footer-enh.min.js"></script>
  <!-- GitTalk评论 -->
  <!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css">
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/gitalk.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script> -->
</body>
</html>

然后运行，本地会启动 http://localhost:3000，直接看看效果

然后运行，本地会启动 http://localhost:3000，直接看看效果

大概就这个样子了

侧边栏还没有，使用命令生成一下，会自动帮我们根据目录创建一个_sidebar.md文件，也就是我们的侧边栏了。

docsify generate .

然后再看看效果怎么样，差不多就这样，需要注意的是文件名不能有空格，否则生成的侧边栏目录会有问题，需要修改一下文件名使用中划线或者下换线替换空格（我无法理解为什么不能用空格）。

多级目录生成问题

另外还有一个问题是无法生成多级目录，也就是不能超过二级目录，这个我自己随便改了一下。

去 docsify-cli 官方 git 仓库下载源码，然后把这个丢进去，在目录下执行 node generate.js 就可以，底部测试目录改成自己的目录。

'use strict'
const fs = require('fs')
const os = require('os')
const {cwd, exists} = require('../util')
const path = require('path')
const logger = require('../util/logger')
const ignoreFiles = ['_navbar', '_coverpage', '_sidebar']
// eslint-disable-next-line
function test (path = '', sidebar) {
  // 获取当前目录
  const cwdPath = cwd(path || '.')
  // console.log('cwdPath', cwdPath, !!exists(cwdPath));
  // console.log('///////', cwdPath, path, cwd(path || '.'))
  if (exists(cwdPath)) {
    if (sidebar) {
      const sidebarPath = cwdPath + '/' + sidebar || '_sidebar.md';
      if (!exists(sidebarPath)) {
        genSidebar(cwdPath, sidebarPath)
        logger.success(`Successfully generated the sidebar file '${sidebar}'.`)
        return true
      }
      logger.error(`The sidebar file '${sidebar}' already exists.`)
      process.exitCode = 1
      return false
    }
    return false;
  }
  logger.error(`${cwdPath} directory does not exist.`)
}
let tree = '';
function genSidebar(cwdPath, sidebarPath) {
  // let tree = '';
  let lastPath = ''
  let nodeName = ''
  let blankspace = '';
  let test = 0;
  const files = getFiles(cwdPath);
  console.log(JSON.stringify(files));
  getTree(files);
  fs.writeFile(sidebarPath, tree, 'utf8', err => {
    if (err) {
      logger.error(`Couldn't generate the sidebar file, error: ${err.message}`)
    }
  })
  return;
  getDirFiles(cwdPath, function (pathname) {
    path.relative(pathname, cwdPath) // 找cwdPath的相对路径
    pathname = pathname.replace(cwdPath + '/', '')
    let filename = path.basename(pathname, '.md') // 文件名
    let splitPath = pathname.split(path.sep) // 路径分割成数组
    let blankspace = '';
    if (ignoreFiles.indexOf(filename) !== -1) {
      return true
    }
    nodeName = '- [' + toCamelCase(filename) + '](' + pathname + ')' + os.EOL
    if (splitPath.length > 1) {
      if (splitPath[0] !== lastPath) {
        lastPath = splitPath[0]
        tree += os.EOL + '- ' + toCamelCase(splitPath[0]) + os.EOL
      }
      tree += '  ' + nodeName
      // console.error('tree=====', tree, splitPath, splitPath.length);
    } else {
      if (lastPath !== '') {
        lastPath = ''
        tree += os.EOL
      }
      tree += nodeName
    }
  })
  fs.writeFile(sidebarPath, tree, 'utf8', err => {
    if (err) {
      logger.error(`Couldn't generate the sidebar file, error: ${err.message}`)
    }
  })
}
function getFiles (dir) {
  // let path = require('path');
  // let fs = require('fs');
  let rootDir = dir;
  var filesNameArr = []
  let cur = 0
  // 用个hash队列保存每个目录的深度
  var mapDeep = {}
  mapDeep[dir] = 0
  // 先遍历一遍给其建立深度索引
  function getMap(dir, curIndex) {
    var files = fs.readdirSync(dir) //同步拿到文件目录下的所有文件名
    files.map(function (file) {
      //var subPath = path.resolve(dir, file) //拼接为绝对路径
      var subPath = path.join(dir, file) //拼接为相对路径
      var stats = fs.statSync(subPath) //拿到文件信息对象
      // 必须过滤掉node_modules文件夹
      if (file != 'node_modules') {
        mapDeep[file] = curIndex + 1
        if (stats.isDirectory()) { //判断是否为文件夹类型
          return getMap(subPath, mapDeep[file]) //递归读取文件夹
        }
      }
    })
  }
  getMap(dir, mapDeep[dir])
  function readdirs(dir, folderName, myroot) {
    var result = { //构造文件夹数据
      path: dir,
      title: path.basename(dir),
      type: 'directory',
      deep: mapDeep[folderName]
    }
    var files = fs.readdirSync(dir) //同步拿到文件目录下的所有文件名
    result.children = files.map(function (file) {
      //var subPath = path.resolve(dir, file) //拼接为绝对路径
      var subPath = path.join(dir, file) //拼接为相对路径
      var stats = fs.statSync(subPath) //拿到文件信息对象
      if (stats.isDirectory()) { //判断是否为文件夹类型
        return readdirs(subPath, file, file) //递归读取文件夹
      }
      if (path.extname(file) === '.md') {
        const path =  subPath.replace(rootDir + '/', '');
        // console.log(subPath, rootDir, '========', path);
        return { //构造文件数据
          path: path,
          name: file,
          type: 'file',
          deep: mapDeep[folderName] + 1,
        }
      }
    })
    return result //返回数据
  }
  filesNameArr.push(readdirs(dir, dir))
  return filesNameArr
}
function getTree(files) {
  for (let i=0; i<files.length;i++) {
    const item = files[i];
    if (item) {
      if (item.deep === 0) {
        if (item.children) {
          getTree(item.children)
        }
      } else {
        let blankspace = ''
        for (let i = 1; i < item.deep; i++) {
          blankspace += '  '
        }
        // console.log('-' + blankspace + '-', item.deep)
        if (item.type === 'directory') {
          tree += os.EOL + blankspace + '- ' + toCamelCase(item.title) + os.EOL
        } else if (item.type === 'file') {
          tree += os.EOL + blankspace + '- [' + item.name + '](' + item.path + ')' + os.EOL
          // console.log('tree', tree);
        }
        if (item.children) {
          getTree(item.children)
        }
      }
    }
  }
}
function getDirFiles(dir, callback) {
  fs.readdirSync(dir).forEach(function (file) {
    let pathname = path.join(dir, file)
    if (fs.statSync(pathname).isDirectory()) {
      getDirFiles(pathname, callback)
    } else if (path.extname(file) === '.md') {
      callback(pathname)
    }
  })
}
function toCamelCase(str) {
  return str.replace(/\b(\w)/g, function (match, capture) {
    return capture.toUpperCase()
  }).replace(/-|_/g, ' ')
}
test("/Users/user/Documents/JavaInterview/", "sidebar.md");

这样的话一切不就都好起来了吗？看看最终的效果。

nginx 配置

webhook 暂时还没弄，先手动 push 上去然后把文件都传到服务器上去，再设置一下 nginx 。

server {
    listen 80;
    listen [::]:80;
    server_name aixiaoxian.vip;
    client_max_body_size 1024m;
    location / {
        root /你的目录;
        index index.html;
    }
}
server {
    listen       443 ssl;
    server_name  aixiaoxian.vip;
    root         /usr/share/nginx/html;
    ssl_certificate cert/aixiaoxian.pem;
    ssl_certificate_key cert/aixiaoxian.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_prefer_server_ciphers on;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
    include /etc/nginx/default.d/*.conf;
    location / {
        root /你的目录;
        index index.html;
    }
}

这时候你去 reload nginx 会发现网站可能 403 了，把你的 ng 文件第一行改了，甭管后面是啥，改成 root 完事儿。

user root;

这样就 OK 了。

内网穿透

然后，就需要搞一个 webhook 的程序了，但是在此之前，为了本地能测试 webhook 的效果，需要配置个内网穿透的程序，我们使用 ngrok 。

先安装。

brew install ngrok/ngrok/ngrok

然后需要注册一个账号，这里没关系，直接 google 登录就好了，之后进入个人页面会提示你使用步骤。

按照步骤来添加 token，然后映射 80 端口。

如果后面发现 ngrok 命令找不到，可以去官网手动下一个文件，丢到/usr/local/bin目录中就可以了。

成功之后可以看到 ngrok 的页面，使用他给我们提供的 Forwarding 地址，就是我们的公网地址。

我随便弄了个 80 端口，这里用自己到时候项目的端口号映射就行了，后面我们改成 9000。

webhook

配置好之后，就去我们的 github 项目设置 webhook，使用上面得到的地址。

这样就设置OK了，然后搞个 Java 程序去，监听 9000 端口，随便写个 Controller。

@PostMapping("/webhook")
public void webhook(@RequestBody JsonNode jsonNode) {
 System.out.println("json===" + jsonNode);
}

然后随便改点我们的文档，push 一下，收到了 webhook 的回调，其实我们根本不关注回调的内容，我们只要收到这个通知，就去触发重新拉取代码的指令就行。

{
    "repository": {
        "id": 306793662,
        "name": "JavaInterview",
        "full_name": "irwinai/JavaInterview",
        "private": false,
        "owner": {
            "name": "irwinai",
            "email": "415586662@qq.com",
            "login": "irwinai"
        },
        "html_url": "https://github.com/irwinai/JavaInterview",
        "description": null,
        "fork": false
    },
    "pusher": {
        "name": "irwinai",
        "email": "415586662@qq.com"
    },
    "sender": {
        "login": "irwinai",
        "id": 4981449
    }
}

接着，我们实现代码逻辑，根据回调执行命令去拉取最新的代码到本地，为了能通过 Java 操作 Git，引入 JGit。

<dependency>
  <groupId>org.eclipse.jgit</groupId>
  <artifactId>org.eclipse.jgit</artifactId>
  <version>5.13.1.202206130422-r</version>
</dependency>

为了简单，我每次都是重新 clone 仓库下来，正常来说应该第一次 clone，后面直接 pull 代码，这里为了省事儿，就先这样操作。

@RestController
public class WebhookController {
    private static final String REMOTE_URL = "https://github.com/irwinai/JavaInterview.git";
    @PostMapping("/webhook")
    public void webhook(@RequestBody JsonNode jsonNode) throws Exception {
        File localPath = new File("/Users/user/Downloads/TestGitRepository");
        // 不管那么多，先删了再说
        FileUtils.deleteDirectory(localPath);
        //直接 clone 代码
        try (Git result = Git.cloneRepository()
                .setURI(REMOTE_URL)
                .setDirectory(localPath)
                .setProgressMonitor(new SimpleProgressMonitor())
                .call()) {
            System.out.println("Having repository: " + result.getRepository().getDirectory());
        }
    }
    private static class SimpleProgressMonitor implements ProgressMonitor {
        @Override
        public void start(int totalTasks) {
            System.out.println("Starting work on " + totalTasks + " tasks");
        }
        @Override
        public void beginTask(String title, int totalWork) {
            System.out.println("Start " + title + ": " + totalWork);
        }
        @Override
        public void update(int completed) {
            System.out.print(completed + "-");
        }
        @Override
        public void endTask() {
            System.out.println("Done");
        }
        @Override
        public boolean isCancelled() {
            return false;
        }
    }
}

代码执行后已经是 OK 了，可以直接拉取到代码，那么至此，差不多已经 OK 了，后面把代码直接丢服务器上去跑着就拉倒了。

服务器的问题

好了，你以为到这里就结束了吗？年轻了，年轻了。。。

这代码丢到服务器上跑会发现报错连不上 github，如果你是阿里云服务器的话。

解决方案是找到 /etc/ssh/ssh_config，删掉 GSSAPIAuthentication no 这行前面的注释，然后保存，你才会发现真的是能下载了。

同时，nginx 我们映射另外一个域名作为回调的域名，这里需要主要以下你的 https 证书，因为我是免费版的，所以 https 这个域名无法生效，那 webhook 回调注意用 http 就行。

server {
    listen 80;
    listen [::]:80;
    server_name test.aixiaoxian.vip;
    client_max_body_size 1024m;
    location / {
        proxy_pass http://127.0.0.1:9000;
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
server {
    listen       443 ssl;
    server_name  test.aixiaoxian.vip;
    root         /usr/share/nginx/html;
    ssl_certificate cert/aixiaoxian.pem;
    ssl_certificate_key cert/aixiaoxian.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_prefer_server_ciphers on;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
    include /etc/nginx/default.d/*.conf;
    location / {
        proxy_pass http://127.0.0.1:9000;
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

OK，如果你用上面的方式还无法解决，可以换一种方式，直接通过 Java 直接 shell 脚本去处理。

rm -rf /root/docs/JavaInterview
git clone https://github.91chi.fun//https://github.com/irwinai/JavaInterview.git

用脚本的目的是可以用加速的 git 地址，否则服务器访问经常会失败，这个找个插件就可以有加速地址了。

public class ShellCommandsHelper extends CommandHelper {
    private static final File file = new File(FILE_PATH);
    @Override
    public void exec() {
        try {
            FileUtils.forceMkdir(file);
            log.info("Starting clone repository...");
            Process process = Runtime.getRuntime().exec("sh " + SHELL_PATH, null, file);
            int status = process.waitFor();
            if (status != 0) {
                log.error("[ShellCommandsHelper] exec shell error {}", status);
            }
        } catch (Exception e) {
            log.error("[ShellCommandsHelper] exec shell error", e);
        }
    }
}

代码上传的问题

好了，这样通过手动上传代码的方式其实已经可以用了，但是为了部署更方便一点，我建议安装一个插件Alibaba Cloud Toolkit，其他云服务器有的也有这种类型的插件。

安装好插件之后会进入配置的页面，需要配置一个accessKey。

去自己的阿里云账号下面配置。

配置好了之后，点击Tools-Deploy to xxx，我是 ECS ，所以选择 ECS 服务器即可。

然后在这里会自动加载出你的服务器信息，然后选择自己的部署目录，同时选择一个 Command 也就是执行命令。

这个命令随便找个目录创建一个这个脚本，放那里就行了，最后点击 Run，代码就飞快的上传了。

source /etc/profile
killall -9 java
nohup java -jar /root/tools/sync-tools-0.0.1-SNAPSHOT.jar > nohup.log 2>&1 &

结束

基本的工作已经做完了，那其实还有挺多细节问题没有处理的，比如失败重试、回调鉴权等等问题，这只是一个非常初级的版本。

同步代码 git 地址：https://github.com/irwinai/sync-tools

文章仓库地址：https://github.com/irwinai/JavaInterview

博客地址：https://aixiaoxian.vip/#/

博客抽风了，为了这又浪费了我宝贵的一天！

docsify 搭建安装

多级目录生成问题

nginx 配置

内网穿透

webhook

服务器的问题

代码上传的问题

结束

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

博客抽风了，为了这又浪费了我宝贵的一天！

docsify 搭建安装

多级目录生成问题

nginx 配置

内网穿透

webhook

服务器的问题

代码上传的问题

结束

热门文章

最新文章

相关课程

相关电子书