protocol to maintain this website
Update Date:   2024-05-23

网页状况简介：

整体方案是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 g或hexo generate，从当前的源代码文件中编译并且发布html文件（路径是xielabweb_file/public），应该理解了吧？

hexo s或hexo 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 ../download，ls，然后你会发现我们需要提供的下载服务都在这里，以后要添加一下需要下载的文件，如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