TIP

gitee部署网站自动更新是giteePagePro的功能，需要付费，怎么来实现自动更新？

上次写了部署在服务器，利用webhook来触发的方式updateGiteePage)，这次写没有服务器，本地触发的方式。

我们以我现在用的vuepress博客为例

安装必要包

# 进入项目目录
# 安装puppeteer
yarn add puppeteer -D

主要实现

在根目录下创建deploy.js文件

// depoly.js
const puppeteer = require('puppeteer');
// 填写你的gitee用户名密码和giteePage更新的那个页面
const USERNAME = '';
const PASSWORD = '';
const GITEE_PAGE_URL = ''; // https://gitee.com/wangshiting/wangshiting/pages
/**
 * @param usename gitee用户名
 * @param password gitee密码
 * @param giteePageUrl giteePage更新的那个页面
 */
async function updateGiteePage(username, password, giteePageUrl) {
  const browser = await puppeteer.launch({
          args: ['--no-sandbox', '--disable-setuid-sandbox']
    });
    const page = await browser.newPage();
    await page.goto('https://gitee.com/login');
    // 1. 选中账号控件
    let accountElements = await page.$x('//*[@id="user_login"]') // 此处使用 xpath 寻找控件，下同
    // 2. 填入账号
    await accountElements[0].type(username)
    // 3. 选中密码控件
    let pwdElements = await page.$x('//*[@id="user_password"]')
    // 4. 填入密码
    await pwdElements[0].type(password)
    // 5. 点击登录
    let loginButtons = await page.$x('//*[@id="new_user"]/div/div/div/div[4]/input')
    await loginButtons[0].click()
    // 6. 等待登录成功
    await page.waitForTimeout(3000)
    // 前往giteePage的页面
    await page.goto(giteePageUrl);
    console.log('已到达pages页面')
    await page.waitForTimeout(1000)
    // 7. 点击更新按钮，并弹出确认弹窗
    let updateButtons = await page.$x('//form[@id="pages-branch"]/div[6]')
    // 7.1. 监听步骤 7 中触发的确认弹框，并点击确认
    await page.on('dialog', async dialog => {
        console.log('更新')
        dialog.accept();
    })
    await updateButtons[0].click()
    // 8. 轮询并确认是否更新完毕
    while (true) {
        await page.waitForTimeout(2000)
        try {
            // 8.1 获取更新状态标签
            deploying = await page.$x('//*[@id="pages_deploying"]')
            if (deploying.length > 0) {
                console.log('更新中...')
            } else {
                console.log('更新完毕')
                break;
            }
        } catch (error) {
            break;
        }
    }
    await page.waitForTimeout(500);
    // 10.更新完毕，关闭浏览器
    browser.close();
}

updateGiteePage(USERNAME, PASSWORD, GITEE_PAGE_URL);

配置package.json

"scripts": {
  "dev": "vuepress dev ./docs",
  "build": "vuepress build ./docs",
  "dist": "cd docs/.vuepress/dist && git init && git remote add origin giteePage仓库克隆地址 && git add -A && git commit -m '更新博客' && git push -f origin master && node ../../../deploy.js",
  "blog": "yarn build && git add -A && git commit -m '更新博客' && git pull && git push && yarn dist",
}

只是更新giteePage的控制台执行yarn build后执行yarn dist

同时将博客仓库推送的控制台执行yarn blog

等待控制台打出更新完毕后，浏览器查看你的giteePage地址，看看是否更新

注意

• 一定要微信关注gitee并绑定账号，不然会需要短信验证码