如何在一天内为你的实验室做一个网站

author: Hui Zhang

为什么需要搭建一个站点?

我认为大概有以下两点作用

  • 宣传与分享。向外界展示自己的研究成果,而不用去在意水平的高低。高水平的研究自然能增光添彩,入门水平的研究也能为后来的新人指明道路。
  • 记录与传承。每个人在实验室都会呆至少两年,这期间做过的汇报、实验、研究的结果都值得记录下来,这样不仅能为后来人开展扩展性的研究铺好道路,也能避免资料随着人员流动而丢失。

使用什么工具来搭建站点?

大概有以下几种选择:

  • 自己搭服务器,从0开始做网站,再买个域名绑定,太复杂,耗时。
  • WordPress:毕竟也是世界范围内使用量最高的开源CMS系统,是个不错的选择,搭建的过程也称得上是傻瓜式的。
  • github page:是用来托管GitHub上静态网页的免费站点,享有免费空间和很多现成的框架。

这里我们选择的是github pages,有以下几点考虑

  • 背靠github,全世界最优秀的代码库都在这里,也有很多大牛,开阔眼界
  • 搭建github pages的过程,以及搭建完成后多人共同编辑维护站点内容的过程中都要与git那一套东西打交道,适合新人学习,基本这一套流程走下来就能同时完成git入门教学了

需要的工具

  • Hexo:一个简单、快速、强大的静态博客框架。可以快速方便地生成静态页面,支持Markdown,还有丰富的插件支持
  • git and github:这个就不用说了,必须的
  • Node.js:Hexo需要用到很多node模块
  • cmd markdown编辑器:github pages的内容需要用markdown语言编写,markdown是一种标记语言,兼容性极强,可以用所有文本编辑器打开,因为是纯文本语言,可以让你专注于文字而不是排版,而且格式转换方便,Markdown 的文本你可以轻松转换为 html、电子书,同时还有极好的可读性。cmd markdown编辑器是一款在线markdown编辑器,带有常用工具栏,可以导入导出本地文件,云端存储,很方便。
  • 科学上网:有备无患。

架构简述

简单的说明一下这个站点的架构

站点域名为vqa-lib.github.io的实际站点,由Github为我们托管;
静态网页的内容由Hexo框架为我们生成,同时需要一些第三方插件来丰富站点的功能;
站点的主题使用了NexT主题,相比于原生主题更加简洁大方;
为了便于多人共同编辑、维护站点,专门建立了Github Orgnization:vqa-lib,在vqa-lib中包含三个代码库:

  • vqa-lib.github.io,对应站点静态网页内容
  • Hexo,对应生成内容的框架,使用markdown编写的描述各个页面内容的md文件都在这个库中,同时包含theme内容
  • hexo-theme-next:fork自,以子模块(Submodule)的形式包含在Hexo代码库中,对应主题,即外观
    在vqa-lib这个Github Orgnization中设置了Team,邀请了实验室全体成员,只有这个Team的成员才有编辑各代码库的权限。

Windows下的详细搭建步骤

这里分两个角色来说,一个是创建站点的人,称为管理员,一个是参与维护的人,称为维护人员。

管理员

第一步:注册github,创建orignization,新建仓库,创建Team,将组员加进来

这一步比较简单,需要注意的是,github page对应的仓库名必须为username.github.io。
这里我首先以视音频技术团队的名号创建了github账号cuc-mmTeam,然后在该账号中创建了vqa-lib orgnization,再在vqa-lib中创建了vqa-team以添加实验室成员,又创建了前述的vqa-lib.github.io代码库和Hexo代码库,至于hexo-theme-next代码库。则fork自https://github.com/iissnan/hexo-theme-next。什么是fork?可以简单的理解为把别人代码库拷贝过来然后在它的基础上做修改。

第二步:安装Node.js和Github Desktop for windows,配置git

github desktop for windows为git工作流程提供了可视化界面,适合新手学习。安装后能在开始菜单中找到git shell,这是一个git命令行工具,打开它,输入以下命令,让本地git项目与远程的GitHub建立联系
ssh -T git@github.com

第三步:安装配置Hexo

继续在git shell中操作,输入下面的命令安装hexo。npm是node.js的包管理器。

npm install hexo-cli -g

接着输入

hexo init Hexo

这时就会发现git shell对应的目录下多出了一个Hexo文件夹。里面包含了一些初始化文件。实际上这时候就已经生成了站点内容,我们也可以预览一下。输入

hexo generate 
hexo server

如下

此时打开浏览器,在浏览器地址栏输入 http://localhost:4000/ (默认端口为4000), 便可以看到最原始的博客了。以后发表博文想先预览,也可以通过 hexo server 在本地先跑起来,看看效果。最原始的效果如下

第四步:将本地Hexo文件与Github.io对应起来

在 Hexo 文件夹下找到 _config.yml 文件,如下图所示:

找到其中的 deploy 标签,改成下图所示形式,并保存。注意:冒号后面要加上一个空格,否则会报错。

注意:在目前的hexo版本中type需要写成git
回到git shell中输入,安装git部署需要的模块

npm install hexo-deployer-git --save

再输入

hexo clean
hexo generate
hexo deploy

可以看到下面的内容

到这一步,站点就已经部署到 GitHub 上了,此时,通过 vqa-lib.github.io(即你那个仓库的名称,形如:”你的 GitHub 用户名”.github.io),就可以看到站点了。

第五步:将Hexo本地内容部署到github上,安装next主题子模块

在Hexo中,有三类资源:源文件(文章数据)、主题资源和配置文件,分别对应Hexo初始化目录中 ../source 、../themes 和 ../_config.yml 。他们是构成站点的核心内容,当两个站点的源文件、主题资源和配置文件一致时,可以把他们看作是相同的。对于实现多人对站点的共同编辑和维护,关键就是保持这三类资源在多台设备上的一致性。当然你可以选择将这些核心内容拷贝来拷贝去,但是大家都知道,Hexo的博客站点文件是维护在Github上的,在发布新文章,修改或删除已有文章之后,hexo都是调用Git将更新后的站点文件上传至Github,这样就保证在网页中显示的内容永远是最新的。我们借鉴这一思路将Hexo源文件也保存到云端(Github)并进行同步更新,从而替代直接拷贝。
具体处理流程为:首先上传旧设备中的源文件到Github,然后抓取并替换新设备中的源文件。接下来,不论是在新设备还是旧设备中,写博客之前更新一下源文件,然后在更新后的基础上写文章,待发布完成之后,将新添加的内容上传到Github。如此往复,就可以轻松而且准确地在两台设备上更新博客了。这里所说的设备就对应不同的编辑人员。对应的具体操作步骤如下:
首先假设你已经在github上创建了对应的Hexo代码库。
在git shell中输入

git init                             #初始化本地仓库
git add .                            #将当前目录所有文件添加到暂存区域    
git commit -m "first commit"         #编辑提交信息
git remote add origin your_repo_url  #添加远端
git push -u origin master            #提交

这时再回到你的github网页上看看,就能看到Hexo代码库已经包含了我们刚刚提交的本地内容了。

接下来我们安装next主题子模块。这个模块本身也是一个开源项目,我们将它fork为我们自己的代码库,这样就可以根据我们的需求对他进行修改,同时还可以合并原作者的更新。同样为了实现多人共同编辑,将它以子模块的形式添加到我们创建的Hexo代码库中。在git shell中切换到Hexo目录,输入

git submodule add your_next_theme_git_url themes/next

这时再打开你的本地文件,就能看到themes文件夹下多出了next文件夹,里面是你的主题。执行git push后能看到github中也添加了新的子模块。
Hexo 有两份主要的配置文件(_config.yml),一份位于站点根目录下,另一份位于主题目录下。为了描述方便,在以下说明中,将前者称为站点配置文件,后者称为主题配置文件。现在打开 站点配置文件,找到 theme 字段,并将其值更改为 next。执行上面发博文的命令,刷新你的个人博客,就能看到你设置的主题是否启用。接下来就可以参照next的文档进一步润色你的博客了。
修改了主题后同样需要将修改提交到远端,这里很简单,需要先到子模块目录下做一次git push,在切换到父目录下面做一次git push。

第六步:发表第一篇文章

我们可以使用命令新建一篇文章,使用 Git Shell 进入 Hexo 文件夹,输入以下命令:

hexo new "文章题目"

命令执行完后,就会发现在 Hexo\source_posts目录中多了一个文件 文章名.md,这就是我们刚才新建的文章。
新建文章是用上面的方法,新建页面也可以采用命令:

hexo new page "页面名称"

命令执行完后,就会发现在 Hexo\source目录中多了一个文件夹,里面还有一个index.md,这就代表我们新建了一个页面。
用文本编辑器打开上面新建的文章,如下图所示:

三个”-“后面就是文章的正文内容,接下来就是正儿八经地撰写文章了。因为我们的文章都是用Markdown语言写的,所以首先,你需要一个好用的Markdown编辑器,就用我前面说的cmd markdown 就可以。markdown语法 具体请看这里的Markdown教程:Markdown——入门指南。
写完之后,执行

hexo clean      #修改了CSS之类的文件之后,需要执行clean,来清除缓存
hexo generate
(若要本地预览就先执行 hexo server)
hexo deploy

刷新你的站点,就可以看到新鲜出炉的文章了。
最后别忘了,做了修改之后都要做一次git push来同步远端。

维护人员
对于维护人员来说就比较简单了。

第一步:注册github账号,申请加入Team
第二步:安装Node.js和Github Desktop for windows,配置git
第三步:安装配置Hexo
这几步和管理员角色的前几步操作相同。不再赘述。

第四步:同步本地内容和远端内容

在git shell中输入

git init #初始化本地仓库
git remote add origin your_hexo_repo_url  #添加远端
git reset --hard
git clean -f -d    #把本地初始化的内容清理掉
git pull your_hexo_repo_url master  #将远端内容拉取到本地,同步完成
git submodule init  #初始化子模块本地仓库
git submodule update  #更新子模块
npm install hexo-deployer-git --save  #安装git 模块

上述步骤只需要进行一次。以后都不用了。
至此,就可以跟管理员步骤类似了,新建文章,generate、deploy等等

参考链接
如何利用GitHub Pages和Hexo快速搭建个人博客
使用Git Submodule管理子模块
如何同步 Github fork 出来的分支
Hexo移植
浅谈Github多人合作开发