技术探索 你会用GitHub协同共建一个“开源”网站吗？

原创  谢作如 邱奕盛  中国信息技术教育  5月19日

随着安卓智能手机的普及，“开源”这一名词逐渐被大众接受。

教育部发布的《普通高中信息技术课程标准（2017年版）》，要求重点普及“开源”思想，引导学生理解并自觉践行开源的理念与知识分享的精神。

如何与更多的人一起分享自己的学习心得？除了在公共平台发表文章外，做一个网站也是一个重要的途径。

但对很多人来说，做网站似乎是一个专业的技能，会涉及域名购买、解析等，其实做一个网站并没有那么难，只要会用GitHub就可以了。

图 1 GitHub网站

用GitHub建站的可行性分析

GitHub是全球最大的代码共享平台，准确地说，Git Hub是一个面向开源及私有软件项目的托管平台。

除了支持Git（一个开源的分布式版本控制系统）外，GitHub还提供了很多有趣的功能，如GitHubPages。选择GitHub Pages来建网站，理由有如下三个：

使用方便。Git Hub Pages集成在GitHub中，直接和代码管理绑定在一起。采用代码更新命令进行自动部署，使用起来非常方便。维护方面同时支持在线管理和客户端管理两种方式。

免费。GitHub免费提供了“username.git hub.io”的域名，还支持自定义域名，几乎等同于一个免费的静态网站服务器。

无数量限制。Git Hub Pages没有数量使用限制，每一个Reposit or y（仓库）都可以部署为一个静态网站。

当然，如果仅仅是发布静态网站，那么更新网站就会变得很无趣。最近，GitHub的程序员发布了FastPages 的工具，能够将文档直接转换为网页。支持的文档类型很多，如Word、MarkDown和Jupyter等。也就是说只要按照规范上传文档，主页会自动进行更新。

图2 用FastPages生成的网站

建立GitHub Pages的步骤介绍

首先需要注册GitHub用户。有了用户后，再建一个名称为“username.github.io”的Repositor y（仓库），一个静态网站就建好了。

例如，笔者的用户名是“xiezuoru”，这个库的名称就是“xiezuoru.github.io”。然后，在这个Repositor y的根目录下建一个名称为“i ndex.ht ml ”的文件，输入HTML代码，主页就产生了。访问“xiezuoru.github.io”，即可看到主页的效果。

如何设计一个精美的网站？

如果对HT M L语言不熟悉，就需要用一些专业的网页设计工具，如DreamWeaver、Avocode。

如果对页面的要求不高，最简单的办法就是用Word。上传文件则推荐用Git Hub客户端工具，它会自动比较本地目录和云端仓库的更新状态，类似云盘。

图 3 谢作如的GitHub Pages

利用FastPages实现自动转换文档

要实现自动转换文档为网页，需要建一个具备“FastPages”功能的仓库。这个仓库不能自己建立，也不能用“fork”功能来产生，而是要通过一个特定的仓库“generate”（生成）。

具备Fast Pages功能的原始仓库是“fast ai/fast pages”，访问地址为ht tps://github.com/fastai/fastpages。考虑到“fastai/fastpages”是英文版，笔者汉化了一个仓库，名称为“Eas onQYS/fastpagesJupyter”，访问地址为：https://github.com/EasonQYS/f a s t p a g e s Ju p y t e r/。

在这个地址的后面加上“g e n e r a t e”，即https://github.com/EasonQYS/fastpagesJupyter/generate。或者在readme页面中点击生成网站的链接，然后在跳出的页面中，给这个仓库起一个名称。仓库名称没有规定，只要不使用“user name.github.io”就可以。

图4 Fastpages的中文版本

仓库建立成功后，等待大约30秒左右的时间，注册GitHub的邮箱会收到一封英文邮件。按照邮件的要求，生成一对SSH密钥，分别填写在指定的网页中，这里不再赘述。访问“username.github.i o/repository”就能看到这个新主页了。

图 5 收到的英文邮件

例如，笔者的Fast Pages 地址就是https://xiezuoru.github.io/blog/。需要注意的是，无论是否填写密钥，这个页面都能看到，对应的文件就是“i nde x.ht ml ”。只不过没有填写密钥，这个网页文件将不能自动更新。

图6 默认的主页效果

修改仓库根目录下的“index.html ”文件，即可修改主页的效果。其中自动更新的文件列表会出现在“最新博文”的下方。而“关于我”“查找”“标签”这几个网页，要在“_pages”文件中修改。关于这个网站的基本信息，需修改“_confi g.yml ”文件。

那么，如何上传文档自动更新主页呢？只要将文件按“年-月-日-标题”的格式命名，上传到相应的文件夹下即可，如“2020-04-01-虚谷计划简介.doc x”。其中，Word文件要上传到“_word”文件夹，Mark Down格式和网页格式的文档，要上传到“_post s”文件夹中，jupy ter文件则要上传到“_notebooks”文件夹。

建站实践——虚谷计划网站 

按照上述的方式，笔者给“虚谷计划”建立了一个网站。先建立一个名为“ vvp lan”的organizations（组织），然后建一个名为“vvplan.github.io”的仓库。

为了访问方便，笔者设置了cname（别名），将域名www.vvplan.cn指向到这里。

虚谷计划下面有四个项目，笔者对应分别建立了四个具备FastPages功能的仓库，逐一填写密钥。然后，邀请虚谷计划组委会的成员加入这个组织。现在，更新网站也可以像Git Hub中的其他项目开发一样，采用协同工作的形式，权限设置非常灵活。

图 7 基于GitHub Pages建的虚谷计划网站

 结  语

Git Hub Pages是“开源”的，如果有人喜欢你的网站结构或者内容，只要按下“fork”，就能将你的网站clone（克隆）一份。这样一来，就有越来越多的人从这样的分享过程中受益。

除此之外，你还能从这个建站的过程中深刻理解文档格式，体会到标记语言（HTML 、Mark Down、XML、JSON 和YAML等）在信息交流中的重要意义。

这些文档的转换，都是用Python脚本代码来完成的，还可以研究转换脚本，感受Pyt hon的强大功能。

当然，最重要的收获是协同共建的机制，Git Hub能够记录所有用户的操作，分布式的开发和集中式的管理，让协同开发变得有序而灵活。