/SiteHistory

伴随着时间，记录网站的历史

Primary LanguageC#

那年那站那样

伴随着时间，记录着网站的历史.
记录下网站现在的样子，待那年今日.
那一年，那个网站，是那个样子.

技术栈

  1. .NET Core:.NET Core 是.NET Framework的新一代版本，具有跨平台 (Windows、Mac OSX、Linux) 能力的应用程序开发框架 (Application Framework)。
  2. Selenium:一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。结合phantomjs等驱动可以实现页面自动化。
  3. Github:一个面向开源及私有软件项目的托管平台，因为只支持git 作为唯一的版本库格式进行托管，故名GitHub,又名GayHub
  4. Travis CI:采用yaml格式配置，简洁清新的开源持续集成构建项目。

我将其用来打包vue的纯工具站点metools,以及.net core程序(SiteHistory) 啥，还不会？戳这里→→使用travis-ci自动部署github上的项目

程序运行

  1. 安装phantomjs，并设置环境变量(Travis CI环境提供PhantomJS预装)
  2. 安装.net core2.0 SDK
  3. 执行命令：dotnet run 参数1[名称] 参数2[网页链接] 参数3[图片格式] 参数4[等待时间] 参数5[保存目录]
    1. dotnet run baidu https://www.baidu.com/

      保存[https://www.baidu.com]页面的截图名称为[baidu.jpg]

    2. dotnet run baidu https://www.baidu.com/ png

      指定图片类型为png

    3. dotnet run baidu https://www.baidu.com/ jpg 20

      加载完毕后等待20s后截图(图片加载或网站速度过慢)

    4. dotnet run baidu https://www.baidu.com/ jpg 10 download-test

      下载的图片保存到download-test文件夹下

    5. dotnet run baidu https://www.baidu.com/ jpg 10 download-test "alert('233')"

      加载完毕后执行一段js

项目构建思路

  1. 运行程序，传入名称 网址 如：dotnet run baidu https://www.baidu.com
  2. 创建一个phanomjs无头浏览器: IWebDriver driver = new PhantomJSDriver();
  3. 在浏览器中打开传入网站:driver.Navigate().GoToUrl(sitePage);
  4. 执行js使其滚动到底部，触发懒加载，等待网页图片加载
  int waitTime=10;
  var myScript = @"var ymtimer=setInterval(function(){
                      if (document.body.scrollHeight - 700 < document.body.scrollTop){
                          window.scroll(0, document.body.scrollHeight)
                          clearInterval(ymtimer);
                          return;
                      }
                      window.scroll(0, document.body.scrollTop + 700)
                  } ," + waitTime * 1000 / 10 + ");";
  //10s中从头部滚动到底部
  ((IJavaScriptExecutor)driver).ExecuteScript(myScript);
  //等待滚动完毕，图片也差不多能加载完闭
  System.Threading.Thread.Sleep(1200 * waitTime);
  1. 开始截图:((ITakesScreenshot)driver).GetScreenshot().SaveAsFile("baidu.com",ScreenshotImageFormat.Jpeg)
  2. 拼接文本写入Readme.MD,Index.html
  3. 关闭无头浏览器,程序结束driver.Quit()

.travis.yml配置说明

# 语言为scharp,系统为ubuntu14.04(代号trusty),.netcore 版本2.0
# Travis CI提供 phantomjs预装
language: csharp
dist: trusty
dotnet: 2.0.0

# mono:latest Travis CI默认会安装mono，测试发现若不安装mono,Travis CI会在程序截图时报错
# 打印组件版本
before_install:
  - dotnet --version
  - phantomjs --version

script:
  - dotnet restore
  - dotnet run ip http://1212.ip138.com/ic.asp png 
  - dotnet run acfun http://www.acfun.cn/ jpg 20
  - dotnet run bilibili https://www.bilibili.com jpg 20
  - dotnet run youtube https://www.youtube.com jpg 20
  - dotnet run google https://www.google.com
  
# 将截图提交到 ${P_BRANCH} 分支中(gh-pages) 
# export abc='date +%Y%m%d' 获取年月日
# 脚本将根据时间创建新分支 `gh-pages_20170901`，并更新gh-pages分支
#
after_script:
  - cd download
  - git init
  - git config user.name "${U_NAME}"
  - git config user.email "${U_EMAIL}"
  - git add .
  - git commit -m "add imgs"
  - git remote add orginimgs "https://${GH_TOKEN}@${GH_REF}"
  - export current_date='date +%Y%m%d'
  - echo "current_date:$($current_date)"
  - git push --force --quiet orginimgs master:gh-pages
  - git push --force --quiet orginimgs master:gh-pages_$($current_date)

branches:
  only:
    - master

总结

  1. 测试发现IP地址每次都会发生变化,引发无限遐想~
  2. Linux下获取年月日字符串 设置：export current_date='date +%Y%m%d' 输出：echo "current_date:$($current_date)"
  3. .net core使用Selenium需要引入Nuget包为：CoreCompat.Selenium.WebDriver

配置中的变量按照此文章配置即可 亲测搭配travis-ci食用最佳，Fork之后，前往travis-ci配置即可 参阅文章:使用travis-ci自动部署github上的项目
欢迎分享值得记录的网站。