部署明星關係圖譜那些事兒（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仍是很振奮人心的，逃。