学习SQL的侦探游戏

西北大学的Knight Lab做了个学习SQL的侦探游戏网站，使用SQL语句查找凶杀案嫌疑人。该项目是开源的。原网站是英文的，我翻译成了中文版，重新部署了一遍，将过程记录如下：

1.本地部署

首先从开源代码仓库下载了所有资源。但是直接用浏览器html会有问题，有些资源加载不进来，是Chrome浏览器的安全策略，Chrome不允许从本地导入js。解决方法：在包含html目录下，通过python在本地启动一个服务器，python -m http.server，再浏览器访问127.0.0.1:8000即可访问。

查看html代码可以发现，html导入了一些外部的css和js，如果断块本地网络，打开会出现无法获取资源的问题，SQL语句也无法运行。解决办法：将资源全部导入本地，加快访问速度。在Chrome开发者模式下，从资源列表（resource）中右键下载各种资源，在html目录下创建img，script，css等文件夹存放，同时修改html代码中资源的引用。

修改后在本地起http服务，访问查看没问题后进入翻译环节。

2.编辑优化网站

用Nodepad++打开html文件，直接翻译编辑网站内容。在网页中插入探针可以查看网页浏览情况，如google analystics，添加方法。这里使用百度统计，进行浏览统计，添加script代码在head标签中即可，很方便。

3.静态页面托管

之前想部署在云服务器上，需要申请域名，租赁资源比较麻烦。发现可以直接在github上托管静态页面，参考这个案例托管了一个中国象棋的静态页面。

使用github desktop工具，从本地上传页面和相关资源，参考。操作比较简单，不需要使用git命令。编辑相当于github上与本地一个目录做同步的工具。创建一个gh-pages的分支，在setting中设置激活page即可。web版访问地址：https://yestolife.github.io/sql_game/，中文版源代码在这里。你也可以自己部署一下试试。