【教程】用github协同共建一个“开源”网站
用GitHub协同共建一个“开源”网站
浙江省温州中学 谢作如
中国石油大学（华东） 邱奕盛
学科关键词：技术、工程
随着安卓智能手机的普及，“开源”这一新名词逐步被大众接受。除了安卓、Linux等大家比较熟悉的开源软件外，开源家族中还有“开源硬件”。创客教育中的造物神器Arduino、掌控板就是典型代表。2017年教育部发布的普通高中信息技术课标中，还增加了一个叫做《开源硬件项目设计》的模块，重点普及“开源”思想，引导学生“理解并自觉践行开源的理念与知识分享的精神”。
如何与更多人一起分享自己的学习心得？除了在一些公共平台发表文章心得外，做一个网站肯定是重要的途径。但对很多人来说，做网站似乎是一个很专业的技能，尤其是还会涉及到域名购买、解析，空间租借之类，还要申请各种认证。其实做一个网站并没有这么难，只要会用GitHub就可以了。
图 1 GitHub网站
一、用GitHub建站的可行性分析
对IT方面有些了解的人大都听说过Github，这是全球最大的代码共享平台。准确地说，Github是一个面向开源及私有软件项目的托管平台。除了支持Git（一个开源的分布式版本控制系统）外，Github还提供了很多有趣的功能，比如GitHub Pages就是其中一个。
选择GitHub Pages来建网站，理由一般有如下三个：
1.使用方便: GitHub Pages 集成在 GitHub中, 直接和代码管理绑定在一起。采用了代码更新命令进行自动部署, 使用非常方便。维护方面同时支持在线管理和客户端管理两种方式。
2.免费: GitHub免费提供了“username.github.io”的域名，还支持自定义域名,几乎等同于一个免费的静态网站服务器。
3.无数量限制: GitHub Pages没有使用的数量限制, 每一个Repository（仓库）都可以部署为一个静态网站。
当然，如果仅仅是发布静态网站，那更新网站也会成为一项非常无趣的工作。最近GitHub的程序员发布了FastPages的工具，能够将文档直接转换为网页。支持的文档类型还很丰富，如Word、MarkDown和Jupyter等。这个功能一发布就受到很多用户的关注，因为这样一来，我们只要按照规范上传各种文档，主页自动会进行更新，看起来和个人博客就没有区别了。更重要的是，这个博客是没有任何广告的，可以多人协同维护的。
用FastPages生成的网站
二、建立GitHub Pages的步骤介绍
要建立一个GitHub Pages，第一步自然是要注册一个GitHub用户了。有了用户后，只要建一个名称为“username.github.io”的Repository（仓库），就拥有了一个静态网站。如我的用户名是“xiezuoru”，这个库的名称就是“xiezuoru.github.io”。然后，在这个Repository的根目录下建一个名称为“index.html”的文件，输入HTML代码，主页就产生了。访问“xiezuoru.github.io”，即可看到这个主页的效果。
如何设计一个精美的网站？这需要一定的审美能力。如果对HTML语言不熟悉，就需要用一些专业的网页设计工具，如DreamWeaver、Avocode之类。如果对页面的要求不高，最简单的办法就是用Word。上传文件则推荐用GitHub客户端工具，会自动比较本地目录和云端仓库的更新状态，类似云盘。我借鉴了一个博客的外观设计，做一个很简单的页面，如图所示。
谢作如的GitHub Pages
三、利用FastPages实现自动转换文档
要实现自动转换文档为网页，还需要建一个具备“FastPages”功能的仓库。这个仓库不能自己建立，也不能用“fork”功能来产生，而是要通过一个特定的仓库“generate”（生成）。
具备FastPages 功能的原始仓库是“fastai/fastpages”，访问地址为https://github.com/fastai/fastpages。考虑到“fastai/fastpages”是英文版，我们特意汉化了一个仓库，名称为“EasonQYS/fastpagesJupyter”，访问地址为：https://github.com/EasonQYS/fastpagesJupyter/
在这个地址的后面加上“generate”，即https://github.com/EasonQYS/fastpagesJupyter/generate。或者在readme页面中点击生成网站的链接，然后在跳出的页面中，给这个仓库起一个名称。仓库名称没有规定，只要不使用“username.github.io”就可以。
。
Fastpages的中文版本
仓库建立成功后，大约30秒左右，你用来注册GitHub的邮箱会收到一封英文邮件。按照邮件的要求，生成一对SSH密钥，分别填写在指定的网页中，这里不再赘述。
收到的英文邮件
访问“username.github.io/repository”就能看到这个新主页了，如我的fastpages地址就是https://xiezuoru.github.io/blog/。需要注意的是，无论是否填写密钥，这个页面都能看到，对应的文件就是“index.html”。只不过没有填写密钥，这个网页文件将不能自动更新。
默认的主页效果
修改仓库根目录下的“index.html”文件，即可修改主页的效果。其中自动更新的文件列表会出现在“最新博文”的下方。而“关于我”、“查找”、“标签”这几个网页，要在“_pages”文件中修改。关于这个网站的基本信息，请修改“_config.yml”文件。
那么，如何上传文档自动更新主页呢？其实很简单，只要将文件按“年-月-日-标题”的格式命名，上传到相应的文件夹下即可，如“2020-04-01-虚谷计划简介.docx”。其中，Word文件要上传到“_word”文件夹，MarkDown格式和网页格式的文档，要上传到“_posts”文件夹中，jupyter文件则要上传到“_notebooks”文件夹。
四、我的建站实践——虚谷计划网站
按照这样的方式，我们给“虚谷计划”建立了一个网站。先建立一个名为“vvplan”的organizations（组织），然后建一个名为“vvplan.github.io”的仓库。考虑到访问方便，我们设置了cname（别名），将域名www.vvplan.cn指向到这里。
虚谷计划下面有四个项目，我们也分别建立了四个具备fastpages功能的仓库，逐一填写密钥。然后，邀请虚谷计划组委会的成员加入这个组织。现在，更新网站也可以像GitHub中的其他项目开发一样，采用协同工作的形式，权限设置非常灵活。
基于GitHub Pages建的虚谷计划网站
五、结语
表面上看，这篇文章介绍了如何用GitHub建一个网站。其实，这个建站方式和传统的做法是不一样的。最大区别就在于GitHub Pages是“开源”的，任何人只要喜欢你的网站结构或者内容，只要按下“fork”，就能将你的网站clone（克隆）一份。这样一来，就有越来越多的人从这样的分享过程中受益。高中开源硬件项目设计模块的教学，需要引领学生用这种方式分享自己的项目。
除此之外，我们还能从这个建站的过程中深刻理解文档格式，体会到标记语言（Html、MarkDown、XML、JSON和yaml等）在信息交流中的重要意义。这些文档的转换，都是Python脚本代码来完成的，我们还可以研究转换脚本，感受Python的强大功能。当然，对于我们来说，最重要的收获反而是协同共建的机制，GitHub能够记录所有用户的操作，分布式的开发和集中式的管理，让协同开发变得优雅而灵活。