开源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

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

修改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浏览即可。

注意:源文件中的<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/

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇