GitHub Pages: A site to host your personal homepage
Published:
GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.
Setup a GitHub pages
Template
There are generally two types of homepage template for researchers, hugo and jekyll theme academic pages. The example shown here uses a customized version based on “minimal-mistakes-jekyll” theme.
GitHub page
Open a GitHub account and your personal website will be hosted there.
Note: choose your account name carefully since it will become your website link address in the end, if you do not want to pay for any domain address.
Download all files of the associated academicpage page from scratch under Code, or download from a researcher’s existing GitHub pages, for example,
Version control
Download GitHub Desktop as your version control tool.
Link GitHub Desktop with your GitHub account.
Add local repository from the downloaded and unzipped folder. Commit and push changes to GitHub when changes have been made. Refresh you homepage at “Your account name”.github.io.
Personal details
Change details to yours, and there are mainly in the files as follows:
- _config.yml
- _pages: include each individual pages
- _publications: include your publications
- _talks: include your talks
- _portfolio: include your projects
- _teaching: include your teaching experience
- _posts: include your blogs
- images: include associated images of the website
- files: include associated files of the website
Customize
Organise the order of pages in _data/navigation.yml
- Author profile on left side of page:
- author_profile: false or true
- Sort the order of sites,for example _pages/talks.html:
### add curly brackets ({}) and percent sign (%) to each line of codes in the talk.html
#normal order
for post in site.talks
include archive-single-talk.html
endfor
#reversed order
for post in site.talks reversed
include archive-single-talk.html
endfor
- Update _pages/talkmap.html:
###A Git blob (binary large object) is the object type used to store the contents of each file in a repository.
<p>This map is generated from a Jupyter Notebook file in <a href="https://github.com/zejiang-unsw/zejiang-unsw.github.io/blob/master/talkmap.ipynb">/_talks/talkmap.ipynb</a>, which mines the location fields in the .md files in _talks/.</p>
<iframe src="/talkmap/map.html" height="700" width="850" style="border:none;"></iframe>
How to add a new page
_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
_pages/people.html
---
layout: archive
title: "People"
permalink: /people/
author_profile: true
---
### add curly brackets ({}) and percent sign (%) to each line of codes in the people.html
include base_path
### link the documents under _people folder
for post in site.people reversed
include archive-single.html
endfor
_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/
How to add a Avatar profile
Add script to HTML or md
<img src="avatar.png" alt="Avatar" class="avatar">
Add class to CSS in assets/css/academicons.css
.avatar {
vertical-align: middle;
width: 100px;
height: auto;
position: relative;
overflow: hidden;
border-radius: 50%;
}