Embed Like Gist
背景
写前面的博客的时候，我需要贴自己 GitHub 的代码，在网上搜了搜，找到了一个网站，https://gist-it.appspot.com/ ，挺好用的。不过后来，我用手机（没开梯子）打开自己的博客，却发现那个代码不见了，查了下才知道，appspot.com 是谷歌云平台的域名，那个网站是建立在谷歌云上的，所以自然被墙。再打开那个网站对应的 GitHub 项目，发现已经若干年没有更新。这个时候我是还没有写一个类似网站的想法的。
晚上睡觉的时候，不自觉想到了这个问题，突然想到了很多网站都有的改域名的操作：比如在 Youtube 域名的前后加上什么东西就能下载对应的视频……几分钟后，我点亮床边的手机，搜了下发现 emgithub.com 这个域名可注册，“用户只要把当前浏览的文件的 URL 加上‘em’，就能进到我的网站得到嵌入代码”，于是我把它注册，睡觉了。
第二天上计算方法课的时候，我在走神，想着那些改域名的网站是怎么操作的，按我自己的理解，如果使用 Node.js 或 Flask 这些应该好实现，毕竟它们可以在代码里直接监听某种匹配的请求。如果不用呢？我猜 Web 服务器（比如我用的 Nginx）的转发规则应该可以实现，又查了查，发现 PHP 也可以实现，$_SERVER['REQUEST_URI'] 可以得到导致 404 的请求地址……
看起来这些方法都可以，但是我不甘心，我希望可以把网站建在 GitHub Pages 上，一个原因是如果想用自己的阿里云服务器我还要给这个域名备案，有点麻烦，另一个原因有点扯，是说如果我的网站变得很 NB 有很多人在用的话，前面的那些方法看起来需要我有一台强大的服务器才行，万一用的人太多，把我服务器挤爆了呢！（笑）
总结一下，我希望能建立一个静态网站，只用 HTML，Javascript，CSS 以及 GitHub Pages 提供的 Jekyll 环境，嫖 GitHub 的服务器，把网站建在 GitHub Pages 上。
经过
技术上这个站主要有两部分，第一个是捕获用户的导致 404 的源地址，从而实现“用户只要把当前浏览的文件的 URL 加上‘em’，就能进到我的网站得到嵌入代码”，第二个是生成 Javascript 嵌入的代码。
捕获导致 404 的源地址
先是绕了一些弯路，浪费了挺长时间没解决。让我找到突破口的是两个东西，第一个东西是了解到 GitHub Pages 支持你自定义 404 页面，只要在根目录建立一个 404.html 就好了，第二个是注意到输入一个导致 404 错误的链接后，虽然显示的是 404 页面，但是页面的地址没有变，在控制台里 window.location.href 还是当前的链接（自定义 404 页面后不跳转到 /404.html 这个是 GitHub Pages 的特殊行为还是说是 Web 服务器的一般行为呢？留待测试）。有了这两点，在自定义 404 页面里面捕获源地址就好啦。
（2019.12.21）补充：看起来确实是一般行为（至少从我对 Nginx 的测试结果来看是的）。在测试中，我用两种方法来做自定义 404，第一种是
location / {try_files $uri $uri/ /404.html;}，这种不难理解，当匹配不到同名的文件或目录时返回/404.html，所以这种方式甚至连 404 状态码都不会返回，而是会返回 200；另一种是更常见的error_page 404 /404.html;，这种方式会返回 404 状态码，但是并不会跳转。综上来看，这种思路是完全可行的。
生成 Javascript 嵌入的代码
观察 https://gist-it.appspot.com/ 这个网站提供的 JS 脚本和 GitHub Gist 提供的 JS 脚本，发现直接访问脚本，能直接获得用 document.write() 封起来的目标文件的内容，看起来它们的工作原理都是在服务端动态生成？这样的话，服务端的压力可不低。
受限于要做成一个静态的站点，只能在浏览器端完成“获取文件再 document.write()”这一过程。我的脚本文件要嵌入到用户的网页，因此不能假设 jQuery 可用。之前没有写过类似的 Javascript，碰到很多奇怪的小问题，也 Debug 了很久，还好总归完成了。
因为这个小项目，又浪了一两天，接下来就是各种 DDL 和期末复习的漫漫长路了。:)
Comments