部署明星关系图谱那些事儿（GitHub Pages）

怼烎@ 2022-01-12 00:51 257阅读 0赞

时光飞逝，距离发布上一篇文章 [**InteractiveGraph 实现酷炫关系图谱之前瞻**][InteractiveGraph] 已经过去了近两个月，嘴上说着会马上把实战“娱乐圈明星关系图谱”的代码开源到 [**github/DesertsX**][github_DesertsX]，但却一直没有行动来着。

其实扯皮的话在那篇里已经讲得差不多了，后面代码部分感觉也没啥可讲的，稍微加点注释说明下哪块代码实现了什么功能，丢给大家自己琢磨就是了，也没啥太难的地方其实（逃……）。那既然代码都能跑通，也没啥不可抗拒的力量，为啥还“拖更”呢？虽然也并没有人催……

说起来，也是想到看到这个项目的很多人，可能不会写代码，现成的项目开源在全球最大的同性交友网站GayHub上也一头雾水，不会运行。而无法体验这么酷炫的明星关系图谱该是多么遗憾的事，所以古柳想着一定要把它部署到网页上，可供大家体验把玩！说干就干。

然而心有余而技能树不足的是，古柳并不会前端，也从没部署过网页，看代码里用到了`flask`，于是本着顺藤摸瓜地好学的精神跑去看了些视频学了下，真是一坑未平又入一坑。其实回头看该项目只用到非常入门级的`flask`知识，有代码为证，两处python代码也就这么几行而已：  
`app_run.py`

import os import sys from flask import Flask sys.path.append(".." + os.path.sep) from webapp.views.graph_view import graph app = Flask(__name__) app.register_blueprint(graph) if __name__ == '__main__': app.run()复制代码

`graph_view.py`

from flask import Blueprint, render_template graph = Blueprint('graph', __name__) # http://127.0.0.1:5000/ylq-star-GraphNavigator @graph.route('/ylq-star-GraphNavigator') def ylq(): return render_template('ylq-star-GraphNavigator.html')复制代码

以及被渲染的`ylq-star-GraphNavigator.html`模板里引入`js`、`css`文件和`json`数据时，用了`{ {url_for()}}`的语法来给静态文件生成 URL ，并使用特殊的 'static' 端点名，这里仅以引入`jquery-3.2.1.min.js`为例，其他类似。

不过**后面部署到 GitHub Pages 时都改成了相对路径的格式**（划重点）

如果你想了解下上述代码的含义，可以看看官方教程：[**快速入门— Flask 0.10.1 文档**][Flask 0.10.1]。

再是后续了解了下部署网页应用可能用到的技术栈之一：`python+flask+nginx+gunicorn+supervisor`，当然并非唯一。看过几篇文章后感觉各种配置比较繁琐，但应该不难，只是还需要“昂贵”的服务器和域名，一想到只是用来展示这个关系图谱，内心深处的“经济学理性人”就劝退了我。

貌似故事到这就该结束了，无法看到酷炫关系图谱的人，就自个人遗憾去吧。但忘了是什么缘由，古柳似乎被这个项目点燃了对前端的兴趣，于是搜罗了几本`Vue.js`的书（配图的梗搜下`Vue`的logo就明白了），找了些视频教程，过了遍基础……那是后话了，暂且不表。

也正是如此（要是以前一定不会关注到前端的文章），后来在掘金看到一篇蛮酷的文章 [**用vue2.6实现一个抖音很火的【时间轮盘】屏保小DEMO**][vue2.6_DEMO] ，注意到其在线体验地址 [**https://hongqingcao.github.io/word-clock/**][https_hongqingcao.github.io_word-clock] 不就是用的`GitHub Pages`嘛。如果你不知道`GitHub Pages`是什么，这里摘录一段介绍文字希望能解答你的困惑，想来你依然没看懂，说人话就是可以用来免费搭建个人博客，还是很不错的，目之所及用`GitHub Pages`搭建博客的人简直不要太多：

> [Github Pages][] 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默认提供的域名 [github.io][] 或者自定义域名来发布站点。

人在江湖飘，谁还没个用 `GitHub Pages` 搭建的免费静态博客呢。

假如你也想搭个博客装装逼，发发文章的话，这里安利下`Gridea`这款软件，按照官方文档和上手视频教程，技术小白应该也能比较轻松搞定。

扯回来，知道了`GitHub Pages`不仅可以搭博客，而且能单独部署网页，用来展示Web前端小项目这个“惊天大秘密”，古柳表示“山穷水复疑无路，柳暗花明又一村”，于是后面轻松捣鼓了下（此处省略1万字，具体过程下一篇再讲吧）也就实现了。

GitHub项目地址：[**DesertsX/yulequan-relations-graph**][DesertsX_yulequan-relations-graph]，关系图谱体验地址：[**https://desertsx.github.io/yulequan-relations-graph/**][https_desertsx.github.io_yulequan-relations-graph]

当然由于关系图谱里涉及1281张明星图片，导致网页加载比较慢，体验效果不太好，考虑到大家估计没耐心等完全加载，因而简单录制了个体验的视频放B站上：[**bilibili -超酷炫的娱乐圈明星关系图谱**][bilibili -]，28s，简短到配的火影忍者BGM都结束的猝不及防，第一次也是没经验，这又是后话了。欢迎前去一看，BGM还是很振奋人心的，逃。

转载于:https://juejin.im/post/5d0662eee51d455d6d53581f

[InteractiveGraph]: https://juejin.im/post/5cbc8b38e51d456e6b5d7dbe
[github_DesertsX]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FDesertsX
[Flask 0.10.1]: https://link.juejin.im?target=http%3A%2F%2Fdocs.jinkan.org%2Fdocs%2Fflask%2Fquickstart.html
[vue2.6_DEMO]: https://juejin.im/post/5cbdbea3f265da037875967f
[https_hongqingcao.github.io_word-clock]: https://link.juejin.im?target=https%3A%2F%2Fhongqingcao.github.io%2Fword-clock%2F
[Github Pages]: https://link.juejin.im?target=http%3A%2F%2Fpages.github.com%2F
[github.io]: https://link.juejin.im?target=https%3A%2F%2Fjekyllcn.com%2Fdocs%2Fgithub-pages%2F
[DesertsX_yulequan-relations-graph]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FDesertsX%2Fyulequan-relations-graph
[https_desertsx.github.io_yulequan-relations-graph]: https://link.juejin.im?target=https%3A%2F%2Fdesertsx.github.io%2Fyulequan-relations-graph%2F
[bilibili -]: https://link.juejin.im?target=https%3A%2F%2Fwww.bilibili.com%2Fvideo%2Fav55757908