protocol to maintain this website

网页状况简介:

整体方案是hexo + github + 个人域名转发

Hexo 环境的配置

参考我的博客

本教程是在mac环境下写的:

按照博客中的方法配置好npm和hexo

可以尝试自己搭建一个blog试试水。

在没有配置域名的情况下,xielab.org.cn的访问方式如下

https://xielabtsinghua.github.io

我配置了xielab.org.cn 解析到 xielabtsinghua.github.io

之后就可以使用xielab.org.cn访问实验室网站了

如何管理和编辑xielab.org.cn

step0 权限

需要向我索要管理员权限,即将你的github账号和用户名发给我,得到contributor权限后进行下一步。

step1 将网站源代码文件下载到本地

找一个电脑本地合适的位置:

git pull "git@github.com:xielabtsinghua/xielabweb_file.git"


1
2
3
4
cd xielabweb_file
hexo clean
hexo g
hexo s

然后即可打卡浏览器查看本地网页,默认打开的是本地ip的4000端口

http://localhost:4000/

step2 一个注意事项

挺重要的!

每次编辑源文件之前务必做好备份

cp -r xielabweb_file xielabweb_bk

万一乱搞搞崩了恢复一下文件即可

step3 更改标签页的内容,如member

示例:

需求,给member page添加一位新成员,该成员是rotation student

!在进行下面操作之前,我建议你使用typora这个软件来编辑md文件,如果你装好这个软件了,并将其设置为md文件的默认打开软件,输入下面的命令

1
2
3
4
5
cd /Users/zhaohuanan/opt/github/xielabweb_file/source/members
ls
# 同样的,你会看到一个index文件夹和一个同名的md文件
index index.md
open index.md

typora软件会打开这个文件,目前是这个样子

接下来就用到了同名文件夹index

open index

将一个名为pig.jpeg文件放在这个文件夹(是一只猪头)

回到typora,使用快捷键command+/,找到# Rotating student,你不需要懂html,但是你需要看懂下面这个图

<tr></tr>就是一个区块,含义是一个一行两列的表格,cpoy代码,在赵华男区块和曾埶天区块加入一只猪头区块,

在编号1处,我们导入了之前的index文件夹下的pig.jpeg图片,编号2处,alt是图片标注,编号3处,zoom代表了缩放比例,编号4处更改为新的rotation学生的信息,command+s保存一下,关闭typora和index文件夹,回到terminal,执行

1
2
3
hexo clean
hexo g
hexo s

http://localhost:4000

打开网页查看你添加的小猪

现在你大概理解编辑我们的网站的方式了,我来解释一下之前的几个命令:

hexo clean,删除上一次发布的网页html文件(路径是xielabweb_file/public

hexo ghexo generate,从当前的源代码文件中编译并且发布html文件(路径是xielabweb_file/public),应该理解了吧?

hexo shexo sever,占用本地的4000端口,并且提供web服务,也就是用过这个命令之后,只要不终止这个命令,你的计算机就会存在一个网页服务,打开http://localhost:4000即可查看网页,也就是public文件夹中的文件数据。

ok,接下来将你添加的猪删掉,

现在诸如:

  • publication
  • project
  • contact
  • member
  • 等待标签页

你应该都会编辑了,也学会了如何插入图片,至于如何添加文件提供下载,可以参考我们的网页https://xielab.org.cn/2019/11/21/Dr-Xie-resume-CN/,它是一个推文,接下来介绍如何发布一个推文

step4 添加一个新的post

现在我们尝试添加一个新的post推文

1
2
hexo new post "test"
这个命令会在_post文件夹中新建一个test文件夹和一个test.md文件

然后标准输出会告诉你

INFO Created: ~/opt/github/xielabweb_file/source/_posts/test.md

注:我把源文件放在了这个目录下~/opt/github/

ok,下面我们cd到_post文件夹下,会发现有一个test的文件夹和一个test.md的文件

open test.md

接下来在图形界面完成网页内容的编辑就好了。

你可以打开Dr-Xie-resume-CN.md这个post,

按下command+/查看源代码

然后cd ../downloadls,然后你会发现我们需要提供的下载服务都在这里,以后要添加一下需要下载的文件,如paper的pdf资源,将它放在download文件夹中,在post中引用即可。

最重要的,同步到github服务

我们之前了解了怎么编辑网页的源文件,当一切就绪之后执行以下命令

1
2
3
4
5
hexo clean
hexo g
# 可选,查看有没有错误
hexo s
hexo d

期间如果出现问题,应该是你的git没有配置好,参考我的博客

等待同步完成之后,访问http://xielab.org.cn/,你会发现,访问出错,404!,这是正常的,我们需要在github的仓库中完成一个更改,打开如图这个仓库(我应该已经给了你contributor权限)

打开setting设置,滚动到最下方,在custom domin处填上我们的域名,save,

需要缓一会儿,大概一分钟,访问http://xielab.org.cn/,现在应该可以正常访问了。

最后

请养成良好的备份习惯,拿到contributor权限之后,慎重操作xielabweb_file这个仓库,这个仓库备份了我们网站的所有源代码文件!有特殊问题,联系我即可~

Author:


  TOC