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

Posted 2020-08-13

首先介绍一下我们实验室新搭建的站点vqa-lib.github.io。

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

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

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

大概有以下几种选择：
- 自己搭服务器，从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 [email protected]

第三步：安装配置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多人合作开发