开源GitHub文档站点访问失败问题

开源GitHub文档站点访问失败问题

最近遇到一些GitHub的文档站点访问有问题，根本问题不是网站不能访问，而是访问网站的时候页面显示不出来，查看网络连接后发现，主要原因是这些网站一般都是用了Google的CDN来访问公共的js或css数据，Google CDN在国内访问不了。

以AngularJS的angular-ui-bootstrap网站为例：http://angular-ui.github.io/bootstrap/，此网站打开就有问题，内容会显示为空白。

一般这种网站都是使用了静态的页面，并且在GitHub上有源文件，因此我们可以把源文件下载下来，自己启动。

注意：很多开源项目都是一样的逻辑，直接打开示例demo的网站显示是有问题的，基本都是使用了Google CDN的js和css引起。

GitHub页面源文件

很多开源项目会把文档放到工程的gh-pages分支版本下面，如：

angular-ui-bootstrap的文档源码：https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files

image

可以使用GitHub的clone或者下载，下载比较简单，建议用下载：

image

修改GitHub页面

下载文件到本地，解压文件夹。

可以看到目录结构，我们主要是修改html文件就可以了。

修改index.html文件

主要修改javascript文件路径，用国内的cdn地址来代替，我目前使用的是https://www.bootcdn.cn/，对应的CDN地址是：https://cdn.bootcss.com：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.1/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.1/angular-animate.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.1/angular-touch.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.1/angular-sanitize.js"></script>

然后可以直接打开index.html浏览即可。

image

注意：源文件中的<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>脚本路径是没有协议名称的，因此我们用什么协议打开页面，它们也就使用什么协议，我们用本地用文件打开的时候会有问题，因此要把它改成https:开头

国内可用CDN地址

国内可用的比较常用的CDN地址参考：

https://www.bootcdn.cn/（推荐）

https://cdnjs.com/

https://cdn.baomitu.com/

https://www.staticfile.org/