Repository for Chicago Human+AI homepage. The homepage is based on Hugo static site generator and Researcher theme.
First, clone the repo.
git clone https://github.com/ChicagoHAI/chicagohai.github.io.git
Tip
If you need to edit the homepage theme, not just people information or post news, you need to clone with --recurse-submodules
.
Currently we are using the main
branch as the main branch. The old main
branch is now legacy
branch.
Warning
Do not push and pull to github-pages
branch. It's handled by GitHub Actions automatically.
You don't need Hugo installed on your local machine to edit the content. Just edit the markdown files in content/
and data/
folders, check content for more details on this.
If you want to preview the website locally, you need to install Hugo. See Environments for more details.
Commit your changes and push it to the remote server on GitHub. A push will trigger GitHub Actions to build the website automatically. You don't need to and shouldn't commit the public/
folder.
You can check the progress on the Workflows log page. After it's done, GitHub Pages will automatically deploy it. Wait for some time and then refresh the homepage, and it's done. You may need to manually clear the cache.
An earlier version of installing instructions can be found in README.legacy.md. It's now deprecated but kept for reference.
You don't need to install Golang toolchain to use Hugo site generator. Check their installation guide for more details.
Tip
If you are on Mac, you can use Homebrew to install Hugo.
brew install hugo
If you are on Windows, you can use Scoop to install Hugo.
scoop install hugo
Run the following command in the base directory of this repo.
hugo server
Then you can preview the website on localhost:1313
. The server will automatically reload when you change the content.
Important
You don't need to and shouldn't build the website manually. GitHub Actions will build it automatically. This means you shouldn't commit the public/
folder.
The people data is stored in data/people.yaml
. You can add your information to this YAML file under the right section (phd, postdoc, masters and undergrads etc.).
- id: john_doe # last-name_first-name is preferred. Use underscore to connect.
name: John Doe
homepage: https://chicagohai.github.io/ # Optional. Omit the key-value pair if you don't have one.
If you are using VS Code, this file should have an auto type check.
The avatars are stored in assets/images/people
. Crop your avatar to 1x1 ratio (the size doesn't matter) and rename it to your id you set in the people.yaml
file. You can use JPG or PNG format. Put your avatar inside the folder.
Edit content/demos.yaml
and content/publications.yaml
to add your demos and publications. These are normal Markdown files.
News are stored in content/news/
. Add a new Markdown file to this folder to add a news. We recommend to use the format of YYMMDD-{title}.md
for news files, so the files will be ordered by time without sorting. The content of the file should start with TOML frontmatter like this:
+++
title = "Postdoc Position through DSI Fellowship"
date = 2022-07-22
contentAsDesc = true
+++
Refer to TOML help for more details on TOML format.
The contentAsDesc
field is used to show the content of the news as the description on the news list page. You can manually add a description
field to the frontmatter to override this behavior, as in the symposium post.
If you need LaTeX support on the post, add math = true
to the frontmatter.
If you need to add images to the post, move the Markdown file to a folder of name YYMMDD-{title}
and rename the Markdown file to _index.md
. Images can be stored inside this folder and its subfolders. For example, if you put an image at ./images/1.png
, you can refer to it in the Markdown file as ![image](images/1.png)
.
There are some Hugo shortcodes you can use on the news post. Check Shortcodes for more details.
A colored background to emphasize some content.
{{% card %}}
This is the content of the card.
{{% /card %}}
A easy way to create a grid. By default, it will create a grid with 2 column and the second column will fill all remaining space. You can specify the number of columns by cols
parameter using CSS's grid-template-columns
syntax. You can also specify rows
for grid-template-rows
. gap
is used to specify the gap between rows and columns. style
can be used to specify other CSS styles.
{{% grid gap="0 0.5rem" %}}
**(1,1)**
(1,2)
**(2,1)**
(2,2)
{{% /grid %}}
Tip
For a 3 column grid, you can use cols="auto auto 1fr"
.
Note
In Hugo, you can {{% shortcode %}}
and {{% /shortcode %}}
to wrap Markdown contents and {{< shortcode >}}
and {{< /shortcode >}}
to wrap raw HTML contents.