GitHub Pages是一个静态站点托管服务，可直接从GitHub上的存储库获取HTML，CSS和JavaScript文件，还可以选择在构建过程中运行这些文件并发布网站。

设置GitHub页面

模板

研究人员通常使用两种类型的个人网站模板：雨果（hugo）和杰基尔（jekyll）主题学术页面。此处显示的示例使用基于“ minimum-mistakes-jekyll”主题的定制版本。

1. GitHub页面

创建一个GitHub账户，您的个人网站将在那里托管。

注意：如果您不想为任何域名地址付费，请仔细选择您的帐户名，因为它最终将成为您的网站链接地址。

在“代码”下从头下载相关学术页面的所有文件，或从研究人员现有的GitHub页面下载，例如，

• GitHub: zejiang-unsw的zejiang-unsw.github.io

• GitHub: oliviergimenez的oliviergimenez.github.io

• GitHub: samzipper的website-HEAL

2. 版本控制(Git Version Control)

下载GitHub Desktop作为您的版本控制工具。

将GitHub Desktop与您的GitHub帐户链接。

从下载并解压缩的文件夹中添加本地存储库。进行更改后，将更改提交（commit）并推送（push）到GitHub。在“您的帐户名”.github.io上刷新您的主页。

3. 个人资料

将详细信息更改为您的详细信息，这些文件主要包括以下内容：

• _config.yml

• _pages:包括每个单独的页面

• _publications:包括您发表的文章

• _talks:包括您的会议演讲

• _portfolio: 包括您的项目

• _teaching:包括您的教学经历

• _posts:包括您的博客

• images:包括网站的相关图片

• files:包括网站的相关文件

定制

1. 调整 _data下的navigation.yml中的页面顺序

2. 页面左侧的作者简介：

author_profile: false or true

3. 排序网站的顺序：

### reversed
{% for post in site.talks %}
{% include archive-single-talk.html %}
{% endfor %}
{% for post in site.talks reversed %}
{% include archive-single-talk.html %}
{% endfor %}

如何添加一个新的页面

1. _config.yml:

collections:
people:
output: true
permalink: /:collection/:path/
defaults:
# _people
– scope:
path: ""
type: people
values:
layout: single
author_profile: true
read_time: true
comments: true
share: true
related: true

2. _pages下的people.html

—
layout: archive
title: "People"
permalink: /people/
author_profile: true
—
{% include base_path %}
# to link the documents under _people folder
{% for post in site.people reversed %}
{% include archive-single.html %}
{% endfor %}

3. _data下的navigation.yml

• Change the title to change the tab name shown online!

• Comment out to not show the People tab online!

# main links links
main:
– title: "People"
url: /people/

如何添加一个头像

1. 添加下列代码到HTML 或者 md中

<img src="avatar.png" alt="Avatar" class="avatar">

2. 添加类别到 CSS 中assets中css下的academicons.css

.avatar {
vertical-align: middle;
width: 100px;
height: auto;
position: relative;
overflow: hidden;
border-radius: 50%;
}