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

时光飞逝，距离发布上一篇文章 InteractiveGraph 实现酷炫关系图谱以前瞻 已通过去了近两个月，嘴上说着会立刻把实战“娱乐圈明星关系图谱”的代码开源到 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为例，其余相似。

<script src="{{url_for('static',filename='./lib/jquery-3.2.1/jquery-3.2.1.min.js')}}"></script>复制代码

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

<script src="./static/lib/jquery-3.2.1/jquery-3.2.1.min.js"></script>复制代码

若是你想了解下上述代码的含义，能够看看官方教程：快速入门— Flask 0.10.1 文档。

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

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

也正是如此（要是之前必定不会关注到前端的文章），后来在掘金看到一篇蛮酷的文章 用vue2.6实现一个抖音很火的【时间轮盘】屏保小DEMO ，注意到其在线体验地址 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，关系图谱体验地址：https://desertsx.github.io/yulequan-relations-graph/

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