实现GiteePages自动部署的aardio源码

问题的由来

github提供开源项目管理，同时提供静态网站github page，但国内访问速度很慢，经常打不开，gitee码云在国内，提供和github一样的功能，但gitee page每次推送文件后，不会自动刷新（免费版），必须手动刷新!网上已有提供python自动刷新Gitee Pages的源码!

python自动部署Gitee Pages源码

1. python环境要求
   python3 + selenium + chromedrive.exe。

• 先安装好python3(最好设置好国内镜像源，不然安装库，因墙的缘故可能失败)
• 再安装好selenium库
  pip install selenium
  pip install Alert
• 下载chrome对应的chromedriver

2.python源码

import time
from selenium import webdriver
from selenium.webdriver.common.alert import Alert
option = webdriver.ChromeOptions()
#指定chrome浏览器
option.binary_location=r'D:\Program Files\CentBrowser64\chrome.exe'
#指定chromedriver和chrome版本要匹配
driver = webdriver.Chrome(r'D:\Program Files\CentBrowser64\chromedriver.exe')
driver.get('https://gitee.com/login')
driver.maximize_window()
time.sleep(2)

user_login = driver.find_element_by_id('user_login')
user_login.send_keys("gitee的用户名")
driver.find_element_by_id('user_password').send_keys("gitee的登录密码")
driver.find_element_by_xpath('/html/body/div[2]/div[2]/div/div[1]/div[2]/div[1]/form[1]/div/div/div/div[4]/input').click()
time.sleep(2)
driver.get('https://gitee.com/此处改为you_gitee_id/此处改为you_gitee_id/pages')
driver.find_element_by_xpath('/html/body/div[3]/div[2]/div/div[2]/div/form/div[6]').click()
Alert(driver).accept()
time.sleep(5)
print("成功")
driver.quit()
fp = open("D:\log.txt", "a+")
now_time = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
fp.write("部署时间:{0}\n".format(now_time))
fp.close()

提供此代码的开源项目地址：https://github.com/witmy/my-giteepages
上面的代码修改了一下，指定了chrome浏览器地址和chromedriver的地址，这样就不会运行不了!特别适合小白!

aardio自动部署Gitee Pages的源码

python的代码，如果是新手，安装python，然后直接运行上面的源码，成功的机率很小，因为Chrome driver是需要浏览器和driver版本匹配的!上面的python源码，如果你不熟悉python，基本上调试不会成功!
不过不要紧，下面我讲的，小白也会的aardio教程，一步一步复杂粘贴就能实现，你不需要会python，不需要会aardio，一样可以编译一个自动更新gitee pages的执行文件!

1. 查看chrome内核的浏览器版本
   只要是使用chrome为内核的浏览器，都可以，比如qq浏览器，360极速浏览器，搜狗浏览器或chrome谷歌浏览器!第一步打开浏览器，第二步，在地址栏输入 chrome://version 查看版本号，正常应该显示为这样
   
   查看版本号，上图版本号为86.0.4240.112，并且知道浏览器的路径为 D:\Program Files (x86)\360Chrome\Chrome\Application\360chrome.exe
2. 打开chromedriver的镜像网站https://npm.taobao.org/mirrors/chromedriver 下载相应的chromedriver
   
   对应上面的chrome，应该下载86.0.4240.22，最后的版本号112，选择最接近的就行！
   进入86.0.4240.22目录，下载 chromedriver_win32.zip，并解压到本地目录，如d:\temp\
3. aardio部署gitee pages的源码

   import chrome.driver;
   var driver = chrome.driver("D:\Program Files\CentBrowser64\chrome.exe","d:\temp\chromedriver.exe");
   //driver.addArguments("--headless","--disable-gpu","--remote-debugging-port=9222"); //无头模式
   var browser = driver.startBrowser( {
       loggingPrefs  = { browser = 'ALL', performance = 'ALL', };
   	perfLoggingPrefs = {
       	enableNetwork = true,
       	enablePage= false,
       	enableTimeline = false
   	} 
   });
   browser.go("https://gitee.com/login")
   var ele = browser.querySelector("body").querySelector("#user_login"); 
   ele.setValue( "gitee的用户名" );//改为你的gitee用户名
   ele = browser.querySelector("body").querySelector("#user_password");
   ele.setValue( "gitee的登录密码" ); //改为你的gitee密码
   var searchButton = browser.doScript(` 
   		return arguments[0].querySelector("#new_user > div > div > div > div:nth-child(4) > input");
   	`
   	,browser.querySelector("body")
   )
   //也可以直接使用query查询，以及使用xpath取值，如 searchButton = browser.query(["xpath"] = '/html/body/div[1]/div[1]/div[5]/div[2]/div/form/span[2]/input');
   searchButton.click();
   win.delay(2000)
   browser.go("https://gitee.com/此处改为you_gitee_id/此处改为you_gitee_id/pages"); //改为你的gitee项目地址
   var gxButton=browser.doScript(`
      return arguments[0].querySelector("#pages-branch > div.button.orange.redeploy-button.ui.update_deploy");
   `,browser.querySelector("body")
   )
   win.delay(5000)
   gxButton.click();
   browser.alert.accept();
   win.delay(2000)
   browser.closeAll();

   其中，代码的第二行的参数，第一个改为你的浏览器路径（其中第一步上面已查看到），第二个参数改为你下载的chromedriver的路径
   ，然后在http://www.aardio.com 下载aardio，新建文件，复制上面代码，直接编译就可运行(如果没有chrome.divver库，aardio会自动下载)

后期可能失效说明

登录按钮的css selector，现在为 #new_user > div > div > div > div:nth-child(4) > input
更新按钮的css selector, 现在为 #pages-branch > div.button.orange.redeploy-button.ui.update_deploy
如何查看这两个按钮的css selector
比如更新按钮的css selector
手动打开gitee pages更新页面，对着更新按钮，右键审查元素，
在弹出的devtool的Elements界面，自动选中的地方右键，点击选择copy selector，把上面的代码中修改即可!

其实就是一个模拟手动按键的过程!不过无头模式，似乎有点问题，有时不点击更新，也可能是延时问题，但非无头模式是正常的，不点击就加大延时!

题外话:-Headless Chrome

Headless Chrome 是 Chrome 浏览器的无界面形态，可以在不打开浏览器的前提下，使用所有 Chrome 支持的特性运行你的程序。相比于现代浏览器，Headless Chrome 更加方便测试 web 应用，获得网站的截图，做爬虫抓取信息等。相比于出道较早的 PhantomJS，SlimerJS 等，Headless Chrome 则更加贴近浏览器环境。
启动无头模式

chrome.exe --headless --disable-gpu --remote-debugging-port=9222  https://github.com

获取屏幕截图

chrome.exe --headless --disable-gpu --screenshot --window-size=1280,1696 https://github.com

获取页面为PDF

chrome.exe --headless --disable-gpu --print-to-pdf https://github.com

打印页面DOM

chrome.exe --headless --disable-gpu --dump-dom https://github.com/