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

首先介绍一下我们实验室新搭建的站点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多人合作开发

时间: 2024-08-16 00:00:10

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

iframe子页面内刷新父页面中另一个iframe子页面

框架页面如下: <div id="aa" style="float: left; height: 500px; border-right-style: solid; border-right-color: #CCCCFF; border-right-width: 2px;"> <IFRAME id="tree" name="tree" src="/ScienProjectWeb/commonjsp/

用ASP做一个TOP COOL的站内搜索

该搜索引擎由一个HTM文件一个ASP文件组成,主要是运用FILESYSTEMOBJECT组件来达到目的,功能强大,修改界面以后可以直接拿来使用,当然加上一点自己的东西就更加好了. searchpage.htm 该HTM文件用来传入条件 <HTML> <HEAD> <TITLE>ASP搜索引擎范例</TITLE> </HEAD> <BODY> <CENTER> <FORM METHOD=POST ACTION=&quo

dos移动一个文件内的所有内容到另一个文件

1)移动一个文件内的所有内容到另一个文件(不包含该目录) 比如:把文件夹1 里面的所有文件(包含子目录)全部移动到与1同级目录的文件夹2中: cd 1 for /f "tokens=* delims= " %a in ('dir /a /b') do (move %a ..\2)

[ASP.NET MVC2 系列] ASP.Net MVC教程之《在15分钟内用ASP.Net MVC创建一个电影数据库应用程序》

[ASP.NET MVC2 系列]      [ASP.NET MVC2 系列] ASP.Net MVC教程之<在15分钟内用ASP.Net MVC创建一个电影数据库应用程序>      [ASP.NET MVC2 系列] ASP.Net MVC教程之<ASP.NET MVC 概述>     [ASP.NET MVC2 系列] 理解MVC应用程序的执行过程     [ASP.NET MVC2 系列] ASP.NET MVC Routing概述      [ASP.NET MVC2

教你精简迅雷9内置浏览器,还你一个清爽的迅雷!!!

迅雷,一个日常不可或缺的快速下载软件,有着广大的用户群,时代不断进步,迅雷的版本也不断的在更新,公司毕竟要赚钱才行,所以开始追求利益最大化,在软件中捆绑软件.广告等等,很常见.迅雷也一样,最闹心的是,他里面捆绑了内置浏览器,推送视频.广告,严重影响电脑运行速度以及用户体验,而且他的内置浏览器还没有开关可以关闭,蛋疼,所以今天,就教大家如何通过非常简单的操作,屏蔽.精简内置浏览器,还大家一个清爽的迅雷. 内置浏览器.不断推送视频.广告,让界面搞得花里胡哨的,影响系统速度,这样的迅雷你还喜欢吗? 接

正尝试在 OS 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化函数内运行托管代码,这样做会导致应用程序挂起。

当我在窗体初始化的时候,调用了一个外部的dill时,它就不知什么原因的 抛出一个“正试图在 os 加载程序锁内执行托管代码.不要尝试在 DllMain 或映像初始化函数内运行托管代码”的异常,程序就卡掉了,在网上查了查,相关说明如下: .NET2.0中增加了42种非常强大的调试助手,MDA.Loaderlock 是其中之一.Loaderlock检测在一个拥有操作系统loader lock的线程上运行托管代码的情况.这样做有可能会引起死锁,并且有可能在操作系统加载器初始化DLL前被使用. 大致理解

从一个内置apk中安装另一个内置的apk

单击内置的apk,安装已经内置到系统中的apk package com.wind.bbminstaller; import java.io.File; import android.app.Activity; import android.content.Intent; import android.net.Uri; import android.os.Bundle; public class MainActivity extends Activity { static final int RE

如何在局域网内搭建外网能访问的网站?

实现这个功能很简单,用花生壳软件即可.花生壳大家都有听说过,一款ddns动态域名解析软件.根据网络环境的不同,分为内网版和公网版.安装并注册花生壳动态域名软件,在任何地点.任何时间.使用任何线路,均可利用这一服务建立拥有固定域名和最大主动权的互联网主机. 花生壳网址http://www.oray.com 公网版可以通过http://hsk.oray.com/download下载花生壳公网版进行设置搭建服务.下面以内网版搭建网站为例: 需要使用的软件工具:花生壳内网版2.2软件和IIS7.0组件,

将一个字典内的内value转换为集合:返回一个数组,此数组中包含输入字典的键值对中的数组的所有元素(为NSArray添加category)

- (NSArray *)testa:(NSDictionary *)dic { NSMutableArray *arr_M = [NSMutableArray array]; // 1.遍历每一个元素添加到集合 for (NSString *key in dic.allKeys) { for (NSString *str in dic[key]) { [arr_M addObject:str]; } } return arr_M; } - (NSArray *)testb:(NSDiction