部署明星关系图谱那些事儿(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模板里引入jscss文件和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还是很振奋人心的,逃。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容

  • # Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列...
    小迈克阅读 2,984评论 1 3
  • 淡色空杯满肚圆,留嘴芳香夜已深。花卧无眠垂青奄,笑谈逍乐待天明。
    八斗才001阅读 285评论 0 0
  • 人与人之间的相处,都是从赞美开始的,男女关系中更是如此。如果赞美得当,则你们很快就能成为好朋友,下一步才有可能发展...
    预见的未来阅读 637评论 0 0
  • 晨风淅淅玉芷兰,一点云梢,两段彩虹。 云空鸟雀谁心知?徘徊孤园,忧心我愿。 花夕残阳朝情慕,三层烟雨,四刻离愁。 ...
    花落衣阅读 157评论 0 3
  • 早年在网上看到这样一段话,“这些年,我一直提醒自己一件事,千万不要自己感动自己,大多数人看似的努力,不过是愚蠢导致...
    我是彩虹小姐阅读 9,201评论 57 208